WEB：注册登录功能与Jquery唯一性验证

版权声明：版权所有@万星明 https://blog.csdn.net/qq_19533277/article/details/84196467

前面是后台代码，分别为Bean用户实体类，模拟DB，Dao层类，Service层类，Servlet类（登录、注册、注销）。还有两个过滤器（字符编码和拦截个人资料）没写上去，再写就太多了。当然，这是个练手之作，望大佬不吝指教。
有问题的话，请在评论留言。

用户实体类

package bean;

public class Bean_User {

	private String name;
	private String password;
	private String email;
	private String loves;
	private String url;
	
	public Bean_User() {}
	public Bean_User(String name, String password, String email, String loves, String url) {
		super();
		this.name = name;
		this.password = password;
		this.email = email;
		this.loves = loves;
		this.url = url;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getLoves() {
		return loves;
	}
	public void setLoves(String loves) {
		this.loves = loves;
	}
	public String getUrl() {
		return url;
	}
	public void setUrl(String url) {
		this.url = url;
	}
	

}

DB模拟数据库类

package db;

import java.util.ArrayList;

import bean.Bean_User;

public class DB_UserList {

	public static ArrayList<Bean_User> userList = new ArrayList<Bean_User>();
	static {
		Bean_User admin = new Bean_User("admin", "admin", "[email protected]","吃，喝","Files//我.jpg");
		userList.add(admin);
	}
	
}

Dao层操作数据类

package dao;

import bean.Bean_User;
import db.DB_UserList;

public class Dao_User {
	
	/**
	 * 查询用户
	 */
	public Bean_User find(String name,String password) {
		
		for (int i=0;i<DB_UserList.userList.size(); i++) {
			if(name.equals(DB_UserList.userList.get(i).getName())) {
				if(password.equals(DB_UserList.userList.get(i).getPassword())) {
					return DB_UserList.userList.get(i);
				}
			}
		}
		return null;
	}
	
	/**
	 * 添加用户
	 */
	public void add(Bean_User user) {
		DB_UserList.userList.add(user);
	}
	
	
	/**
	 * 	查询是否用户名是否注册
	 */
	public boolean judgeName(String name) {
		
		boolean flag = true;
		for (int i=0;i<DB_UserList.userList.size();i++) {
			if(name.equals(DB_UserList.userList.get(i).getName())) {
				flag = false;
			}
		}
		return flag;
	}
	/**
	 * 	查询是否邮箱是否注册
	 */
	public boolean judgeMail(String mail) {
		
		boolean flag = true;
		for (int i=0;i<DB_UserList.userList.size();i++) {
			if(mail.equals(DB_UserList.userList.get(i).getEmail())) {
				flag = false;
			}
		}
		return flag;
	}
	
	
}

Service业务类（本来这个类可以不要的，但是为了框架完整，还是敲上去了）

package service;

import bean.Bean_User;
import dao.Dao_User;

public class Service_User {
	
	Dao_User userDao = new Dao_User();
	
	/**
	 * 查询用户
	 */
	public Bean_User find(String name,String password) {
		return userDao.find(name, password);
	}
	
	/**
	 * 添加用户
	 */
	public void add(Bean_User user) {
		userDao.add(user);
	}
	
	/**
	 * 查询用户名是否注册
	 */
	public boolean judgeName(String name) {
		return userDao.judgeName(name);
	}
	
	/**
	 * 查询邮箱是否注册
	 */
	public boolean judgeMail(String mail) {
		return userDao.judgeMail(mail);
	}
	
	
}

Servlet 注册功能(Regist)

package servlet;

import java.io.File;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import bean.Bean_User;
import service.Service_User;




@WebServlet("/RegistServlet")
public class RegistServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
    
