实习实训
项目empManeger_2021
注册功能
前台实现
- 在登录界面加入注册页面的链接，通过链接打开注册界面register.jsp。
<a href="register.jsp">立即注册</a>
- register.jsp代码如下
<%--
Created by IntelliJ IDEA.
User: hp
Date: 2021/1/12
Time: 8:49
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>用户注册</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-2.1.1.js"></script>
</head>
<body>
<div align="center">
<h3>用户注册</h3>
<form action="RegisterServlet" method="post" onsubmit="return chkAll()">
<table style="width: 500px">
<tr>
<td align="right">用户名：</td>
<td><input type="text" name="uname" id="uname" onblur="chkUname()"></td>
<td width="160px"><span id="msgUname" style="color: red"></span> </td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input type="password" id="pwd" name="pwd" onblur="chkPwd()"></td>
<td><span id="msgPwd" style="color: red"></span> </td>
</tr>
<tr>
<td align="right">确认密码：</td>
<td><input type="password" id="cPwd" name="cPwd" onblur="chkSame()"></td>
<td><span id="msgCpwd" style="color: red"></span> </td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" class="btn btn-primary" value="注册">
<input type="button" class="btn" value="取消" onclick="cancel()">
</td>
<td></td>
</tr>
</table>
</form>
</div>
<script>
//注册页面的验证
//1. 验证用户名是否重复
//我们需要访问后台，大事前台不能刷新，我们不能使用传统方式刷新后台，
// 我们使用ajax技术使页面刷新
function chkUname() {
var uname = $("#uname").val();
if (uname=="" || uname ==null){
$("#msgUname").html("用户名不可为空");
return false;
}
//以ajax方式去数据库中验证用户名是否重复了
$.ajax({
url:"ExistServlet" , //要访问的后台路径
data: {
"uname":uname}, //要传递到后台的数据 参数名：参数值
type: "get", //调用后台的方式 get or post
async: false, //是否异步 true/false,异步代表前后台可以同时进行，false代表同步，同步指后台执行完成后才执行前台，页面可能有一定的卡顿
success: function (data) {
//后台执行成功后回来调用的方法，成功地从回调方法
//data代表的是服务器响应会来的一个结果
if (data=="存在"){
$("#msgUname").html("用户名已存在");
}else{
$("#msgUname").html("该用户名可以使用");
}
},
error:function () {
//服务器执行失败
alert("服务器错误");
}
});
//如果用户名可用，那么return true，否则false
if ( $("#msgUname").html()=="该用户名可以使用"){
return true;
}else{
return false;
}
}
//验证密码长度是否满足要求
function chkPwd() {
var pwd = $("#pwd").val().trim();//trim用于去除空格
if(pwd==""){
$("#msgPwd").html("密码不可为空");
return false;
}
if (pwd.length<6){
$("#msgPwd").html("密码必须六位以上");
return false;
}else{
$("#msgPwd").html("");
return true;
}
}
//2、验证两个密码输入一致
function chkSame() {
var pwd = $("#pwd").val().trim();
var cpwd = $("#cPwd").val().trim();
if (pwd != cpwd){
$("#msgCpwd").html("两次密码必须相同");
return false;
}else{
$("#msgCpwd").html("");
return true;
}
}
//密码不一致不提交
function chkAll() {
//在提交前进行一轮全部的信息校验
//如果都通过校验，返回true，否则false
if (chkUname() && chkPwd() && chkSame()){
return true;
}else{
return false;
}
}
///取消按钮
function cancel() {
window.location.href="login.jsp";
}
</script>
</body>
</html>
- 利用ajax技术通过后台ExistServlet检验用户名是否已注册，最后通过后台RegisterServlet返回注册成功信息。
后台实现
相关数据库接口与方法
此接口方法与其实现分别写在IMyUserDao和MyUserDaoImpl中
数据库接口方法 selectByName声明
/**
* 验证用户名是否存在
* @param name
* @return
*/
MyUser selectByName(String name);
数据库接口方法 addUser声明
boolean addUser(MyUser myUser);
数据库接口方法selectByName实现
@Override
public MyUser selectByName(String name) {
Connection conn = DBUtil.getConn();
MyUser myUser=null;
PreparedStatement pst=null;
ResultSet rs=null;
String sql="select * from myuser where uname = ?";
try {
pst = conn.prepareStatement(sql);
//将？设置成具体的值
pst.setString(1,name);
rs=pst.executeQuery();
if(rs.next()){
myUser=new MyUser();
myUser.setUname (rs.getString ( "uname"));
myUser.setPassword(rs.getString ("password"));
}
} catch (SQLException e) {
e.printStackTrace();
}finally {
DBUtil.closeAll(conn,pst,rs);
}
return myUser;
}
数据库接口方法 addUser实现
@Override
public boolean addUser(MyUser myUser) {
Connection conn = DBUtil.getConn();
boolean isSuccess = false;
PreparedStatement pst=null;
String sql = "insert into myuser (uname,password) values (?,?)";
try {
pst = conn.prepareStatement(sql);
pst.setString(1,myUser.getUname());
pst.setString(2,myUser.getPassword());
int num = pst.executeUpdate();
if(num > 0){
isSuccess = true;
}
} catch (SQLException e) {
e.printStackTrace();
}finally {
DBUtil.closeAll(conn,pst,null);
}
return isSuccess;
}
相关业务逻辑层声明与实现
此接口方法与其实现分别写在IMyUserService和MyUserServiceImpl中
业务逻辑isExist声明
MyUser isExist(String name);
业务逻辑addUser声明
boolean addUser(MyUser myUser);
业务逻辑isExist实现
@Override
public MyUser isExist(String name) {
return myUserDao.selectByName(name);
}
业务逻辑addUser实现
@Override
public boolean addUser(MyUser myUser) {
return myUserDao.addUser(myUser);
}
相关Servlet实现
ExistServlet
package com.wangbiao.emp.servlet;
import com.wangbiao.emp.model.MyUser;
import com.wangbiao.emp.service.IMyUserService;
import com.wangbiao.emp.service.impl.MyUserServiceImpl;
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 java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/ExistServlet")
public class ExistServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取信息
String uname=request.getParameter("uname");
//调用service层的方法,获取返回值
IMyUserService myUserService=new MyUserServiceImpl();
MyUser myUser=myUserService.isExist(uname);
//设置字符集编码
response.setContentType("text/html;charset=utf-8");
//创建输出流对象
PrintWriter ps=response.getWriter();
if(myUser==null){
//说明用户名不存在，前台返回"不存在"
ps.print("不存在");
}else{
ps.print("存在");
}
ps.flush();
ps.close();
}
}
RegisterServlet
package com.wangbiao.emp.servlet;
import com.wangbiao.emp.model.MyUser;
import com.wangbiao.emp.service.IMyUserService;
import com.wangbiao.emp.service.impl.MyUserServiceImpl;
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 java.io.IOException;
@WebServlet("/RegisterServlet")
public class RegisterServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String name = request.getParameter("uname");
String pwd = request.getParameter("pwd");
MyUser myUser = new MyUser();
myUser.setUname(name);
myUser.setPassword(pwd);
//调用service层的方法,获取返回值
IMyUserService myUserService=new MyUserServiceImpl();
boolean isSuccess = myUserService.addUser(myUser);
if(isSuccess){
request.setAttribute("msgLogin","注册成功，请登录");
request.getRequestDispatcher("login.jsp").forward(request,response);
}else{
request.getRequestDispatcher("register.jsp").forward(request,response);;
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
记住密码&cookie技术
前台实现
- 利用java获取cookie，查询是否存储了用户名字和密码信息，在login.jsp中读取cookie
<%
//利用java获取cookie，查询是否存储了用户名字和密码信息
String uname="";
String pwd="";
//调用cookie
Cookie[] cookies=request.getCookies();
if (cookies!=null){
for (Cookie cookie:cookies){
if (cookie.getName().equals("uname")){
//equals等价于==操作
//该cookiec存储了用户民信息
uname=cookie.getValue();
}
if (cookie.getName().equals("pwd")){
pwd=cookie.getValue();
}
}
}
%>
用户名：<input type="text" name="uname" value="<%=uname%>">
密码：<input type="password" name="pwd" value="<%=pwd%>">
<input type="checkbox" name="savePwd" value="yes"> 记住密码
后台实现
- 当用户名和密码输入正确时，判断前台是否选择额记住密码，将存储的cookie返回到前台。
//判断是否要记住密码
String[] chks=request.getParameterValues("savePwd");
if (chks!=null){
//记住密码操作
//使用Cookie对象记住密码,本质是记在浏览器这一端
Cookie cookie=new Cookie("uname",uname);//uname是参数名称，pwd是存储的值
//设置cookie有效期,信息在浏览器中保存的时间
cookie.setMaxAge(3600*24);//设置-1为永久保存
Cookie cookie1=new Cookie("pwd",pwd);//uname是参数名称，pwd是存储的值
cookie1.setMaxAge(3600*24);
response.addCookie(cookie);
response.addCookie(cookie1);
}else {
Cookie cookie=new Cookie("uname","");//uname是参数名称，pwd是存储的值
//设置cookie有效期,信息在浏览器中保存的时间
cookie.setMaxAge(3600*24);//设置-1为永久保存
Cookie cookie1=new Cookie("pwd","");//uname是参数名称，pwd是存储的值
cookie1.setMaxAge(3600*24);
response.addCookie(cookie);
response.addCookie(cookie1);
}