登录时“自动填充”和“验证码”的实现

迷南。 2024-03-30 17:57 53阅读 0赞

#### 自动填充和验证码的实现 ####

*  需求
 *  1. 基础登录功能
 *   *  1.1 持久层
     *   *  pojo实体类：
         *  代理接口：
     *  1.2 业务层
     *  1.3 表现层
     *   *  login.jsp（登陆界面）：
         *  LoginServlet：
         *  selectAllServlet：
         *  brand.jsp（登陆成功）：
         *  效果
 *  2. 自动填充的实现（回显）
 *   *  2.1 表现层
     *   *  login.jsp：
         *  loginServlet：
         *  login.jsp（回显）：
         *  效果
 *  3. 基础注册功能
 *   *  3.1 持久层
     *  3.2 业务层
     *  3.3 表现层
     *   *  register.jsp：
         *  registerServlet：
         *  login.jsp:
         *  效果
 *  4. 验证码功能
 *   *  4.1 验证码的展示
     *   *  register.jsp：
         *  checkCodeServlet：
     *  4.2 验证码的校验
     *   *  checkCodeServlet：
         *  RegisterServlet：
         *  效果

## 需求 ##

![在这里插入图片描述][825f81f4267c4b96adbea91fb60bbc55.png]

## 1. 基础登录功能 ##

![在这里插入图片描述][ac58619039d3460a81cd16d49836c769.png]

*  在表现层，从Servelt的request对象获取用户名密码；
 *  将用户名密码传入servlet中创建service层的对象的方法，查询User并判断是否为null；
 *  不为null则使用respond重定向跳转到列表页面的jsp，输出当前的用户名（动态）和表格信息；  
    为null则登录失败并给出提示，这里将提示语使用request转发到jsp；

### 1.1 持久层 ###

#### pojo实体类： ####

![在这里插入图片描述][15cc4eea94f14034ad5ce0c28136f7be.png]

#### 代理接口： ####

注意多条件时使用 `@Param` 注解参数的方式查询，参数要对应SQL中的占位符！  
![在这里插入图片描述][8bc80f00aa84461992ce87b8b3315047.png]

### 1.2 业务层 ###

登录方法是查询，SQL不涉及事务，不需要sqlSession.commit()；  
![在这里插入图片描述][aa15213ebf264b4a958c578f47a8ed5a.png]

### 1.3 表现层 ###

#### login.jsp（登陆界面）： ####

如果登录失败，会回到注册页面并显示提示语；  
注意login.jsp提交的`action` 是`loginServlet` ！  
![在这里插入图片描述][df0dd85fb4664b708dffe737619badf1.png]

#### LoginServlet： ####

*  通过request对象获取用户名密码；
 *  调用service类的对象的login方法传入参数查询数据库；
 *  判断返回值user，不为null则登录成功，并将user对象存入Session，**`重定向`** 到`selectAllServlet`，跳转到`brand.jsp`，在brand.jsp中使用了Session中的user对象的username属性；
 *  为null则不成功，将数据`login_msg` 存入request域 **`转发`** 并跳转回`login.jsp` ；

**注意**：  
从LoginServlet **重定向** 到selectAllServlet是第二个请求，两个servlet，一次会话多次请求需要使用**会话跟踪技术**共享数据！（区别请求转发，请求转发共享的是request）  
由于是敏感信息，这里用**Session对象**来存储user对象，然后在brand.jsp中使用EL表达式使用取出Session中user对象的username属性（共享Session）;  
![在这里插入图片描述][9d2f3608171c4d5498efcd824411224a.png]  
![在这里插入图片描述][503ff6e1b0f0460d9fddeaf4959cada7.png]

#### selectAllServlet： ####

查询所有列表信息， 并跳转到 `brand.jsp`；  
![在这里插入图片描述][8922feac1ca24c14be80362b51fe3363.png]

#### brand.jsp（登陆成功）： ####

显示由session获取的user对象的username和所有列表信息；  
![在这里插入图片描述][3b065090e8b049c6af60666eb56d7248.png]

