文章目录
1、注册功能—界面展示
1、用户不存在,用户注册
- (1)用户名:至少8位
- (2)密码;至少8位
- (3)Email;
真实邮箱
,需要激活账户
2、用户存在,转入登录界面
2、注册功能—功能分析
3、后台代码
(1)UserService的register测试方法
- TestUserService.java(src\test\java\service)
@Test
public void test03() {
UserService userService = new UserService();
User user= new User(44,"jackhello44","jackhello34",new Date(),"jack","男","3333","[email protected]",'N',"ddd");
int code = userService.register(user);
System.out.println(code);
}
(2)UserService的register方法
- UserService.java(src\main\java\service)
public int register(User user) {
UserDao userDao = MySessionUtils2.getMapper(UserDao.class);
//判断 用户的账号是否存在
User user2 = userDao.findByUserName(user.getUsername());
//不存在,调用保存 返回 1
if(user2 == null){
userDao.save(user);
return 1;
}else{
//存在,返回-1
return -1;
}
}
(3)UserDao方法
- UserDao.java(src\main\java\dao)
public interface UserDao {
//select * from tab_user where username = 'jackhello'
User findByName(String name);
//select * from tab_user where username='jackhello3'
User findByUserName(String username);
//insert into tab_user values(null,...)
void save(User user2);
//update tab_user set status ='Y' where code = 'bb26f0d05ea745c5986bc18ff7b4cef9';
int updateStatus(String activeCode);
}
(4)UserDao.xml
- (src\main\resources)
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.smp.dao.UserDao">
<select id="findByUserName" parameterType="string" resultType="user">
select * from tab_user where username=#{
username}
</select>
<insert id="save" parameterType="user" >
insert into tab_user values(null,#{
username},
#{
password},#{
name},#{
birthday},#{
sex},#{
telephone},#{
email},#{
status},#{
code})
</insert>
<update id="updateStatus" parameterType="string" >
update tab_user set status ='Y' where code = #{
code};
</update>
<select id="findByName" parameterType="string" resultType="user">
select * from tab_user where username = #{
username}
</select>
</mapper>
(5)UserDao的测试方法
- UserDaoTest2.java(src\test\java\dao)
public class UserDaoTest2 {
@Test
public void findByUserName() {
UserDao dao = MySessionUtils2.getMapper(UserDao.class);
User user = dao.findByUserName("jackhello");
System.out.println(user);
}
@Test
public void save() {
UserDao dao = MySessionUtils2.getMapper(UserDao.class);
User user= new User(33,"jackhello33","jackhello34",new Date(),"jack","男","3333","[email protected]",'N',"ddd");
// User(int uid, String username, String password, Date birthday, String name, String sex, String telephone, String email, char status, String code)
dao.save(user);
MySessionUtils2.commitAndClose();
}
@Test
public void update() {
UserDao dao = MySessionUtils2.getMapper(UserDao.class);
int code = dao.updateStatus("f43812f68c794732943ffe678e9a4685");
System.out.println(code);
MySessionUtils2.commitAndClose();
//lvyou/activeServlet?activeCode=f43812f68c794732943ffe678e9a4685
}
}
4、前台代码
(1)规则
(0)实际项目中数据的格式都是在浏览器校验
提升用户体验,并减轻服务器压力。
- (1)校验用户名 /^\w{8,20}$/ 单词字符,长度8到20位
- (2)校验密码 /^\w{8,20}$/ 单词字符,长度8到20位
- (3)校验邮箱 = /^\w+@\w+.\w+$/ 邮箱 [email protected]
- 正则表达式
正则表达式.test(字符串)
返回一个布尔值
true 格式正确
false 格式错误
- register.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<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 type="text/javascript" >
function checkUsername(){
//判断一下账号输入是否合法
var username = $("#username").val();
var reg = /^\w{
8,20}$/ ;
var flag = reg.test(username);
if(flag){
//不提示
$("#username").css("border","");
}else{
//提示
$("#username").css("border","1px solid red");
}
return flag;
}
function checkPassword(){
//判断一下密码输入是否合法
var password = $("#password").val();
var reg = /^\w{
8,20}$/ ;
var flag = reg.test(password);
if(flag){
//不提示
$("#password").css("border","");
}else{
//提示
$("#password").css("border","1px solid red");
}
return flag;
}
function checkEmail(){
//判断一下密码输入是否合法
var email = $("#email").val();
var reg = /^\w+@\w+\.\w+$/ ;
var flag = reg.test(email);
if(flag){
//不提示
$("#email").css("border","");
}else{
//提示
$("#email").css("border","1px solid red");
}
return flag;
}
$(function () {
//账号密码 手机号 邮箱 正则判断
//格式正确不作提示,如果错误将边框改成红色
$("#username").blur(checkUsername)
$("#password").blur(checkPassword)
$("#email").blur(checkEmail)
$("#registerForm").submit(function () {
//ajax提交
if(checkUsername()&&checkPassword()&&checkEmail()){
//使用jquery
$.post("registerServlet",$("#registerForm"). serialize(),
function(data){
//{code:1,data:成功}
if(data.code == 1){
window.location="register_ok.jsp";
}else {
$("#errorMsg").html(data.data);
}
},"json");
}
return false;
})
});
</script>
</head>
<body>
<!--引入头部-->
<div id="header">
<%@include file="header.jsp"%>
</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">
<div id="errorMsg" style="color:red;font-size: 22px" ></div>
<!--注册表单-->
<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: #ff0000;"></span>
</td>
</tr>
</table>
</form>
</div>
<div class="rg_form_right">
<p>
已有账号?
<a href="login.jsp">立即登录</a>
</p>
</div>
</div>
</div>
<!--引入尾部-->
<div id="footer">
<%@include file="footer.jsp"%>
</div>
<!--导入布局js,共享header和footer-->
</body>
</html>
(2)Ajax请求
(1)submit函数
控制表单是否提交,函数返回true,表单提交,返回false表单不提交
此处
在ajax提交,则写false
- (2)为什么返回false?那数据如何到服务端?
ajax提交
$("#registerForm").submit(function () {
//ajax提交
if(checkUsername()&&checkPassword()&&checkEmail()){
//使用jquery
$.post("registerServlet",$("#registerForm"). serialize(),
function(data){
//{code:1,data:成功}
if(data.code == 1){
window.location="register_ok.jsp";
}else {
$("#errorMsg").html(data.data);
}
},"json");
}
return false;
(3)验证码
<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>
(4)RegisterServlet
- (src\main\java\web\servlet)
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//接收请求,获取参数
Map<String, String[]> map = request.getParameterMap();
User user = new User();
//将请求中的参数赋值给变量
try {
BeanUtils.populate(user,map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
System.out.println("注册数据"+user);
//对参数处理
UserService userService = new UserService();
int code = userService.register(user);
//响应给浏览器
ResponseInfo responseInfo = new ResponseInfo();
responseInfo.setCode(code);
if(code==1){
responseInfo.setData("注册成功");
}else{
//-1,-2,-3
responseInfo.setData("注册失败");
}
String json = new ObjectMapper().writeValueAsString(responseInfo);
response.getWriter().println(json);
}