文章目录

1、注册功能---界面展示
2、注册功能---功能分析
3、后台代码
4、前台代码

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 格式错误

<%@ 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);
    }

基于JavaWeb的旅游项目--注册功能（带验证码）

文章目录

1、注册功能—界面展示

2、注册功能—功能分析

3、后台代码

（1）UserService的register测试方法

（2）UserService的register方法

（3）UserDao方法

（4）UserDao.xml

（5）UserDao的测试方法

4、前台代码

（1）规则

（2）Ajax请求

（3）验证码

（4）RegisterServlet

猜你喜欢