登录验证模块（留言板扩展系列一）

最新推荐文章于 2022-08-08 20:52:13 发布

糯米团仔

最新推荐文章于 2022-08-08 20:52:13 发布

阅读量1k

点赞数 1

分类专栏：项目实战文章标签： html5 css3 javascript java mysql

本文链接：https://blog.csdn.net/glutinous_Rice/article/details/117659474

版权

项目实战专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、项目介绍

登录验证模块主要是对用户的身份进行验证、提供修改密码服务、以及注册新账号服务。该模块作为前面留言板的一个扩展来写。

身份验证：验证内容包括账户是否已注册？密码是否正确？
进行的相应处理包括如下：账户不存在的情况下，打印提示“用户不存在!”，并自动返回登录验证模块主页。账户存在但密码错误的情况下，打印提示“密码错误!”，并自动返回登录验证模块主页。账户存在且密码正确的情况下，打印提示“登录成功!”，并自动跳转到留言板主页。
此外，在提交的时候，还需验证账户和密码是否为空，为空进行处理，由js脚本实现。
忘记密码：设置提交修改密码的表单；该表单在提交到服务器后，服务器进行处理的程序需要验证账户是否存在。
进行的相应处理包括如下：经服务器处理判断后，如果账户不存在，打印提示“修改失败！可能账户不存在！请重新操作！”，并自动返回修改密码的表单页。账户存在，则可以正确修改，并打印提示“修改成功！”，后自动返回登录验证模块主页。
此外，在提交的时候，还需验证账户和密码是否为空，为空进行相应，由脚本实现。
注册新账号：该功能主要提供注册账户的服务，只要填写的账户和密码不为空，并且该账户未注册，即可以正常进行注册，之后使用这个账户进行登录。

二、项目涉及技术

页面设计主要通过html、css、javaScript的一个框架jQuery、html5和CSS3来实现；后台处理数据主要通过MVC模式来实现（javabean、JDBCUtil、接口和接口实现类、servlet、jsp）。此外，还需要一个用来保存数据的数据库，我使用mysql；最后还要利用一个服务器配置软件，我选择tomcat。

前端：html+css+jQuery（不使用jQuery也可以，可以使用javaScript）+html5+css3；
后台：MVC模式；
数据库：mysql；
服务器配置：tomcat；
开发环境：PC端，win7系统，谷歌浏览器（未进行浏览器兼容性处理）。

三、具体代码

1. 针对服务器的配置

（1）对“server.xml”文件的配置

<Context path="test" docBase="d:/test" reloadable="true" workDir="d:/test/work" />

（2）建立目录结构：在d盘建立test文件夹。再在test文件夹下建立WEB-INF文件夹（这个文件夹命名一定是大写），在WEB-INF文件夹下建两个目录src和classes。最后在src文件夹下分级建gzmtu/xt/dzsw目录即可。
（3）可以先启动tomcat，进行测试，看看配置是否正确，不正确进行检查。之后可以关了tomcat，因为等一下还要建立新的目录和.java文件以及java文件的编译，这三个是需要重启tomcat的。

2. 导入jQuery文件

想要导入jQuery文件，需要在“https://jquery.com/download/”进行下载，其中有发布版和开发板。发布版是经过压缩的，会比较小，适合实际运行阶段；开发版是未经压缩的，内含有注释，相对较大，适合应用开发阶段。
我下载的是以下版本。下载好后更名为“jquery.js”，保存在“d:/test/jQuery”目录下，需要先建立“jQuery”目录。
在这里插入图片描述

3. 数据库设计

（1）使用的是前面留言板所创建的数据库guesbook。
如果没看过前面的那篇博文，也没有关系，使用“create database guestbook charset utf8”新建一个名为guestbook的数据库，之后使用“use guestbook”来引用该数据库就可以了。
（2）创建数据库表customer

create table customer(
account varchar(20) not null primary key,
pwd varchar(16) not null
);

