任务
本篇来实现新闻浏览页面。
功能
页面顶部是标题栏，标题栏左侧是网站名称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、插入测试数据，测试页面显示效果
我们在数据库中插入几行测试数据如下：
此时再次打开网页，效果如下：
注意我们点击登录后会跳转login.jsp，点击新闻的标题会跳转article.jsp。
总结
先设计整体内容，然后实现局部细节，然后添加样式描述。最后通过jsp中的<%%>插入动态语句，动态添加页面内容。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
