JSP+MySQL校园新闻网站(6)–管理员登录功能开发

约定不等于承诺〃 2023-05-21 13:59 7阅读 0赞

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

### 本文目录 ###

*  0. 前言
 *  1. 任务
 *  2. 具体功能
 *  3. 开发流程
 *   *  3.1 点击登录按钮
     *  3.2 添加登录页面
     *  3.3 判断登录状态
     *  3.4 开发错误信息页
 *  4. 测试
 *  5. 小结

# 0. 前言 #

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

# 1. 任务 #

之前已经实现了新闻列表的展示、选择一篇新闻后具体内容的展示，这两个页面。

本篇实现下管理员登录功能。

# 2. 具体功能 #

点击登录按钮后，跳转到登录页面`login.jsp`，在登录页面输入用户名密码，如果登录成功则跳转管理页面`admin.jsp`，登录失败则跳转登录失败信息页面`error_nologin.jsp`。

# 3. 开发流程 #

## 3.1 点击登录按钮 ##

在登录按钮中添加跳转链接，点击后跳转login.jsp。

<div class="header-bar">
    		<span class="header-title">SchoolNews--校园新闻网</span> <a
    			class="header-button" href="login.jsp">登录</a>
    	</div>

## 3.2 添加登录页面 ##

登录页面需要放置用户名密码输入框，以及登录按钮。

这个页面需要解释下：

1.  `<form action="admin.jsp">`这是一个表单，表单是用来存放各种输入内容比如文本框、密码框、单选框、复选框。
2.  `action="admin.jsp"`表示表单提交时，会把表单的数据传递给admin.jsp页面。
3.  `<input name="username" type="text" />`，text表示这是一个文本框，可以在其中输入文本。`name="username"`是这个文本框的标志，当跳转到admin.jsp页面时，我们后台代码可以通过这个标识获取这个文本框的输入内容。
4.  `<input type="submit" value="登录">`，submit表示提交表单的按钮，所以点击这个按钮时，表单内容会提交给指定的admin.jsp。

该页面效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]

## 3.3 判断登录状态 ##

我们在admin.jsp判断用户名和密码是否正确，如果错误则跳转到错误信息页面`error_nologin.jsp`，如果用户名密码正确则留在admin.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>
    	<%
    		//支持中文编码
    		request.setCharacterEncoding("utf-8");
    		//获取表单输入的用户名
    		String inputUsername = request.getParameter("username");
    		//获取表单输入的密码
    		String inpputPassword = request.getParameter("password");
    		//如果没输入用户名密码，则跳转错误页
    		if (inputUsername == null || "".equals(inputUsername) || inpputPassword == null
    				|| "".equals(inpputPassword)) {
        
    			request.getRequestDispatcher("error_nologin.jsp").forward(request, response);
    			return;
    		}
    		//配置数据库
    		Class.forName("com.mysql.jdbc.Driver");
    		String url = "jdbc:mysql://localhost:3306/schoolnews?useUnicode=true&characterEncoding=utf8";
    		String username = "root";
    		String password = "Easy@0122";
    		Connection conn = DriverManager.getConnection(url, username, password);
    		//设置sql，查询是否存在用户名和密码都匹配的用户信息
    		String sql = "select * from user where username=? and password=?";
    		PreparedStatement st = conn.prepareStatement(sql);// 在此次传入，进行预编译
    		st.setString(1, inputUsername);
    		st.setString(2, inpputPassword);
    		//执行sql查询
    		ResultSet rs = st.executeQuery();
    		//如果查询结果不存在，则表示用户名密码错误，跳转到错误页
    		if (rs.next() == false) {
        
    			request.getRequestDispatcher("error_nologin.jsp").forward(request, response);
    			return;
    		}
    	%>
    	<div class="header-bar">
    		<span class="header-title">SchoolNews--管理后台</span> <a
    			class="header-button" href="#">欢迎您：<%=rs.getString("username")%></a>
    	</div>
    	<h1 class="article-title">发布新闻</h1>
    </body>
    </html>

## 3.4 开发错误信息页 ##

这个比较简单，显示错误信息即可。

# 4. 测试 #

在数据库中添加一个用户信息用户测试：  
![在这里插入图片描述][20200419120903146.png_pic_center]  
打开登录页，并输入用户名密码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]  
点击登录按钮后，跳转后台页面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 1]如果故意不输入用户名密码，或者输入的跟数据库中不匹配，则跳转错误页面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 2]

# 5. 小结 #

思路还是很清晰的，代码也很简单，JSP其实也挺好用哈。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]: /images/20230521/f3db8ff5063245e0ad7e108d81550311.png
[20200419120903146.png_pic_center]: /images/20230521/7b903a83820f48e3bd4284bb888938fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230521/54b5cae687f046268fc9f30119aecf7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20230521/b0afa486336443ecbcf935f4b6582a6a.png