一、引言
本文使用ajax+html来完成注册功能,本文已将源代码放到了码云上,有需要的可以自行查看。登录功能在这儿—>https://editor.csdn.net/md/?articleId=122168322
如果下边代码出现粘贴问题或者其他问题可以来码云看全部的代码。
网址:https://gitee.com/rabbit-a/learning-summary.git
先放代码后说明
二、正文
注册页面
注册功能(后台)
package cn.itcast.film.web.servlet;
import cn.itcast.film.domain.ResultInfo;
import cn.itcast.film.domain.User;
import cn.itcast.film.service.UserService;
import cn.itcast.film.service.impl.UserServiceImpl;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.apache.commons.beanutils.BeanUtils;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;
@WebServlet("/RegistUserServlet")
public class RegistUserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//验证码校验
String check = request.getParameter("checkcode");
//从session中获取验证码
HttpSession session = request.getSession();
String checkcode_server = (String) session.getAttribute("CHECKCODE_SERVER");
session.removeAttribute("CHECKCODE_SERVER");//为了保证验证码只能使用一次
//比较
if(checkcode_server==null||!checkcode_server.equalsIgnoreCase(check)){
//验证码错误
ResultInfo info =new ResultInfo();
//
info.setFlag(false);
info.setErrorMsg("验证码错误!");
//将info对象序列化为json
ObjectMapper mapper=new ObjectMapper();
String json = mapper.writeValueAsString(info);
//将json数据写回客户端
//设置content-type
response.setContentType("application/json;charset=utf-8");
response.getWriter().write(json);
return;
}
//1.获取数据
Map<String, String[]> map = request.getParameterMap();
//2.封装对象
User user = new User();
try {
BeanUtils.populate(user,map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
//3.调用service完成注册
UserService service = new UserServiceImpl();
boolean flag = service.regist(user);
ResultInfo info = new ResultInfo();
//4.响应结果
if(flag){
//注册成功
info.setFlag(true);
}else{
//注册失败
info.setFlag(false);
info.setErrorMsg("注册失败!");
}
//将info对象序列化为json
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(info);
//将json数据写回客户端
//设置content-type
response.setContentType("application/json;charset=utf-8");
response.getWriter().write(json);
}
}
注册功能(前台)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/regist.css">
<script src="/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript"></script>
<title>注册页面</title>
<script type="text/javascript" src="js/regist.js"></script>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<div id="errorMsg" style="color: red;text-align: center"></div>
<!--定义表单 form-->
<form action="RegistUserServlet" id="registerForm" accept-charset="utf-8" method="post">
<!--提交处理请求的标识符-->
<input type="hidden" name="action" value="register">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
</tr>
<tr>
<td class="td_left"><label for="checkcode" >验证码</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
<img src="CheckCodeServlet" height="32px" onclick="changeCheckCode(this)">
<script type="text/javascript">
//图片点击事件
function changeCheckCode(img) {
img.src="CheckCodeServlet?"+new Date().getTime();
}
</script>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号?<a href="login.html">立即登录</a></p>
</div>
</div>
</body>
</html>
注册功能(js代码)
//校验用户名
//1.用户名:单词字符,3~20位
function checkUsername(){
//1.获取用户名
let username=$("#username").val();
//2.定义正则
let reg_username=/^\w{3,20}$/;
//3.判断,给出信息
let flag= reg_username.test(username);
if(flag){
//用户名合法
$("#username").css("border","");
}else{
//用户名非法,加一个红色边框
$("#username").css("border","1px solid red");
}
return flag;
}
//校验密码
function checkPassword(){
//1.获取密码
let password=$("#password").val();
//2.定义正则
let reg_password=/^\w{3,20}$/;
//3.判断,给出信息
let flag= reg_password.test(password);
if(flag){
//用户名合法
$("#password").css("border","");
}else{
//用户名非法,加一个红色边框
$("#password").css("border","1px solid red");
}
return flag;
}
$(function(){
//表单提交时,调用所有的校验方法
$("#registerForm").submit(function (){
//1.发送数据到服务器
if(checkUsername() && checkPassword()){
//校验通过,发送Ajax请求,提交表单的数据
$.post("RegistUserServlet",$(this).serialize(),function (data){
//处理服务器响应的数据 data {flag:true,errorMsg:"注册失败"}
if(data.flag){
//注册成功,跳转成功页面
location.href="login.html";
}else{
//注册失败,给errorMsg添加提示信息
$("#errorMsg").html(data.errorMsg);
}
});
}
//2.跳转页面
//如果这个方法没有返回值,或者返回为true,则表单提交,如果返回FALSE,则表单不提交
});
//当某一个组件失去焦点时,调用对应的校验方法
$("#username").blur(checkUsername);
$("#password").blur(checkPassword);
})
三、说明
我们把js代码都提到了一个js文件里,只需引进到页面就行,在注册页面里,我们先把用户名和密码都给做了一个校验的功能,不合法的话边框就变成了红色,合法就不显示。
提交表单时就先进行校验,校验通过就发送ajax请求,先进入RegistUserServlet,
我们先校验验证码,如果验证码不对就不用校验用户名和密码,之后获取数据,再进行封装,再调用service的regist()方法进行查询,我们根据用户名是否存在进行查询,存在就报出注册失败的信息,否则就保存到数据库。
然后响应结果,再将我们保存的信息info序列化为json格式,再写回客户端。
在function(data)方法里注册成功就跳转页面,不成功就给出提示信息。
注:需要的代码都可以在上边的码云里找到。