黑马旅游网-注册用户二
lambda-小张
帮助1人
目录
一、注册用户-业务流程分析
1.页面效果
2.业务流程分析
二、注册用户-前端功能实现
修改register.html
1.校验用户名
获取用户名
用户名格式要求，正则表达式限制
进行判断用户名是否符合
用户名合法无提示
用户名不合法，红色边框提示
2.校验密码
获取密码
密码格式要求，正则表达式限制
进行判断密码是否符合
密码合法无提示
密码不合法，红色边框提示
3.检验邮箱
获取邮箱
邮箱格式要求，正则表达式限制，注意邮箱格式
进行判断邮箱是否符合
合法无提示
不合法，红色边框提示
4.使用ajax提交数据
在此使用异步提交表单是为了获取服务器响应的数据。因为我们前台使用的是html作为视图层，不能够直接从servlet相关的域对象获取值，只能通过ajax获取响应数据
5.完整代码参考
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="utf-8">
-
<title>注册</title>
-
<link rel="stylesheet" type="text/css" href="css/common.css">
-
<link rel="stylesheet" href="css/register.css">
-
<!--导入jquery-->
-
<script src="js/jquery-3.3.1.js"></script>
-
<script>
-
//校验用户名
-
function checkUsername(){
-
//获取用户名
-
var username = $("#username").val();
-
//用户名 8~32位
-
var reg_username = /^\w{8,32}$/;
-
//判断
-
var flag = reg_username.test(username);
-
-
if(flag){
-
//用户名合法
-
$("#username").css("border","");
-
}else{
-
//用户名不合法，红色边框
-
$("#username").css("border","1px solid red");
-
}
-
return flag;
-
}
-
-
//校验密码
-
function checkPassword(){
-
//获取用户名
-
var password = $("#password").val();
-
//用户名 8~20位
-
var reg_password = /^\w{8,20}$/;
-
-
//判断
-
var flag = reg_password.test(password);
-
-
if(flag){
-
//用户名合法
-
$("#password").css("border","");
-
}else{
-
//用户名不合法，红色边框
-
$("#password").css("border","1px solid red");
-
}
-
return flag;
-
}
-
//校验邮箱
-
function checkEmail(){
-
//获取用户名
-
var email = $("#email").val();
-
//用户名 8~20位
-
var reg_email = /^\w @\w .\w $/;
-
-
//判断
-
var flag = reg_email.test(email);
-
-
if(flag){
-
//用户名合法
-
$("#email").css("border","");
-
}else{
-
//用户名不合法，红色边框
-
$("#email").css("border","1px solid red");
-
}
-
return flag;
-
}
-
-
//使用ajax提交数据
-
$(function (){
-
$("#registerForm").submit(function (){
-
//表单的校验
-
if(checkUsername() && checkPassword() && checkEmail()){
-
//表单数据合法 username=xxx&passwrod=xxx
-
$.post("registerUserServlet",$(this).serialize(),function (data){
-
//设计返回数据格式 data : {flag:true,errorMsg:"提示错误信息"}
-
if (data.flag){
-
//注册成功
-
location.href="register_ok.html";//跳转到首页
-
}else {
-
$("#msg").html(data.errorMsg);
-
}
-
});
-
};
-
//表单较验失败
-
return false;
-
});
-
//用户体验提升
-
$("#username").blur(checkUsername);
-
$("#password").blur(checkPassword);
-
$("#email").blur(checkEmail);
-
});
-
</script>
-
</head>
-
<body>
-
<!--引入头部-->
-
<div id="header"></div>
-
<!-- 头部 end -->
-
<div class="rg_layout">
-
<div class="rg_form clearfix">
-
<div class="rg_form_left">
-
<p>新用户注册</p>
-
<p>USER REGISTER</p>
-
</div>
-
<div class="rg_form_center">
-
-
<!--注册表单-->
-
<form id="registerForm">
-
<!--提交处理请求的标识符-->
-
<input type="hidden" name="action" value="register">
-
<table style="margin-top: 25px;">
-
<tr>
-
<td class="td_left">
-
<label for="username">用户名</label>
-
</td>
-
<td class="td_right">
-
<input type="text" id="username" name="username" placeholder="请输入账号">
-
</td>
-
</tr>
-
<tr>
-
<td class="td_left">
-
<label for="password">密码</label>
-
</td>
-
<td class="td_right">
-
<input type="text" id="password" name="password" placeholder="请输入密码">
-
</td>
-
</tr>
-
<tr>
-
<td class="td_left">
-
<label for="email">Email</label>
-
</td>
-
<td class="td_right">
-
<input type="text" id="email" name="email" placeholder="请输入Email">
-
</td>
-
</tr>
-
<tr>
-
<td class="td_left">
-
<label for="name">姓名</label>
-
</td>
-
<td class="td_right">
-
<input type="text" id="name" name="name" placeholder="请输入真实姓名">
-
</td>
-
</tr>
-
<tr>
-
<td class="td_left">
-
<label for="telephone">手机号</label>
-
</td>
-
<td class="td_right">
-
<input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">
-
</td>
-
</tr>
-
<tr>
-
<td class="td_left">
-
<label for="sex">性别</label>
-
</td>
-
<td class="td_right gender">
-
<input type="radio" id="sex" name="sex" value="男" checked> 男
-
<input type="radio" name="sex" value="女"> 女
-
</td>
-
</tr>
-
<tr>
-
<td class="td_left">
-
<label for="birthday">出生日期</label>
-
</td>
-
<td class="td_right">
-
<input type="date" id="birthday" name="birthday" placeholder="年/月/日">
-
</td>
-
</tr>
-
<tr>
-
<td class="td_left">
-
<label for="check">验证码</label>
-
</td>
-
<td class="td_right check">
-
<input type="text" id="check" name="check" class="check">
-
<img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)">
-
<script type="text/javascript">
-
//图片点击事件
-
function changeCheckCode(img) {
-
img.src="checkCode?" new Date().getTime();
-
}
-
</script>
-
</td>
-
</tr>
-
<tr>
-
<td class="td_left">
-
</td>
-
<td class="td_right check">
-
<input type="submit" class="submit" value="注册">
-
<span id="msg" style="color: red;"></span>
-
</td>
-
</tr>
-
</table>
-
</form>
-
</div>
-
<div class="rg_form_right">
-
<p>
-
已有账号？
-
<a href="#">立即登录</a>
-
</p>
-
</div>
-
</div>
-
</div>
-
<!--引入尾部-->
-
<div id="footer"></div>
-
<!--导入布局js，共享header和footer-->
-
<script type="text/javascript" src="js/include.js"></script>
-
-
</body>
-
</html>
三、注册用户-后端功能实现
创建RegisterUserServlet
1.从session中获取验证码
2.删除session
3.验证码有误 封装返回的数据对象
4.注册失败，设置编码和类型
5.获取所有表单的数据、
6.封装user对象
7.调用service
8.验证码有误 封装返回的数据对象
9.注册用户成功
10.注册用户失败
11.设置编码和类型
-
package com.hotdas.travel.web.servlet;
-
-
import com.fasterxml.jackson.databind.ObjectMapper;
-
import com.hotdas.travel.domain.ResultInfo;
-
import com.hotdas.travel.domain.User;
-
import com.hotdas.travel.service.UserService;
-
import com.hotdas.travel.service.impl.UserServiceImpl;
-
import org.apache.commons.beanutils.BeanUtils;
-
-
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.lang.reflect.InvocationTargetException;
-
import java.util.Map;
-
-
/**
-
* @program: IntelliJ IDEA
-
* @description:
-
* @author:
-
* @create: 2022-10-01 22:04
-
*/
-
-
public class RegisterUserServlet extends HttpServlet {
-
-
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
-
String check = request.getParameter("check");
-
//从session中获取验证码
-
String checkcode_server = (String) request.getSession().getAttribute("CHECKCODE_SERVER");
-
//删除session
-
request.getSession().removeAttribute("CHECKCODE_SERVER");
-
if (checkcode_server!=null && !checkcode_server.equalsIgnoreCase(check)){
-
//验证码有误 封装返回的数据对象
-
ResultInfo info = new ResultInfo();
-
//注册失败
-
info.setErrorMsg("验证码有误!");
-
info.setFlag(false);
-
ObjectMapper objectMapper = new ObjectMapper();
-
String valueAsString = objectMapper.writeValueAsString(info);
-
//设置编码和类型
-
response.setCharacterEncoding("utf-8");
-
response.setContentType("application/json;charset=utf-8");
-
response.getWriter().write(valueAsString);
-
return;
-
}
-
//获取所有表单的数据
-
Map<String, String[]> parameterMap = request.getParameterMap();
-
//封装user对象
-
User user = new User();
-
try {
-
BeanUtils.populate(user,parameterMap);
-
} catch (IllegalAccessException e) {
-
e.printStackTrace();
-
} catch (InvocationTargetException e) {
-
e.printStackTrace();
-
}
-
-
//调用service
-
UserService userService = new UserServiceImpl();
-
Boolean flag = userService.regirst(user);
-
//验证码有误 封装返回的数据对象
-
ResultInfo info = new ResultInfo();
-
if (flag){
-
//注册用户成功
-
info.setFlag(true);
-
}else{
-
//注册用户失败
-
//注册失败
-
info.setErrorMsg("注册失败!");
-
info.setFlag(false);
-
}
-
-
ObjectMapper objectMapper = new ObjectMapper();
-
String valueAsString = objectMapper.writeValueAsString(info);
-
//设置编码和类型
-
response.setCharacterEncoding("utf-8");
-
response.setContentType("application/json;charset=utf-8");
-
response.getWriter().write(valueAsString);
-
-
}
-
-
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
-
this.doPost(request,response);
-
}
-
-
-
}
创建UserService
-
package com.hotdas.travel.service;
-
-
import com.hotdas.travel.domain.User;
-
-
public interface UserService {
-
Boolean regirst(User user);//实现方法
-
}
创建UserServiceImpl
1.从数据库中查询用户
2.判断用户是否存在
3.用户存在,返回false
4.激活邮箱才可以使用
5.保存信息到数据库
6.发送邮箱给用户让用户进激活,后面doing...
-
package com.hotdas.travel.service.impl;
-
-
import com.hotdas.travel.dao.UserDao;
-
import com.hotdas.travel.dao.impl.UserDaoImpl;
-
import com.hotdas.travel.domain.User;
-
import com.hotdas.travel.service.UserService;
-
import com.hotdas.travel.util.UuidUtil;
-
-
public class UserServiceImpl implements UserService {
-
private UserDao userDao = new UserDaoImpl();
-
-
-
public Boolean regirst(User user) {
-
//从数据库中查询用户
-
User u = userDao.findByUsername(user.getUsername());
-
-
//判断用户是否存在
-
if (u!=null){
-
//用户存在,返回false
-
return false;
-
}
-
//激活邮箱才可以使用
-
user.setCode(UuidUtil.getUuid());
-
user.setStatus("N");
-
-
//保存信息到数据库
-
userDao.save(user);
-
-
//发送邮箱给用户让用户进激活,后面doing...
-
-
-
return true;
-
}
-
}
创建UserDao
1.根据用户名查询用户信息
2.保存用户信息
-
package com.hotdas.travel.dao;
-
-
import com.hotdas.travel.domain.User;
-
-
public interface UserDao {
-
//根据用户名查询用户信息
-
User findByUsername(String username);
-
-
//保存用户信息
-
void save(User user);
-
-
}
创建UserDaoImpl
1.定义sql
2.用占位符替代数据
-
package com.hotdas.travel.dao.impl;
-
-
import com.hotdas.travel.dao.UserDao;
-
import com.hotdas.travel.domain.User;
-
import com.hotdas.travel.util.JDBCUtils;
-
import org.springframework.dao.DataAccessException;
-
import org.springframework.jdbc.core.BeanPropertyRowMapper;
-
import org.springframework.jdbc.core.JdbcTemplate;
-
-
public class UserDaoImpl implements UserDao {
-
-
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
-
-
-
public User findByUsername(String username) {
-
User user =null;
-
try {
-
//1.定义sql
-
String sql ="select * from tab_user where username=?";
-
user = template.queryForObject(sql,new BeanPropertyRowMapper<User>(User.class),username);
-
} catch (DataAccessException e) {
-
e.printStackTrace();
-
}
-
return user;
-
}
-
-
-
public void save(User user) {
-
//1.定义sql，占位符
-
String sql = "insert into tab_user(username,password,name,birthday,sex,telephone,email,status,code) values(?,?,?,?,?,?,?,?,?)";
-
-
template.update(sql,
-
user.getUsername(),
-
user.getPassword(),
-
user.getName(),
-
user.getBirthday(),
-
user.getSex(),
-
user.getTelephone(),
-
user.getEmail(),
-
user.getStatus(),
-
user.getCode());
-
-
-
}
-
}
四、测试
运行项目，打开网页，数据不合法会出现红色框，以此检验代码是否有误
这篇好文章是转载于：编程之路
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 编程之路
- 本文地址： /boutique/detail/tanhgkibjj
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13
