SSM到Spring Boot从零开发校园商铺平台---4、店铺注册功能模块（二）

个人原因，项目搁置了一段时间，继续更新：

前序文章：
1、环境搭建及测试- - -附免费视频教程
2、Logback配置与使用
3、店铺注册功能模块（一）
附上github地址：https://github.com/tyronczt/imooc-o2o

先上效果图：

一、使用SUI Mobile编写前端代码

1、shopoperation.html
参照SUI Mobile官网示例，添加相应组件；
注意事项：将css写在头部，将js写在尾部，为了更好地用户体验。
2、shopoperation.js
实现店铺注册逻辑。
注意事项：注意单词的拼写，因为shopCategory手写缘故，拼错了，虽然有报错：Unrecognized field, not marked as ignorable，但是找了好久才找到错误所在，所以属性名能复制的尽量复制，另外在属性名定义上也要尽量规范。

二、验证码功能的实现（kaptcha）

1、引入依赖

<!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
        <dependency>
            <groupId>com.github.penggle</groupId>
            <artifactId>kaptcha</artifactId>
            <version>2.3.2</version>
        </dependency>

2、添加Servlet，并配置参数

<servlet>
    <!-- 生成图片的Servlet -->
    <servlet-name>Kaptcha</servlet-name>
    <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
    <!-- 是否有边框 -->
    <init-param>
        <param-name>kaptcha.border</param-name>
        <param-value>no</param-value>
    </init-param> 
    <!-- 参数配置 -->
    ...

</servlet>
<!-- 映射的url -->
<servlet-mapping>
    <servlet-name>Kaptcha</servlet-name>
    <url-pattern>/Kaptcha</url-pattern>
</servlet-mapping>

3、页面中引用

<!-- 验证码 kaptcha -->
<li>
    <div class="item-content">
        <div class="item-inner">
            <div class="item-title label">验证码</div>
            <input type="text" id="j_kaptcha" placeholder="验证码">
            <div class="item-input">
                <img id="kaptcha_img" alt="点击更换" title="点击更换"
                onclick="changeVerifyCode(this)" src="../Kaptcha"/>
            </div>
        </div>
    </div>
</li>

4、js控制更换验证码逻辑

function changeVerifyCode(img) {
    img.src = "../Kaptcha?" + Math.floor(Math.random() * 100);
}

5、后端校验验证码

public static boolean checkVerifyCode(HttpServletRequest request) {
    // 获取输入的校验码
    String verifyCodeActual = HttpServletRequestUtil.getString(request, "verifyCodeActual");
    // 获取图片中的校验码
    String verifyCodeExpexted = (String) request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);
    // 对比
    if (verifyCodeActual == null || !verifyCodeActual.equalsIgnoreCase(verifyCodeExpexted)) {
        return false;
    }
    return true;
}