(熊猫大哥大教程)JSP+MySQL校园新闻网站(4)–新闻浏览功能开发

查看全部教程:熊猫大哥大教程索引

前言

系列文章目录、演示网站、源码参见:项目实战系列文章

任务

本篇来实现新闻浏览页面。

功能

页面顶部是标题栏,标题栏左侧是网站名称SchoolNews--校园新闻网,右侧是登录按钮,管理员可以凭借账号密码登录后发布新闻。

页面内容区域是新闻列表,以表格的形式展示新闻,点击新闻标题可以跳转到具体新闻内容。

整体效果如下:
在这里插入图片描述

开发

1、新建view.jsp页面

右击WebContent文件夹,选择New-JSP File,文件名为view.jsp,表示新闻浏览页面。默认生成的代码如下:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
   pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>

</body>
</html>

此时右键项目-Run As-Run On Server启动Tomcat服务器后,浏览http://127.0.0.1:8080/schoolnews/view.jsp,效果如下:
在这里插入图片描述

2、修改页面编码和标题

为了让网页支持中文,将编码改为UTF-8;修改网页标题为新闻浏览页,修改后代码如下:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻浏览页</title>
</head>
<body>

</body>
</html>
3、添加JDBC数据库操作支持

由于本页面要从数据库中取出新闻信息展示,所以需要引入数据库操作相关的类库,添加import语句如下:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
4、添加顶部标题栏

在body区域添加顶部标题栏,包括网站名称和登录按钮。

<body>
	<div class="header-bar">
		<span class="header-title">SchoolNews--校园新闻网</span> 
		<a class="header-button" href="login.jsp">登录</a>
	</div>
</body>
5、为标题栏添加样式

我们新建style.css文件用于保存css样式信息,同时在view.jsp中通过<link>标签引入style.css。

<head>
<meta charset="UTF-8">
<title>新闻浏览页</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>

然后编辑style.css,首先设定body内容居中显示,然后设置标题栏的高度和背景色,然后设置标题的字体大小和颜色,最后设置按钮的样式。

/* 设置网页内容居中 */
body {
	width: 1000px;
	margin: 0 auto;
}
/* 设置标题栏高度和背景色 */
.header-bar {
	height: 40px;
	line-height: 40px;
	background-color: #F0F0F5;
}
/* 设置网站标题靠左显示、字体大小和颜色 */
.header-title {
	float: left;
	font-size: 1.6em;
	color: #31343B;
}
/* 设置登录按钮靠右显示、文字颜色、下划线取消 */
.header-button {
	float: right;
	color: #9DBF51;
	text-decoration: none;
}

此时打开页面,效果如下,这个标题栏有点意思哈。
在这里插入图片描述

6、添加新闻表格

在标题栏下方添加新闻表格,内容先写死,后面改成从数据库获取,内容如下:

	<div>
		<table class="news_table">
			<thead>
				<tr>
					<td>分类</td>
					<td>标题</td>
					<td>时间</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>语文</td>
					<td>鲁迅的文章写的真好</td>
					<td>2020-04-07</td>
				</tr>
			</tbody>
		</table>
	</div>

此时页面效果如下:
在这里插入图片描述

7、为表格添加样式

我们为表格添加一些样式,让表格更好看点。在style.css中添加如下代码:

/* 设置表格标题字体颜色 */
.news_table thead {
	color: #00CC6A;
}

/* 设置表格边框样式、颜色,设置表格宽度 */
.news_table tr td {
	border-collapse: collapse;
	border: 1px solid #F0F0F5;
	width: 1000px;
}

/* 设置表格内链接的样式 */
.news_table tr a {
	color: #3C9AE5;
	text-decoration: none;
}

此时页面效果如下,嗯,已经到达可以忍受的程度了。
在这里插入图片描述

8、从数据库加载表格内容

我们将表格内容的静态部分,改为从数据库中动态加载,使用JDBC打开数据库连接,将查询出来的数据打印到网页上即可。

可以通过在网页上添加<% %>,该符号中间可以添加java代码块,然后通过out.print()语句向网页中添加动态内容。具体代码如下:

<body>
	<div class="header-bar">
		<span class="header-title">SchoolNews--校园新闻网</span> <a
			class="header-button" href="login.jsp">登录</a>
	</div>
	<div>
		<%
		//加载数据库驱动
		Class.forName("com.mysql.jdbc.Driver");
		//数据库连接参数
		String url = "jdbc:mysql://localhost:3306/schoolnews";
		String username = "root";
		String password = "Easy@0122";
		//获取数据库连接
		Connection conn = DriverManager.getConnection(url, username, password);
		//定义数据库操作sql语句
		String sql = "select * from news";
		PreparedStatement st = conn.prepareStatement(sql);// 在此次传入,进行预编译
		//执行查询,结果放入ResultSet对象rs
		ResultSet rs = st.executeQuery();
		%>
		<table class="news_table">
			<thead>
				<tr>
					<td>分类</td>
					<td>标题</td>
					<td>时间</td>
				</tr>
			</thead>
			<tbody>
				<%
				//对查询结果的每一行
				while (rs.next()) {
					//拼接html代码块
					String row = "";
					row += "<tr>";
					row += "<td>" + rs.getString("type") + "</td>";
					row += "<td><a href='article.jsp?id=" + rs.getString("id") + "'>" + rs.getString("title") + "</a></td>";
					row += "<td>" + rs.getString("time") + "</td>";
					row += "</tr>";
					//打印到网页上
					out.write(row);
				}
				%>
			</tbody>
		</table>
	</div>
</body>

注意关键是拼接html代码块,通过变量row模拟表格的一行内容,然后打印到网页上。实现了动态获取数据库中的数据显示到网页上的功能。

注意代码:row += "<td><a href='article.jsp?id=" + rs.getString("id") + "'>" + rs.getString("title") + "</a></td>";,当点击标题时,会跳转到article.jsp页面,同时传递id参数,参数的值为数据库中该条新闻对应的id列的值。这样我们在article.jsp页面就可以根据id查询出对应新闻的标题和内容并显示了。

9、插入测试数据,测试页面显示效果

我们在数据库中插入几行测试数据如下:
在这里插入图片描述
此时再次打开网页,效果如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oQaCx4zR-1586315498958)(http://img4.sycdn.imooc.com/5e8c4e470001575b10210255.jpg)]
注意我们点击登录后会跳转login.jsp,点击新闻的标题会跳转article.jsp

总结

先设计整体内容,然后实现局部细节,然后添加样式描述。最后通过jsp中的<%%>插入动态语句,动态添加页面内容。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 点我我会动 设计师:上身试试 返回首页