（3）向表customer插入数据

insert into customer
values('201815250101','000101'),
('201815250102','000102'),
('201815250103','000103'),
('201815250104','000104'),
('201815250105','000105'),
('201815250106','000106'),
('201815250107','000107'),
('201815250108','000108'),
('201815250109','000109'),
('201815250110','000110'),
('201815250111','000111');

4. 前台代码设计

（1）登录模块主页

html文件：命名为login.html，保存在“d:/test/”目录下。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>注册/登录</title>
	<link rel="stylesheet" href="CSS/login.css">
	<script type="text/javascript" src="jQuery/jquery.js"></script>
	<script type="text/javascript" src="javaScript/login.js"></script>
	<script type="text/javascript" src="javaScript/remeber.js"></script>
</head>
<body>
	<div class="main">
		<header>
			<h3>账户密码登录</h3>
		</header>
		<form action="/test/getCustomer.do" method="post">
			<label for="uer">用户名：</label>
			<input type="text" id="account" name="account" required autocomplete="off" /><br />
			<label for="password">密  码：</label>
			<input type="password" id="pwd" name="pwd" required autocomplete="off" /><br />
			<input type="checkbox" id="remeber">
			<span>记住密码</span>
			<span id="remind"></span>
			<br />
			<input type="button" id="login" value="登录" />
		</form>
		<footer>
			<a href="setPwd.html">忘记密码</a>
			<a href="createAccount.html">注册新账号</a>
		</footer>
	</div>
</body>
</html>

解释：该文件主要是提供登录注册模块主页的基本内容。

css文件：命名为login.css，保存在“d:/test/CSS”目录下，需要先在“d:/test/”目录下先建立“CSS”文件夹。之后在html使用“link”标签进行引用即可。

* {
	padding:0px;
	margin:0px;
}
body {
	width:100%;
	height:100%;
	background:linear-gradient(to bottom,#ddd,#fff);
}
.main {
	width:400px;
	height:450px;
	margin:150px auto;
	border:1px solid #ddd;
	background-color:#555;
}
header {
	height:15%;
}
h3 {
	height:100%;
	line-height:70px;
	text-align:center;
	color:#dfdfdf;
	border-bottom:1px solid #ddd;
	background-color:#555;
}
form {
	margin:10px 20px;
	color:#dfdfdf;
	height:68%;
}
form label {
	display:inline-block;
	width:65px;
}
input[type="text"], input[type="password"] {
	width:280px;
	height:35px;
	margin:10px 0px;
	border-radius:5px;
	background-color:#ddd;
}	
input[type="checkbox"] {
	width:30px;
	height:20px;
	vertical-align:middle;
	display:inline-block;
	margin:20px 0px;
}
#remind {
	position:relative;
	left:160px;
}
input[type="button"] {
	width:350px;
	height:50px;
	margin:50px auto 20px;
	border:1px solid #ffcc02;
	border-radius:5px;
	background-color:#ffcc02;
}
input[type="button"]:hover {
	border:1px solid #ddd;
	background-color:#ddd;
}
footer {
	height:50px;
	line-height:50px;
	color:#dfdfdf;
}
footer a{
	color:#ddd;
	text-decoration:none;
}
footer a:hover {
	color:#fff;
}
footer a:nth-child(1) {
	position:relative;
	left:30px;
	bottom:0px;
}
footer a:nth-child(2) {
	position:relative;
	right:-220px;
	bottom:0px;
}

解释：该文件主要是让登录注册模块主页变得更好看。

js脚本：登录注册模块主页的脚本有两个，login.js和remeber.js。