#### 效果 ####

访问 localhost:8080/brand-demo/**login.jsp**

用户名密码错误时：  
![在这里插入图片描述][9725793ea38b4caba815792bd89ae212.png]

正确时，跳转到 localhost:8080/brand-demo/**selectAllServlet**  
![在这里插入图片描述][236b0ddefb784b209d567036f7b95253.png]  
“zhangsan”是user对象的属性，user对象是存在Session中的；因为重定向，两个Servlet通过会话跟踪技术进行数据共享！

## 2. 自动填充的实现（回显） ##

### 2.1 表现层 ###

**需求**：  
![在这里插入图片描述][964c500b21eb46b390d85c8c997d69de.png]

**如何自动填充用户名和密码 ？**

1.  用户成功登陆并选择“记住”后，将用户名和密码写入`Cookie`中，发送给用户浏览器并持久化存储！
2.  页面获取request对象的Cookie数据后，**回显**到用户名密码框！

**注意**：第一次和第二次登录是两次请求数据，需要在两次请求之间共享数据，并且数据需要长期保存-----------Cookie

**什么时候写Cookie？有以下条件：**

1.  用户名密码登录成功！
2.  用户勾选“记住用户”的checkbox框；

#### login.jsp： ####

1.  增加一个checkbox 复选框remember，设置value=1；  
    value不写的话默认是on；

![在这里插入图片描述][b492aac566a448d9a4fca2dd425d0717.png]

#### loginServlet： ####

*  从request对象获取用户名密码；
 *  获取复选框的value；
 *  判断如果成功登录且用户勾选了“记住”复选框（value=1），则创建两个`Cookie`存用户名/密码，用`setMaxAge()`设置磁盘存储时间，并发送Cookie给浏览器存储；  
    ![在这里插入图片描述][c473a6a0030b4f1f9ec68d6ded87392e.png]  
    ![在这里插入图片描述][b128e5462e7742299192dc07dbdfee2a.png]

#### login.jsp（回显）： ####

1.  回显Cookie中的用户名和密码，将表单项的value值设置为cookie的值即可！（使用EL表达式）；  
    ![在这里插入图片描述][f1d7e310e56c42ec8e46a38194f14b60.png]

#### 效果 ####

再次登录后用户名密码被回显；  
![在这里插入图片描述][25eba10038894b3aa775ac703c25fb74.png]

## 3. 基础注册功能 ##

![在这里插入图片描述][8ff28930718247b1abc0af148f51c1cc.png]

*  在持久层有两个方法，先查询用户名是否已经存在，已存在则不能再注册，如果不存在再add添加到数据库；
 *  在表现层，从request对象接收用户信息，创建service对象，调用方法传入参数进行查询和注册；
 *  如果注册成功，跳转到**登录页面**；失败则跳转**注册页面**，提示“用户名已存在”

### 3.1 持久层 ###

需要用到后面两个方法，即单条件查询和添加；

public interface UserMapper {
        
        /**
         * 根据用户名和密码查询用户对象
         * @param username
         * @param password
         * @return
         */
        @Select("select * from tb_user where username = #{username} and password = #{password}")
        User select(@Param("username") String username,@Param("password")  String password);
    
        /**
         * 根据用户名查询用户对象
         * @param username
         * @return
         */
        @Select("select * from tb_user where username = #{username}")
        User selectByUsername(String username);
    
        /**
         * 添加用户
         * @param user
         */
        @Insert("insert into tb_user values(null,#{username},#{password})")
        void add(User user);
    }

### 3.2 业务层 ###

1.  先判断用户名是否存在
2.  user为null即不存在则add添加用户信息到数据库；user不为null则存在，返回false；  
    ![在这里插入图片描述][c5d905a7c66f4f50b1feb9424b7d7f9c.png]

### 3.3 表现层 ###

#### register.jsp： ####

