基于JSP+MySQL的简单校园新闻网站(4)](http://www.mshxw.com/aiimages/31/238091.png "[手把手教你做毕设](第一季)基于JSP+MySQL的简单校园新闻网站(4)")
本篇来实现新闻浏览页面。
功能页面顶部是标题栏，标题栏左侧是网站名称SchoolNews--校园新闻网，右侧是登录按钮，管理员可以凭借账号密码登录后发布新闻。
页面内容区域是新闻列表，以表格的形式展示新闻，点击新闻标题可以跳转到具体新闻内容。
整体效果如下：
右击WebContent文件夹，选择New-JSP File，文件名为view.jsp，表示新闻浏览页面。默认生成的代码如下：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
Insert title here
此时右键项目-Run As-Run On Server启动Tomcat服务器后，浏览http://127.0.0.1:8080/schoolnews/view.jsp，效果如下：
为了让网页支持中文，将编码改为UTF-8；修改网页标题为新闻浏览页，修改后代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
新闻浏览页
由于本页面要从数据库中取出新闻信息展示，所以需要引入数据库操作相关的类库，添加import语句如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
在body区域添加顶部标题栏，包括网站名称和登录按钮。
我们新建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;
}
此时打开页面，效果如下，这个标题栏有点意思哈。
在标题栏下方添加新闻表格，内容先写死，后面改成从数据库获取，内容如下：
分类
标题
时间
语文
鲁迅的文章写的真好
2020-04-07
此时页面效果如下：
我们为表格添加一些样式，让表格更好看点。在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;
}
此时页面效果如下，嗯，已经到达可以忍受的程度了。
我们将表格内容的静态部分，改为从数据库中动态加载，使用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("id") + "'>" + rs.getString("title") + " ";
row += "" + rs.getString("time") + " ";
row += " ";
//打印到网页上
out.write(row);
}
%>
注意关键是拼接html代码块，通过变量row模拟表格的一行内容，然后打印到网页上。实现了动态获取数据库中的数据显示到网页上的功能。
注意代码：row += "
我们在数据库中插入几行测试数据如下：
此时再次打开网页，效果如下：
注意我们点击登录后会跳转login.jsp，点击新闻的标题会跳转article.jsp。
先设计整体内容，然后实现局部细节，然后添加样式描述。最后通过jsp中的<%%>插入动态语句，动态添加页面内容。
