JSP+MySQL校园新闻网站(5)–新闻查看功能开发

红太狼 2023-07-25 09:25 5阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  0. 前言
 *  1. 任务
 *  2. 具体功能
 *  3. 开发
 *   *  3.1 查看原来的跳转链接
     *  3.2 新建article.jsp页面
     *  3.3 根据id从数据库查询并显示
     *  3.4 为新闻标题添加样式
 *  4. 总结

# 0. 前言 #

系列文章目录、演示网站、源码参见：[项目实战系列文章][Link 1]

# 1. 任务 #

本篇来实现新闻内容查看页面。

# 2. 具体功能 #

在新闻浏览页面选择一条新闻点击后，跳转新闻内容查看页面，页面上面显示新闻的标题，中间显示新闻内容。

效果如下：  
![在这里插入图片描述][20200414101441524.png_pic_center]

# 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，从数据库中查出对应新闻的内容后显示到页面上即可。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[20200414101441524.png_pic_center]: /images/20230528/88d07854d87d46d8893907a4e370ce40.png