商铺项目（店铺注册功能模块）

Posted 2020-10-11 虚极静笃

引入kaptcha实现验证码：

添加到pom.xml中。

web.xml中添加配置：

    <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>
        <!-- 字体颜色 -->
        <init-param>
            <param-name>kaptcha.textproducer.font.color</param-name>
            <param-value>red</param-value>
        </init-param>
        <!-- 图片宽度 -->
        <init-param>
            <param-name>kaptcha.image.width</param-name>
            <param-value>135</param-value>
        </init-param>
        <!-- 使用哪些字符生成验证码 -->
        <init-param>
            <param-name>kaptcha.textproducer.char.string</param-name>
            <param-value>ACDEFHKPRSTWX345679</param-value>
        </init-param>
        <!-- 图片高度 -->
        <init-param>
            <param-name>kaptcha.image.height</param-name>
            <param-value>50</param-value>
        </init-param>
        <!-- 字体大小 -->
        <init-param>
            <param-name>kaptcha.textproducer.font.size</param-name>
            <param-value>43</param-value>
        </init-param>
        <!-- 干扰线的颜色 -->
        <init-param>
            <param-name>kaptcha.noise.color</param-name>
            <param-value>black</param-value>
        </init-param>
        <!-- 字符个数 -->
        <init-param>
            <param-name>kaptcha.textproducer.char.length</param-name>
            <param-value>4</param-value>
        </init-param>
        <!-- 使用哪些字体 -->
        <init-param>
            <param-name>kaptcha.textproducer.font.names</param-name>
            <param-value>Arial</param-value>
        </init-param>
    </servlet>
    <!-- 映射的url -->
    <servlet-mapping>
        <servlet-name>Kaptcha</servlet-name>
        <url-pattern>/Kaptcha</url-pattern>
    </servlet-mapping>

在shopoperation.html中添加：

<!-- 验证码    kaptcha-->
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media">
                                    <i class="icon icon-form-comment"></i>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title label">验证码</div>
                                    <input type="text"  id="j-captcha" placeholder="验证码">
                                    <div class="item-input">
                                        <img id="captcha-img" alt="点击更换" title="点击更换" onclick="changeVerifyCode(this)" src=../Kaptcha/
                                    </div>
                                </div>
                            </div>
                        </li>

创建目录及文件：

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

var verifyCodeActual = $(\'#j-captcha\').val();
            if(!verifyCodeActual){
                $.toast(\'请输入验证码！\');
                return;
            }
            formData.append(\'verifyCodeAvtual\',verifyCodeActual);

引入common.js:

<script type=\'text/javascript\'
        src=\'../resources/js/common/common.js\' charset=\'utf-8\'></script>

启动项目访问：http://localhost:8080/o2o/shopadmin/shopoperate看效果。

另外我们希望每次提交以后都要换验证码：

$(\'captcha-img\').click();

下面在后台写验证码验证：

package com.ouyan.o2o.util;

import javax.servlet.http.HttpServletRequest;

public class CodeUtil {
    public static boolean checkVerifyCode(HttpServletRequest request) {
        String verifyCodeExpected = (String) request.getSession()
                .getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
        String verifyCodeActual = HttpServletRequestUtil.getString(request, "verifyCodeActual");
        if (verifyCodeActual == null || !verifyCodeActual.equals(verifyCodeExpected)) {
            return false;
        }
        return true;
    }
}

加入几行代码：

if(!CodeUtil.checkVerifyCode(request)){
            modelMap.put("success", false);
            modelMap.put("errMsg", "输入了错误的验证码");
            return modelMap;
        }