	Service_User userService = new Service_User();
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		
		judgeForm(request,response);
		
		
		subForm(request);
		response.setHeader("refresh", "1;url=HomePage.jsp");
		
	}
	public void judgeForm(HttpServletRequest request, HttpServletResponse response) throws IOException {
		String action = request.getParameter("action");
		System.out.println(action);
		if("VerName".equals(action)) {
			String name = request.getParameter("name");
			System.out.println(name);
			boolean flag = userService.judgeName(name);
			if(flag) {
				response.getWriter().write("0");
			}else {
				response.getWriter().write("1");
			}
			
		}else if("VerMail".equals(action)) {
			String mail = request.getParameter("mail");
			System.out.println(mail);
			boolean flag = userService.judgeMail(mail);
			if(flag) {
				response.getWriter().write("0");
			}else {
				response.getWriter().write("1");
			}
		}
		
		
	
		
		
	   
		
	}
	
	
	
	
	
	public void subForm(HttpServletRequest request) {
		//创建解析器工厂
		DiskFileItemFactory factory = new DiskFileItemFactory();
		//创建解析器对象
		ServletFileUpload parserObj = new ServletFileUpload(factory);
		
		//创建一个Bean_User对象存放内容
		Bean_User user = new Bean_User();
		
		//判断上传的字符编码是否是字节上传
		if(ServletFileUpload.isMultipartContent(request)) {
			//解析表单并接收解析结果
			try {
				List<FileItem> fitems=parserObj.parseRequest(request);
				//遍历解析的表单元素
				for (FileItem fitem : fitems) {
					try {
						saveForm(user, fitem, request);
					} catch (Exception e) {
						e.printStackTrace();
					}
				}
			} catch (FileUploadException e) {
				e.printStackTrace();
			}
		}
		//将新建的Bean_User对象存入集合中
		userService.add(user);
	}
	
	
	//向新建实体类对象中存储表单元素
	public void saveForm(Bean_User user,FileItem fitem,HttpServletRequest request) throws Exception {
		
		if(fitem.isFormField()) {//判断是否是普通表单
			String fitemName = fitem.getFieldName();//得到普通表单的name属性
			
			if("name".equals(fitemName)) {
				String value=fitem.getString("utf-8");
				System.out.println(value);
				user.setName(value);
			}else if("mail".equals(fitemName)) {
				String value=fitem.getString("utf-8");
				System.out.println(value);
				user.setEmail(value);
			}else if("password".equals(fitemName)) {
				String value=fitem.getString("utf-8");
				System.out.println(value);
				user.setPassword(value);
			}else if("hobby".equals(fitemName)) {
				String value = fitem.getString("utf-8");
				System.out.println(value);
				if(user.getLoves()==null) {
					user.setLoves(value);
				}else {
					user.setLoves(user.getLoves()+","+value);
				}
			}
		}else {//是文件表单
			String fileName=fitem.getName();//获取文件名
			String path=request.getServletContext().getRealPath("Files/");//获取上传文件路径
			fitem.write(new File(path, fileName));//上传文件
			user.setUrl("Files/"+fileName);
		}	
	}
	
	
	

}

Servlet 登录功能（Login）

package servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import service.Service_User;


@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
    Service_User userService = new Service_User();   
  
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
				//获得用户名和密码
				String name = request.getParameter("name");
				String password = request.getParameter("password");
				
				//检查用户名和密码
				if(userService.find(name, password)!=null) {
					//登录成功
					//将用户状态user对象存入session域
					request.getSession().setAttribute("user",userService.find(name, password));
					
					//发送自动登录的cookie
					String autoLG = request.getParameter("autoLG");
					if(autoLG!=null) {
						Cookie cookie = new Cookie("autoLG",name+"-"+password);
						cookie.setMaxAge(Integer.parseInt(autoLG));
						cookie.setPath(request.getContextPath());
						response.addCookie(cookie);
					}
					
					//跳转至首页
					response.sendRedirect(request.getContextPath()+"/HomePage.jsp");
					
				}else {
					request.setAttribute("errerMsg","用户名或密码错误");
					request.getRequestDispatcher("/Login.jsp").forward(request, response);
				}
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		doGet(request, response);
	}

}

Servlet 注销功能（Logout）

package servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("/LogoutServlet")
public class LogoutServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
  
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
				//用户注销
				request.getSession().removeAttribute("user");
				//从客户端删除自动登录的cookie
				Cookie cookie = new Cookie("autoLG","msg");
				cookie.setPath(request.getContextPath());
				cookie.setMaxAge(0);
				response.addCookie(cookie);
				response.sendRedirect(request.getContextPath()+"/HomePage.jsp");
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

从这开始，下面是前端的代码，分别是主页，登录，注册，个人资料四个页面，在使用的时候，需要在WebContent下建Files文件夹，用来存储上传的头像图片，并且需要导入Jquery文件，鄙人用的是3.3.1js，其他的也行的。

HomePage 主页面，欢迎界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>

	<br>
	<h3 align="center">欢迎来到召唤师峡谷</h3>
	<br>
	<br>
	
	<c:choose>
		<c:when test="${sessionScope.user==null}">
			<a href="${pageContext.request.contextPath}/Login.jsp">用户登录</a>
			<a href="${pageContext.request.contextPath}/Regist.jsp">用户注册</a>
		</c:when>
		<c:otherwise>
			欢迎你，${sessionScope.user.name}!
			<a href="${pageContext.request.contextPath}/PersonData.jsp">个人资料</a>
			<a href="${pageContext.request.contextPath}/LogoutServlet">注销</a>
		</c:otherwise>
	</c:choose>
	<hr>

