前言
系列文章目錄、演示網站、源碼參見：項目實戰系列文章
任務
本篇來實現新聞瀏覽頁面。
功能
頁面頂部是標題欄，標題欄左側是網站名稱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中的<%%>插入動態語句，動態添加頁面內容。