SSM开发书评网20：把【Kaptcha验证码功能】应用到注册模块上；（遇到了【get请求的url，添加时间戳】，【表单内容序列化】）

最新推荐文章于 2022-11-06 16:16:25 发布

小懒羊爱吃草

最新推荐文章于 2022-11-06 16:16:25 发布

阅读量722

点赞数

分类专栏：（17）SSM开发书评网文章标签：前端

本文链接：https://blog.csdn.net/csucsgoat/article/details/122359693

版权

说明：

（1）本篇博客的内容：本篇博客主要是把【SSM开发书评网19：开发【Kaptcha验证码功能】】中开发的验证码功能，应用到注册模块上；只是开发到了这一步，注册模块的完整业务逻辑并没有开发；

（2）本篇博客合理性说明：【在【SSM开发书评网19：开发【Kaptcha验证码功能】】中我们开发了Kaptcha验证码】→【但是，这个验证码，需要和前台界面（注册和登录页）联系在一起后，才有实际使用的价值】→【然后，本篇博客结合开发注册功能时，把前面开发的Kaptcha验证码给用上】

（3）本篇博客遇到的点：

● 遇到了【在访问get请求时，在url后面增加ts时间戳，用来解决浏览器缓存可能带来的问题】；

● 本篇博客通过【data: $("#frmLogin").serialize()】，把表单的数据给序列化了；serialize()方法是JQuery中的ajax方法，其作用是编码表单元素集为字符串以便提交；；；；；；然后，自己想起了【后台系统四：【新增】功能；（FileUpload组件）】这篇博客；这篇博客主要内容是【提交的表单的时候，涉及到了文件上传】，然后我们通过【enctype="multipart/form-data"】设置表单的编码方式，以便能够上传文件；

● 在本案例中，我们把验证码的校验工作放在了Controller层；而没有放任到Service层；这应该是个普遍采用的开发习惯和规则；

一：在项目中，引入注册页的前端文件：register.ftl；

二：开发；

1.创建MemberController类：开发【访问注册页的入口方法】；（也就是，开发register.ftl注册页的访问url）

2.在注册页上，显示验证码；

3.点击验证码图片时，更换验证码；

4.注册页点击【注册】按钮后，提交注册表单信息；（这儿目前，专注于验证码信息的提交）

5.前端点击【注册】发起注册请求后，后端处理请求；（这儿目前，只专注于验证码的校验）

一：在项目中，引入注册页的前端文件：register.ftl；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员注册-慕课书评网</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
	
	<link rel="stylesheet" href="./resources/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="./resources/raty/lib/jquery.raty.css">
    <script src="./resources/jquery.3.3.1.min.js"></script>
    <script src="./resources/bootstrap/bootstrap.min.js"></script>
    <style>
        .container {
            padding: 0px;
            margin: 0px;
        }

        .row {
            padding: 0px;
            margin: 0px;
        }

        .col- * {
            padding: 0px;
        }

        .description p {
            text-indent: 2em;
        }

        .description img {
            width: 100%;
        }

    </style>

</head>
<body>
<!--<div style="width: 375px;margin-left: auto;margin-right: auto;">-->
<div class="container ">
    <nav class="navbar navbar-light bg-white shadow">
        <ul class="nav">
            <li class="nav-item">
                <a href="/">
                    <img src="https://m.imooc.com/static/wap/static/common/img/logo2.png" class="mt-1"
                         style="width: 100px">
                </a>
            </li>
        </ul>
    </nav>


    <div class="container mt-2 p-2 m-0">
        <form id="frmLogin">
            <div class="passport bg-white">
                <h4 class="float-left">会员注册</h4>
                <h6 class="float-right pt-2"><a href="/login.html">会员登录</a></h6>
                <div class="clearfix"></div>
                <div class="alert d-none mt-2" id="tips" role="alert">

                </div>

                <div class="input-group  mt-2 ">
                    <inpu