任务
本篇来实现新闻浏览页面。
功能
页面顶部是标题栏，标题栏左侧是网站名称SchoolNews--校园新闻网，右侧是登录按钮，管理员可以凭借账号密码登录后发布新闻。
页面内容区域是新闻列表，以表格的形式展示新闻，点击新闻标题可以跳转到具体新闻内容。
整体效果如下：
开发
1、新建view.jsp页面
右击WebContent文件夹，选择New-JSP File，文件名为view.jsp，表示新闻浏览页面。默认生成的代码如下：
pageEncoding="ISO-8859-1"%>
Insert title here此时右键项目-Run As-Run On Server启动Tomcat服务器后，浏览http://127.0.0.1:8080/schoolnews/view.jsp，效果如下：
2、修改页面编码和标题
为了让网页支持中文，将编码改为UTF-8；修改网页标题为新闻浏览页，修改后代码如下：
新闻浏览页3、添加JDBC数据库操作支持
由于本页面要从数据库中取出新闻信息展示，所以需要引入数据库操作相关的类库，添加import语句如下：
4、添加顶部标题栏
在body区域添加顶部标题栏，包括网站名称和登录按钮。
5、为标题栏添加样式
我们新建style.css文件用于保存css样式信息，同时在view.jsp中通过标签引入style.css。
新闻浏览页然后编辑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、添加新闻表格
在标题栏下方添加新闻表格，内容先写死，后面改成从数据库获取，内容如下：
分类标题时间
语文鲁迅的文章写的真好2020-04-07此时页面效果如下：
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()语句向网页中添加动态内容。具体代码如下：
//加载数据库驱动
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();
%>
分类标题时间
//对查询结果的每一行
while (rs.next()) {
//拼接html代码块
String row = "";
row += "
";row += "
" + rs.getString("type") + "";row += "
" + rs.getString("title") + "";row += "
" + rs.getString("time") + "";row += "
";//打印到网页上
out.write(row);
}
%>
注意关键是拼接html代码块，通过变量row模拟表格的一行内容，然后打印到网页上。实现了动态获取数据库中的数据显示到网页上的功能。
注意代码：row += "
" + rs.getString("title") + "";，当点击标题时，会跳转到article.jsp页面，同时传递id参数，参数的值为数据库中该条新闻对应的id列的值。这样我们在article.jsp页面就可以根据id查询出对应新闻的标题和内容并显示了。9、插入测试数据，测试页面显示效果
我们在数据库中插入几行测试数据如下：
此时再次打开网页，效果如下：
注意我们点击登录后会跳转login.jsp，点击新闻的标题会跳转article.jsp。
总结
先设计整体内容，然后实现局部细节，然后添加样式描述。最后通过jsp中的插入动态语句，动态添加页面内容。