form表单的cation是registerServlet；

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎注册</title>
        <link href="css/register.css" rel="stylesheet">
    </head>
    <body>
    
    <div class="form-div">
        <div class="reg-content">
            <h1>欢迎注册</h1>
            <span>已有帐号？</span> <a href="login.html">登录</a>
        </div>
        <form id="reg-form" action="/brand-demo/registerServlet" method="post">
    
            <table>
    
                <tr>
                    <td>用户名</td>
                    <td class="inputs">
                        <input name="username" type="text" id="username">
                        <br>                        由request域转发的提示信息：“注册成功，请登录”
                        <span id="username_err" class="err_msg" >${register_msg}</span>
                    </td>
    
                </tr>
    
                <tr>
                    <td>密码</td>
                    <td class="inputs">
                        <input name="password" type="password" id="password">
                        <br>
                        <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                    </td>
                </tr>
    
    
                <tr>
                    <td>验证码</td>
                    <td class="inputs">
                        <input name="checkCode" type="text" id="checkCode">
                        <img id="checkCodeImg" src="/brand-demo/checkCodeServlet">
                        <a href="#" id="changeImg" >看不清？</a>
                    </td>
                </tr>
    
            </table>
    
            <div class="buttons">
                <input value="注 册" type="submit" id="reg_btn">
            </div>
            <br class="clear">
        </form>
    
    </div>
    
    <script>
        document.getElementById("changeImg").onclick = function () {
          
            document.getElementById("checkCodeImg").src = "/brand-demo/checkCodeServlet?"+new Date().getMilliseconds();
        }
    
    </script>
    </body>
    </html>

#### registerServlet： ####

service的方法为true代表不存在然后添加用户信息到数据库，则跳转到登录页面；  
为false则代表已存在，跳转回到注册页面并提示“用户已存在”；

![在这里插入图片描述][017a4e5b69ab405da01e25786102119f.png]![在这里插入图片描述][6073e60daf274e78b077261797a8124e.png]

#### login.jsp: ####

`login_msg` 和 `register_msg` 灵活使用，传哪个就显示哪个！  
![在这里插入图片描述][8ef78f2fe5894f14991e396467507ed0.png]

#### 效果 ####

当输入已存在时，跳转回登录页面并提示；  
![在这里插入图片描述][b16a820e4bbc4f818758437e4be2a9b5.png]

当输入不存在，则添加到数据库，并跳转到登录页面：

![在这里插入图片描述][2634c08a138741898d03469e3733a143.png]  
使用新账号**登录**，这里在基础登录功能中使用了重定向，重定向到`selectAllServlet`：

![在这里插入图片描述][21dcf0ba45ad4fcda15ff5037d67884d.png]

## 4. 验证码功能 ##

### 4.1 验证码的展示 ###

验证码就是java生成的图片；

**作用**：防止机器自动注册让服务器崩溃；

在CheckCodeUtil.java工具类中， 有 `outputVerifyImage`()输出图片验证码的方法：

参数是：宽度、高度、输出流、验证码长度；

public static String outputVerifyImage(int w, int h, File outputFile, int verifySize) throws IOException {
        
            String verifyCode = generateVerifyCode(verifySize);
            outputImage(w, h, outputFile, verifyCode);
            return verifyCode;
    }

**使用**：  
可以将验证码图片输出到本地文件，也可以将输出流放入response对象就可以传到浏览器了！  
![在这里插入图片描述][5179dffa75224a5d996f5ebcde2640f4.png]

**打印**：  
![在这里插入图片描述][12c44b242130400a81ef9876814d794a.png] ![在这里插入图片描述][694ba811720f424b910f3caaaf65e799.png]

#### register.jsp： ####

添加了<img 表单，src（url）是动态的，即访问checkCodeServlet！由response对象返回图片的数据；  
并添加一个

**问题**：图片的url和图片会被浏览器缓存！无法再次请求servlet！  
**解决**：在url后面加参数！为了不重复，使用时间戳！

![在这里插入图片描述][5ca80f3093c246649ab8c43216e83e86.png]