$(document).ready(function(){
	//设置文本框和密码框聚焦实焦背景色
	$('input[type="text"],input[type="password"]').focus(function(e){
		$(this).css('backgroundColor','white');
	});
	$('input[type="text"],input[type="password"]').blur(function(e){
		$(this).css('backgroundColor','#ddd');
	});
	$('input[type="button"]').click(function(e){
		//检验是否为空
		if($('#account').val()==''){
			alert('用户名不能为空！');
			return false;
		}
		if($('#pwd').val()==''){
			alert('密码不能为空！');
			return false;
		}
		$('form').submit();
		//为记住密码做准备
		var account=$('#account').val();
		var pwd=$('#pwd').val();
		if($('#remeber').is(':checked')){
			localStorage.setItem('account',account);
			localStorage.setItem('pwd',pwd);
			localStorage.setItem('checkbox',true);
		}else{
			localStorage.removeItem('account');
			localStorage.removeItem('pwd');
			localStorage.removeItem('checkbox');
		}
	});
});

解释：login.js主要是用来在表单控件聚焦和失焦时设置样式以达到更好的用户体验；在表单提交时检验文本框和密码框是否为空；在表单提交时，判断是否选中“复选框”，如果选中，获取文本框和密码框的值保存到本地存储。如果未选中，清除相应的本地存储。

remeber.js：保存至“d:/test/javaScript”目录下，之后在登录注册模块主页login.html使用“script”标签进行引用即可。

$(document).ready(function(){
	//获取本地存储的值
	var account=localStorage.getItem('account');
	var pwd=localStorage.getItem('pwd');
	var checkboxValue=localStorage.getItem('checkbox');
	//不为空意味着前面选择了“记住密码”
	if(account){
		$('input[type="text"]').val(account);
	}
	if(pwd){
		$('input[type="password"]').val(pwd);
	}
	if(checkboxValue){
		$('input[type="checkbox"]').attr('checked',true);
	}
});

解释： remeber.js主要是用来获取本地存储的值，如果能够获取到账户、密码和复选框的取值，意味着前面选择了“记住密码”，那么直接将本地存储的值赋值给文本框、密码框和复选框。

（2）修改密码表单页

html文件：命名为 setPwd.html，保存到“d:/test/”目录下。

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>修改密码</title>
	<link rel="stylesheet" href="CSS/setPwd.css">
	<script type="text/javascript" src="jQuery/jquery.js"></script>
	<script type="text/javascript" src="javaScript/setPwd.js"></script>
</head>
<body>
	<div class="main">
		<header>
			<h3>修改密码</h3>
		</header>
	
		<form action="/test/setPwd.do" method="post">
			<label for="uer">用户名：</label>
			<input type="text" id="account" name="account" required autocomplete="off" /><br />
			<label for="password">密  码：</label>
			<input type="password" id="pwd" name="pwd" required autocomplete="off" /><br />
			<input type="button" id="modify" value="确认修改" />
		</form>
	</div>
</body>
</html>

解释：该文件主要提供修改密码的填写表单。

css文件：命名为setPwd.css，保存到“d:/test/CSS/”目录下，之后在setPwd.html页面中使用“link”标签进行引用即可。