</body>
</html>

注册页面（Regist）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<script type="text/javascript" src="JQ_JS/jquery-3.3.1.js"></script>
<script type="text/javascript">

$(function(){
	
	

	$("#name").blur(function() {
		var name = $("#name").val();
		if(name==""){
			$("#InspectName").html("不能为空 ");
		}else{
			$.ajax({
				   type: "post",
				   url: "RegistServlet?action=VerName",
				   data: "name="+$("#name").val(),//将表单系列化，将表单元素整体上传
				   async:true,
				   success: function(data){
					   if(data=="1"){
							$("#InspectName").html("用户名已注册");
						}else{
							$("#InspectName").html("");
						}
				   }
			});
		}
	});
	
	$("#mail").blur(function() {
		var mail = $("#mail").val();
		if(mail==""){
			$("#InspectMail").html("不能为空 ");
		}else{
			$.ajax({
				   type: "post",
				   url: "RegistServlet?action=VerMail",
				   data: "mail="+$("#mail").val(),//将表单系列化，将表单元素整体上传
				   async:true,
				   success: function(data){
					   if(data=="1"){
							$("#InspectMail").html("邮箱已注册 ");
						}else{
							$("#InspectMail").html("");
						}
				   }
			});
		}
	});
	
	
	
	
	
});
	
</script>
</head>

<body style="text-align: center;">
	<form action="${pageContext.request.contextPath}/RegistServlet" method="post" enctype="multipart/form-data">
		<table align="center" border="1" cellspacing="0">
			<tr>
				<td>头像：</td>
				<td colspan="2"><input type="file" name="myHead"></td>
			</tr>
			
			<tr>
				<td>用户名：</td>
				<td><input type="text" name="name" id="name" /></td>
				<td id="InspectName" style="color:red;"></td>
			</tr>
			
			<tr>
				<td>邮箱：</td>
				<td><input type="text" name="mail" id="mail" onblur="InspectMail()"></td>
				<td id="InspectMail" style="color:red;"></td>
			</tr>
			
			<tr>
				<td>密码：</td>
				<td colspan="2"><input type="password" name="password"></td>
			</tr>
		
			<tr>
				<td>爱好：</td>
				<td colspan="2">
					<input type="checkbox" name="hobby" value="吃">吃
					<input type="checkbox" name="hobby" value="喝">喝
					<input type="checkbox" name="hobby" value="拉">拉
					<input type="checkbox" name="hobby" value="撒">撒
					<input type="checkbox" name="hobby" value="睡">睡
				</td>
			</tr>
			<tr>
				<td colspan="3">
					<input type="submit" value="提交">
					<input type="reset" value="重置">
				</td>
			</tr>				
		</table>
	</form>
</body>
</html>

登录页面（Login）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body style="text-align: center;">
	<form action="${pageContext.request.contextPath}/LoginServlet" method="post">
		<table border="1" width="600px" cellspacing="0" align="center">
		
			<tr>
				<td>用户名：</td>
				<td><input type="text" name="name"></td>
			</tr>
			
			<tr>
				<td>密&nbsp;码：</td>
				<td><input type="password" name="password"></td>
			</tr>
			
			<tr>
				<td colspan="2">
					<input type="submit" value="登录">
					<input type="reset" value="重置">
				</td>
			</tr>
			
		</table>		
	</form>
</body>
</html>

个人资料展示页面（PersonData）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人资料</title>
</head>
<body style="text-align: center;">
	<table align="center" border="1" cellspacing="0">
			<tr>
				<td>头像：</td>
				<td colspan="2">
				<a href="${user.url}" download=""><img src="${user.url}" name="HeadPhoto" height="100" width="90"></a>
				</td>
			</tr>
			
			<tr>
				<td>用户名：</td>
				<td>${user.name}</td>
			</tr>
			
			<tr>
				<td>邮箱：</td>
				<td>${user.email}</td>
			</tr>
			
			<tr>
				<td>爱好：</td>
				<td>${user.loves}</td>
			</tr>

			<tr>
				<td colspan="2">
					<input type="button" onclick="window.location.href='HomePage.jsp'" value="返回">
				</td>
			</tr>				
		</table>
</body>
</html>