绑定 `onclick` 事件和函数，在函数中修改img的src以此再次访问servlet获取新的验证码！  
![在这里插入图片描述][f0ac7170a19846038e397674418b6c6e.png]

#### checkCodeServlet： ####

调用验证码的工具类，生成验证码图片进行展示；

![在这里插入图片描述][9b26d184c647433eb2007488d91c3f77.png]  
此时在注册页面即可看到验证码！

### 4.2 验证码的校验 ###

需要判断生成的验证码和输入的验证码是否一样，不一样则不能注册；

访问servlet生成的验证码 和提交注册表单是两次请求，要用到**会话跟踪技术** **`Session`**（更安全）！需要将验证码的数据存入Session，然后再从session中获取验证码并和用户提交到request对象的验证码 进行对比；  
![在这里插入图片描述][c565303608c84154b8c0bcec0cba4777.png]

#### checkCodeServlet： ####

先获取Session，再将验证码chekCode**存入Session**，这样就能后续从Session获取并和用户输入的比较，比较过程在RegisterServlet中;  
![在这里插入图片描述][e76abf05287940718ac4898f533abb47.png]

#### RegisterServlet： ####

注意是在注册成功之前进行比对，比对时忽略大小写！使用 `equalsIgnoreCase`()  
在注册之前增加比对的代码；  
如果比对不成功，直接return不会执行后序代码； 还需要跳转回注册页面，提示验证码错误！

public class RegisterServlet extends HttpServlet {
        
        private UserService service = new UserService();
    
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
           /1. 获取用户名和密码数据
            String username = request.getParameter("username");
            String password = request.getParameter("password");
            User user = new User();
            user.setUsername(username);
            user.setPassword(password);
            // 获取用户输入的验证码
            String checkCode = request.getParameter("checkCode");
            // 程序生成的验证码，从Session获取
            HttpSession session = request.getSession();
            String checkCodeGen = (String) session.getAttribute("checkCodeGen");
            / 比对用户输入验证码和Session获取的验证码！
            if(!checkCodeGen.equalsIgnoreCase(checkCode)){
        
                // 跳转回register.jsp并提示验证码错误！
                request.setAttribute("register_msg","验证码错误");
                request.getRequestDispatcher("/register.jsp").forward(request,response);
                // 不允许注册
                return;
            }
      		/2. 调用service 注册
            boolean flag = service.register(user);
            /3. 判断注册成功与否
            if(flag){
        
                //注册功能，跳转登陆页面
    
                request.setAttribute("register_msg","注册成功，请登录");
                request.getRequestDispatcher("/login.jsp").forward(request,response);
            }else {
        
                //注册失败，跳转到注册页面
    
                request.setAttribute("register_msg","用户名已存在");
                request.getRequestDispatcher("/register.jsp").forward(request,response);
            }
    }

#### 效果 ####

**当输入错误：**  
因为传给register.jsp的验证码位置在用户名表单，所以验证码错误的提示信息在用户名下面！  
![在这里插入图片描述][189ef2429b8743a49ea34606c1f1b418.png]  
![在这里插入图片描述][57b9b91f25a54c1788f6c9aebd541802.png]

**输入正确：**  
通过验证码对比，然后注册提交到数据库，跳转到login,jsp登录页面；  
![在这里插入图片描述][3f650cf379354089b5aa4dba8acedf5b.png] ![在这里插入图片描述][f5a12cab0fd44caabc9667c6403587a5.png]

