[手把手教你做畢設](第一季)基於JSP+MySQL的簡單校園新聞網站(5)

1. 任務

本篇來實現新聞內容查看頁面。

2. 具體功能

在新聞瀏覽頁面選擇一條新聞點擊後,跳轉新聞內容查看頁面,頁面上面顯示新聞的標題,中間顯示新聞內容。

效果如下:
在這裏插入圖片描述

3. 開發

3.1 查看原來的跳轉鏈接

原來的跳轉連接是這樣的:

row += "<td><a href='article.jsp?id=" + rs.getString("id") + "'>" + rs.getString("title") + "</a></td>";

也就是說,點擊新聞標題後,會跳轉到article.jsp?id=x,即跳轉到article.jsp頁面,同時會傳遞該條新聞的id過來。

3.2 新建article.jsp頁面

既然要跳轉article.jsp頁面,我們需要先建立該頁面,代碼如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新聞瀏覽</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
	<div class="header-bar">
		<span class="header-title">SchoolNews--校園新聞網</span> <a
			class="header-button" href="login.jsp">登錄</a>
	</div>
</body>
</html>

3.3 根據id從數據庫查詢並顯示

獲取傳遞過來的id值,然後從數據庫中查出對應新聞的信息,並顯示到頁面上。

<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?characterEncoding=UTF-8";
		String username = "root";
		String password = "Easy@0122";
		Connection conn = DriverManager.getConnection(url, username, password);
		String id = request.getParameter("id");
		String sql = "select * from news where id=" + id;
		PreparedStatement st = conn.prepareStatement(sql);// 在此次傳入,進行預編譯
		ResultSet rs = st.executeQuery();
		rs.next();
		%>
		<h1 class="article-title"><%=rs.getString("title")%></h1>
		<div><%=rs.getString("content")%></div>
	</div>
</body>
</html>

3.4 爲新聞標題添加樣式

標題的樣式改下,在style.css中添加

/* 標題樣式 */
.article-title {
	color: #00CC6A;
}

4. 總結

該頁面負責接收新聞瀏覽頁面傳遞過來的新聞id,從數據庫中查出對應新聞的內容後顯示到頁面上即可。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章