* {
	padding:0px;
	margin:0px;
}
body {
	width:100%;
	height:100%;
	background:linear-gradient(to top,#dadada,#d6d6d6);
}
.main {
	width:450px;
	height:350px;
	margin:150px auto;
	border:1px solid #ddd;
	background-color:#555;
}
header {
	height:20%;
}
h3 {
	height:100%;
	line-height:70px;
	text-align:center;
	color:#dfdfdf;
	border-bottom:1px solid #ddd;
	background-color:#555;
}
form {
	margin:10px 20px;
	color:#dfdfdf;
	height:68%;
}
form label {
	display:inline-block;
	width:65px;
}
input[type="text"], input[type="password"] {
	width:330px;
	height:35px;
	margin:10px 0px;
	border-radius:5px;
	background-color:#ddd;
}	
input[type="button"] {
	width:400px;
	height:50px;
	margin:50px auto 20px;
	border:1px solid #ffcc02;
	border-radius:5px;
	background-color:#ffcc02;
}
input[type="button"]:hover {
	border:1px solid #ddd;
	background-color:#ddd;
}

解释：该文件主要是使得修改密码表单页变得好看。

js脚本：命名为setPwd.js，保存到“d:/test/javaScript/”目录下，之后在修改密码表单页使用“script”标签进行引用即可。

$(document).ready(function(){
	//设置文本框和密码框聚焦实焦背景色
	$('input[type="text"],input[type="password"]').focus(function(e){
		$(this).css('backgroundColor','white');
	});
	$('input[type="text"],input[type="password"]').blur(function(e){
		$(this).css('backgroundColor','#ddd');
	});
	$('input[type="button"]').click(function(e){
		//检验是否为空
		if($('#account').val()==''){
			alert('用户名不能为空！');
			return false;
		}
		if($('#pwd').val()==''){
			alert('密码不能为空！');
			return false;
		}
		$('form').submit();
	});
});

解释：该文件主要是用来在表单控件聚焦和失焦时设置样式以达到更好的用户体验；在表单提交时检验文本框和密码框是否为空。

（3）注册新账号表单页

html文件：命名为createAccount.html，保存在“d:/test/”目录下。

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>创建新账户</title>
	<link rel="stylesheet" href="CSS/createAccount.css">
	<script type="text/javascript" src="jQuery/jquery.js"></script>
	<script type="text/javascript" src="javaScript/createAccount.js"></script>
</head>
<body>
	<div class="main">
		<header>
			<h3>创建新账户</h3>
		</header>
	
		<form action="/test/createAccount.do" method="post">
			<label for="uer">用户名：</label>
			<input type="text" id="account" name="account" required autocomplete="off" /><br />
			<label for="password">密  码：</label>
			<input type="password" id="pwd" name="pwd" required autocomplete="off" /><br />
			<input type="button" id="modify" value="确定" />
		</form>
	</div>
</body>
</html>

解释：该文件主要提供注册填写表单。

css文件：命名为createAccount.css，保存在“d:/test/CSS/”目录下，并在createAccount.html中使用“link”标签进行引用。

* {
	padding:0px;
	margin:0px;
}
body {
	width:100%;
	height:100%;
	background:linear-gradient(to top,#dadada,#d6d6d6);
}
.main {
	width:450px;
	height:350px;
	margin:150px auto;
	border:1px solid #ddd;
	background-color:#555;
}
header {
	height:20%;
}
h3 {
	height:100%;
	line-height:70px;
	text-align:center;
	color:#dfdfdf;
	border-bottom:1px solid #ddd;
	background-color:#555;
}
form {
	margin:10px 20px;
	color:#dfdfdf;
	height:68%;
}
form label {
	display:inline-block;
	width:65px;
}
input[type="text"], input[type="password"] {
	width:330px;
	height:35px;
	margin:10px 0px;
	border-radius:5px;
	background-color:#ddd;
}	
input[type="button"] {
	width:400px;
	height:50px;
	margin:50px auto 20px;
	border:1px solid #ffcc02;
	border-radius:5px;
	background-color:#ffcc02;
}
input[type="button"]:hover {
	border:1px solid #ddd;
	background-color:#ddd;
}

解释：该文件主要是修饰注册表单页，让它变得更好看。

js脚本：命名为createAccount.js，保存在“d:/test/javaScript/”目录下，并只createAccount.html中使用“script”进行引用。

$(document).ready(function(){
	//设置文本框和密码框聚焦实焦背景色
	$('input[type="text"],input[type="password"]').focus(function(e){
		$(this).css('backgroundColor','white');
	});
	$('input[type="text"],input[type="password"]').blur(function(e){
		$(this).css('backgroundColor','#ddd');
	});
	$('input[type="button"]').click(function(e){
		//检验是否为空
		if($('#account').val()==''){
			alert('用户名不能为空！');
			return false;
		}
		if($('#pwd').val()==''){
			alert('密码不能为空！');
			return false;
		}
		$('form').submit();
	});
});

解释：该文件主要是用来在表单控件聚焦和失焦时设置样式以达到更好的用户体验；在表单提交时检验文本框和密码框是否为空。

补充：写到这里，我意识到了，其实可以将“设置文本框和密码框聚焦实焦背景色”作为一个脚本，“检验是否为空”设置为一个脚本，之后可以在三个html文件中进行引用…失策了。

5. 后台设计

（1）前期部署：

javabean：命名为Customer.java，以utf-8编码进行保存到“d:/test/WEB-INF/src/gzmtu/xt/dzsw/entity”目录，需要先在“d:/test/WEB-INF/src/gzmtu/xt/dzsw/”目录下建“entity”文件夹。

package gzmtu.xt.dzsw.entity;
public class Customer{
	private String account;
	private String pwd;
	public Customer(){}
	public void setAccount(String account){
		this.account=account;
	}
	public String getAccount(){
		return account;
	}
	public void setPwd(String pwd){
		this.pwd=pwd;
	}
	public String getPwd(){
		return pwd;
	}
}

解释：该javabean涉及一个类Customer。类有两个私有属性，分别是字符串型属性account和pwd；类有一个公开的无参构造函数；类有对应两个私有属性的公开存取方法。

JDBCUtil：命名为JDBCUtil.java，以utf-8保存到“d:/test/WEB-INF/src/gzmtu/xt/dzsw/utils”目录下，需要先在“d:/test/WEB-INF/src/gzmtu/xt/dzsw/”目录下建“utils”文件夹。

package gzmtu.xt.dzsw.utils;
import java.sql.*;
public class JDBCUtil{
	public static final String url="jdbc:mysql://localhost:3306/guestbook?characterEncoding=utf-8";
	public static final String user="root";
	public static final String password="85578649";
	public static Connection getConnection(){
		try{
			return DriverManager.getConnection(url,user,password);
		}catch(SQLException e){
			e.printStackTrace();
			return null;
		}
	}
	public static void close(PreparedStatement pstmt,Connection conn){
		if(pstmt!=null){
			try{
				pstmt.close();
			}catch(SQLException e){
				e.printStackTrace();
			}
		}
		if(conn!=null){
			try{
				conn.close();
			}catch(SQLException e){
				e.printStackTrace();
			}
		}
	}
	public static void close(ResultSet rs,PreparedStatement pstmt,Connection conn){
		if(rs!=null){
			try{
				rs.close();
			}catch(SQLException e){
				e.printStackTrace();
			}
			close(pstmt,conn);
		}
	}
}

解释：该文件主要用于连接数据库和关闭数据库连接。

接口：命名为ICustomerDAO.java，以“utf-8”编码保存到“d:/test/WEB-INF/src/gzmtu/xt/dzsw/dao”目录下，需要实现在“d:/test/WEB-INF/src/gzmtu/xt/dzsw/”目录下建“dao”文件夹。

package gzmtu.xt.dzsw.dao;
import gzmtu.xt.dzsw.entity.Customer;
public interface ICustomerDAO{
	boolean insertCustomer(Customer customer);
	boolean updateCustomer(Customer customer);
	Customer getCustomer(String account);
}

解释：该文件主要定义了对数据库进行操作的函数，包括创建新账户的“插入函数”、修改密码的“更新函数”、以及验证账户密码是否正确的“数据获取函数”。

接口实现类：命名为CustomerDAOImpl.java，以utf-8编码保存在“d:/test/WEB-INF/src/gzmtu/xt/dzsw/dao/impl”目录下，需要先在“d:/test/WEB-INF/src/gzmtu/xt/dzsw/dao/”目录下建“impl”文件夹。

package gzmtu.xt.dzsw.dao.impl;
import java.sql.*;
import gzmtu.xt.dzsw.entity.Customer;
import gzmtu.xt.dzsw.utils.JDBCUtil;
import gzmtu.xt.dzsw.dao.ICustomerDAO;
public class CustomerDAOImpl implements ICustomerDAO{
	public boolean insertCustomer(Customer customer){
		Connection conn=null;
		PreparedStatement pstmt=null;
		boolean result=false;
		String sql="insert into customer values(?,?)";
		try{
			conn=JDBCUtil.getConnection();
			pstmt=conn.prepareStatement(sql);
			pstmt.setString(1,customer.getAccount());
			pstmt.setString(2,customer.getPwd());
			result=pstmt.executeUpdate()==1?true:false;
		}catch(SQLException e){
			e.printStackTrace();
		}finally{
			JDBCUtil.close(pstmt,conn);
		}
		return result;
	}
	public boolean updateCustomer(Customer customer){
		Connection conn=null;
		PreparedStatement pstmt=null;
		boolean result=false;
		String account=customer.getAccount();
		String pwd=customer.getPwd();
		String sql="update customer set pwd=? where account=?";
		try{
			conn=JDBCUtil.getConnection();
			pstmt=conn.prepareStatement(sql);
			pstmt.setString(1,pwd);
			pstmt.setString(2,account);
			int row=pstmt.executeUpdate();
			result=row==1?true:false;
		}catch(SQLException e){
			e.printStackTrace();
		}finally{
			JDBCUtil.close(pstmt,conn);
		}
		return result;
	}
	public Customer getCustomer(String account){
		Connection conn=null;
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		Customer customer=null;
		String sql="select * from customer where account=?";
		try{
			conn=JDBCUtil.getConnection();
			pstmt=conn.prepareStatement(sql);
			pstmt.setString(1,account);
			rs=pstmt.executeQuery();
			if(rs.next()){
				customer=new Customer();
				customer.setAccount(rs.getString(1));
				customer.setPwd(rs.getString(2));
			}
		}catch(SQLException e){
			customer=null;
			e.printStackTrace();
		}finally{
			JDBCUtil.close(rs,pstmt,conn);
		}
		return customer;
	}
}

解释：该文件主要实现接口定义的方法。

（2）验证账户密码是否正确

servlet文件：命名为ViewGetCustomer.java，保存在“d:/test/WEB-INF/gzmtu/xt/dzsw/servlet/”目录下，需要先建立“servlet”文件夹。

package gzmtu.xt.dzsw.servlet;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import gzmtu.xt.dzsw.entity.Customer;
import gzmtu.xt.dzsw.dao.ICustomerDAO;
import gzmtu.xt.dzsw.dao.impl.CustomerDAOImpl;
@WebServlet(urlPatterns="/getCustomer.do")
public class ViewGetCustomer extends HttpServlet{
	public void service(HttpServletRequest request,HttpServletResponse response) throws ServletException,java.io.IOException{
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		String account=request.getParameter("account");
		String pwd=request.getParameter("pwd");
		ICustomerDAO dao=new CustomerDAOImpl();
		Customer customer=dao.getCustomer(account);
		//account和pwd是用户登录时传送过来的
		request.setAttribute("account",account);
		request.setAttribute("pwd",pwd);
		//customer是从数据库获取的
		request.setAttribute("customer",customer);
		request.getRequestDispatcher("/judgeAccount.jsp").forward(request,response);
	}
}

解释：该文件主要是对从登陆注册模块主页传递过来的数据先进行处理，包括根据传递过来的数据调用getCustomer()函数从数据库获取相应的账户密码信息并保存到customer对象中，之后将该customer对象连同表单传递过来的账户、密码信息一起转发到jsp，交由jsp来验证和打印。

jsp文件：命名为judgeAccount.jsp，保存到“d:/test/”目录下。

<%@ page contentType="text/html;charset=utf-8" %>
<%@ page import="gzmtu.xt.dzsw.entity.Customer" %>

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body> 
<%
	String account=(String)request.getAttribute("account");
	String pwd=(String)request.getAttribute("pwd");
	Customer customer=(Customer)request.getAttribute("customer");
	if(customer!=null){
		if(account.equals(customer.getAccount())&&pwd.equals(customer.getPwd())){
			out.write("<script>alert('登录成功!');window.location.href='http://localhost:8080/test/index.html';</script>");
		}else{
			out.write("<script>alert('密码错误!');window.location.href='http://localhost:8080/test/login.html';</script>");
		}
	}else{
		out.write("<script>alert('用户不存在!');window.location.href='http://localhost:8080/test/login.html';</script>");
	}
%>
</body>
</html>

解释：该文件主要是通过ViewGetCustomer.java传递过来的数据进行判断，进而验证账户信息。这里会出现三种情况：一是表单填写的账户密码都是正确的，那么就打印“登录成功！”并跳转到留言板主页；二是表单填写的账户是正确的，但密码错误，那么就打印“密码错误！”并返回登录注册模块主页；三是账户密码都是错误的，那么就打印“用户不存在！”并返回登录注册模块主页。
需要注意，前面两种情况，customer对象不为空，所以可以调用customer对象的getAccount()方法和getPwd()方法。但是第三种情况的customer是null，因为从数据库查询不到数据，这个时候null是不可以调用对象的存取方法的，会报错。

（3）修改密码

servlet文件：命名为“ViewSetPwd.java”，保存在“d:/test/WEB-INF/gzmtu/xt/dzsw/servlet/”目录下。

package gzmtu.xt.dzsw.servlet;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import gzmtu.xt.dzsw.entity.Customer;
import gzmtu.xt.dzsw.dao.ICustomerDAO;
import gzmtu.xt.dzsw.dao.impl.CustomerDAOImpl;
@WebServlet(urlPatterns="/setPwd.do")
public class ViewSetPwd extends HttpServlet{
	public void service(HttpServletRequest request,HttpServletResponse response) throws ServletException,java.io.IOException{
		request.setCharacterEncoding("utf-8");
		//获取修改密码表单传递过来的数据
		String account=request.getParameter("account");
		String pwd=request.getParameter("pwd");
		//保存到customer对象中
		Customer customer=new Customer();
		customer.setAccount(account);
		customer.setPwd(pwd);
		//创建一个dao对象去调用updateCustomer()方法，以更新数据库数据
		ICustomerDAO dao=new CustomerDAOImpl();
		boolean result=dao.updateCustomer(customer);
		//将更新结果转发到jsp
		request.setAttribute("result",result);
		request.getRequestDispatcher("/setPwdResult.jsp").forward(request,response);
	}
}

解释：该文件主要是对修改密码表单传递到服务器的数据进行处理，借助该数据对数据库记录进行修改更新，并将更新结果（成功or失败）转发给jsp。

jsp文件：命名为setPwdResult.jsp，保存到“d:/test/”目录下。

<%@ page contentType="text/html;charset=utf-8" %>
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<%
		boolean result=(boolean)request.getAttribute("result");
		if(result){
			out.write("<script>alert('修改成功!');window.location.href='http://localhost:8080/test/login.html';</script>");
		}else{
			out.write("<script>alert('修改失败!可能账户不存在!请重新操作!');window.location.href='http://localhost:8080/test/setPwd.html';</script>");
		}
	%>
</body>
</html>

解释：该文件主要是获取ViewSetPwd.java传递过来的数据处理结果，根据结果进行处理，打印提示信息和跳转页面。ViewSetPwd.java传递过来的结果只有两种，true或者false。如果结果是true，意味着修改成功了，那么打印“修改成功！”并跳转到登录验证模块主页。如果结果是false，意味着修改失败，那只能是因为修改密码表单提交过来的账户只数据库中不存在，那么打印“修改失败!可能账户不存在!请重新操作!”并跳转到修改密码表单页。

（4）创建新账户

servlet文件：命名为createAccount.java，保存在“d:/test/WEB-INF/gzmtu/xt/dzsw/servlet/”目录下。

package gzmtu.xt.dzsw.servlet;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import gzmtu.xt.dzsw.entity.Customer;
import gzmtu.xt.dzsw.dao.ICustomerDAO;
import gzmtu.xt.dzsw.dao.impl.CustomerDAOImpl;
@WebServlet(urlPatterns="/createAccount.do")
public class ViewCreateAccount extends HttpServlet{
	public void service(HttpServletRequest request,HttpServletResponse response) throws ServletException,java.io.IOException{
		//设置字符编码
		request.setCharacterEncoding("utf-8");
		//获取注册表单传递到服务器的数据
		String account=request.getParameter("account");
		String pwd=request.getParameter("pwd");
		//创建一个customer对象保存账户、密码这两个数据
		Customer customer=new Customer();
		customer.setAccount(account);
		customer.setPwd(pwd);
		//创建一个dao对象，调用insertCustomer()方法进行将数据插入到数据的操作
		ICustomerDAO dao=new CustomerDAOImpl();
		boolean result=dao.insertCustomer(customer);
		//将插入数据的结果转发到jsp
		request.setAttribute("result",result);
		request.getRequestDispatcher("/createAccountResult.jsp").forward(request,response);
	}
}

解释：该文件主要是用来获取创建账户表单提交过来的数据，插入到数据库中，并将插入结果转发给jsp文件的。

jsp文件：命名为“createAccount.jsp”，保存到“d:/test/”目录下。

<%@ page contentType="text/html;charset=utf-8" %>
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<%
		boolean result=(boolean)request.getAttribute("result");
		if(result){
			out.write("<script>alert('创建成功!');window.location.href='http://localhost:8080/test/login.html';</script>");
		}else{
			out.write("<script>alert('未知错误!可能该账户已经存在!创建失败!');window.location.href='http://localhost:8080/test/createAccount.html';</script>");
		}
	%>
</body>
</html>

解释：该文件主要是对createAccount.java传递过来的结果进行相应的处理，打印提示信息和跳转页面。处理结果有两种，true和false。如果是true，意味着数据插入成功，那么打印“创建成功！”并跳转到登录模块主页。如果是false，那么表示插入数据失败，这个时候可能是违反了数据库的约束，比如主键唯一性约束，那么就打印“未知错误！创建失败!”，并跳转到注册表单页。

四、笔记

复选框设置了大小后，要使得后面的文字和框框位于同一水平线，需要给复选框加上下面的样式。

vertical-align:middle;

本地存储：localStorage
（1）设置本地存储
方法一：localStorage.setItem(“key”,“value”);
方法二：localStorage.key=value;
（2）获取本地存储
方法一：localStorage.getItem(“key”);
方法二：localStorage.key;

五、登录注册模块（含留言板）最终文件

百度网盘：
链接：https://pan.baidu.com/s/1MU3uB1QMMUIaa73hU7NRew
提取码：1234

六、补充说明

这篇博客的点子来自课堂老师布置的上机实验。
如果有人转载，请告知我一下，并备注出处。如有转载但未说明或者未备注出处的朋友，一经发现，会追究责任的哦。

糯米团仔

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
登录验证模块（留言板扩展系列一）

登录验证模块（留言板扩展系列一）一、项目介绍登录验证模块主要是对用户的身份进行验证、提供修改密码服务、以及注册新账号服务。该模块作为前面留言板的一个扩展来写。身份验证：验证内容包括账户是否已注册？密码是否正确？进行的相应处理包括如下：账户不存在的情况下，打印提示“用户不存在!”，并自动返回登录验证模块主页。账户存在但密码错误的情况下，打印提示“密码错误!”，并自动返回登录验证模块主页。账户存在且密码正确的情况下，打印提示“登录成功!”，并自动跳转到留言板主页。此外，在提交的时候，还需验证账户和密
复制链接

扫一扫