[825f81f4267c4b96adbea91fb60bbc55.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/8ccbcb8a801f41c3bfaba17521463a1f.png
[ac58619039d3460a81cd16d49836c769.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/2165e157a2484f3eaabaa4dea1415694.png
[15cc4eea94f14034ad5ce0c28136f7be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/bca5a14c03744fc6864b51774326d346.png
[8bc80f00aa84461992ce87b8b3315047.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/2f26eea2e3b04242b4b52a9f6b72a5b7.png
[aa15213ebf264b4a958c578f47a8ed5a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/73025e6fee2848f7afd89404d36628c9.png
[df0dd85fb4664b708dffe737619badf1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/28860d94b5194bd387d036638639b053.png
[9d2f3608171c4d5498efcd824411224a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/ef2a4f8738c8408f8a36f58133754c77.png
[503ff6e1b0f0460d9fddeaf4959cada7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/4830a6c45ca6490fa489daf260202303.png
[8922feac1ca24c14be80362b51fe3363.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/74b53dceebcc4c779a027f18dbff94f3.png
[3b065090e8b049c6af60666eb56d7248.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/f79bff02d1b74bedad48e07d4a99b9db.png
[9725793ea38b4caba815792bd89ae212.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/ac09823002d54cb3ae52384d648c5283.png
[236b0ddefb784b209d567036f7b95253.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/1584b54fd450420c8210aac032af5c94.png
[964c500b21eb46b390d85c8c997d69de.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/17da6dfa0d37445aa01ec6d05e43f533.png
[b492aac566a448d9a4fca2dd425d0717.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a418e8a701c540deb78b22dfa1257f78.png
[c473a6a0030b4f1f9ec68d6ded87392e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/52f804d9175d4169be201d227d784962.png
[b128e5462e7742299192dc07dbdfee2a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/378fb6a6fe8a436788b48b17a709df01.png
[f1d7e310e56c42ec8e46a38194f14b60.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a8a9f27362bb47af9c3720a9e0c6fdb5.png
[25eba10038894b3aa775ac703c25fb74.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/310da1657f294895b6faf07fcd8ca1a4.png
[8ff28930718247b1abc0af148f51c1cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e5abb9d1e51c472abb2db7690a2ed616.png
[c5d905a7c66f4f50b1feb9424b7d7f9c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/369bae55e8064838b5a4386df39bb4ea.png
[017a4e5b69ab405da01e25786102119f.png]: https://img-blog.csdnimg.cn/017a4e5b69ab405da01e25786102119f.png
[6073e60daf274e78b077261797a8124e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/23d8ef9bb994486a8b9e8dd22b3de086.png
[8ef78f2fe5894f14991e396467507ed0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a73151f3f18f43ad9ff0fdec9a6bdfd2.png
[b16a820e4bbc4f818758437e4be2a9b5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/7daf89ace82245c69e28a710a986bbaf.png
[2634c08a138741898d03469e3733a143.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/cf3dccbd6d3a4245865dd97445f26448.png
[21dcf0ba45ad4fcda15ff5037d67884d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/9e008f95ce4040fdbcc0a969d1968ee1.png
[5179dffa75224a5d996f5ebcde2640f4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/6bb755fbb5bc49a49a6050607a196f1b.png
[12c44b242130400a81ef9876814d794a.png]: https://img-blog.csdnimg.cn/12c44b242130400a81ef9876814d794a.png
[694ba811720f424b910f3caaaf65e799.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/f10e82cd0b7a4ba9b816b055eb6f619c.png
[5ca80f3093c246649ab8c43216e83e86.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e6f8b392cd3946b6a1617a3074d12c36.png
[f0ac7170a19846038e397674418b6c6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/404ee9e9dbad4ea3a3da7ed46add7177.png
[9b26d184c647433eb2007488d91c3f77.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/829f264413a44ec8add61a1fafc5bde5.png
[c565303608c84154b8c0bcec0cba4777.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/20815320bc444471b8d49de2ccd2f9af.png
[e76abf05287940718ac4898f533abb47.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b1ac7466ad484e56998afc66b544c530.png
[189ef2429b8743a49ea34606c1f1b418.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/fa2cfbc4156b4fc4a09b6f87fcbfb6d7.png
[57b9b91f25a54c1788f6c9aebd541802.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/6d69a649211f4542ba9c6eea9610638a.png
[3f650cf379354089b5aa4dba8acedf5b.png]: https://img-blog.csdnimg.cn/3f650cf379354089b5aa4dba8acedf5b.png
[f5a12cab0fd44caabc9667c6403587a5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/4955a067eba845cbbae39c00514364f2.png