shop--6.店铺注册--使用kaptcha实现验证码

Posted 2020-10-31 SkyeAngel

1.引入jar包

https://mvnrepository.com/中搜索com.github.penggle

找到kaptcha，将其dependency拷贝到pom.xml下

2.在web.xml中编写servlet，用于生成验证码

<!--使用Kaptcha来生成验证码-->
  <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>
    <!--字体大小  40-->
    <init-param>
      <param-name>kaptcha.textproducer.font.size</param-name>
      <param-value>40</param-value>
    </init-param>

    <!--图片宽度 135-->
    <init-param>
      <param-name>kaptcha.image.width</param-name>
      <param-value>135</param-value>
    </init-param>
    <!--图片高度 50-->
    <init-param>
      <param-name>kaptcha.image.height</param-name>
      <param-value>50</param-value>
    </init-param>

    <!--使用哪些字符生成验证码 -->
    <init-param>
      <param-name>kaptcha.textproducer.char.string</param-name>
      <param-value>abcdefghijklmn123654789</param-value>
    </init-param>
    <!--验证码的字符个数  4-->
    <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>

    <!--干扰线颜色  黑色-->
    <init-param>
      <param-name>kaptcha.noise.color</param-name>
      <param-value>black</param-value>
    </init-param>
  </servlet>
  
  <servlet-mapping>
    <servlet-name>Kaptcha</servlet-name>
    <url-pattern>/Kaptcha</url-pattern>
  </servlet-mapping>

　　

　　

3.然后在页面中生成验证码

 

<!--验证码  kaptcha-->
<li>
    <div class="item-content">
        <div class="item-media"><i class="icon icon-form-name"></i></div>
        <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>

　　

其中  <img id="kaptcha_img" alt="点击更换" title="点击更换" onclick="changeVerifyCode(this)" src="../Kaptcha">

changeVerifyCode（this）是更换验证码的函数，可以写在js中，方便调用

src="../Kaptcha" 找到web.xml中名为Kaptcha的servlet

 

changeVerifyCode方法

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

　　

然后在js中将验证码接收传回后台

var verifyCodeActual = $(‘#j_kaptcha‘).val();
if(!verifyCodeActual){
     $.toast(‘请输入验证码！‘);
     return;
}
formData.append(‘verifyCodeActual‘, verifyCodeActual);

　　

写一个判断验证码是否正确的工具类

CodeUtil

/**
     * 判断验证码是否正确
     */
    public static boolean checkVerifyCode(HttpServletRequest request){
        //实际的验证码
        String verifyCodeExpected = (String) request.getSession()
                .getAttribute( Constants.KAPTCHA_SESSION_KEY);
        String verifyCodeActual = HttpServletRequestUtil
                .getString( request, "verifyCodeActual" );

        if(verifyCodeActual == null || !verifyCodeExpected.equals(verifyCodeActual)){
            return false;
        }
        return true;
    }

　　

然后在注册店铺时，将验证码的验证添加上

//注册店铺
    @RequestMapping(value="/registershop", method= RequestMethod.POST )
    @ResponseBody
    public Map<String, Object> registerShop(HttpServletRequest request){
        Map<String, Object> modelMap = new HashMap<>();
        //判断验证码是否正确
        if(!CodeUtil.checkVerifyCode(request)){
            modelMap.put( "success", false );
            modelMap.put( "errMsg", "验证码错误" );
            return modelMap;
        }


        //1.接收并转化相应的参数，包括店铺信息和图片信息
        String shopStr = HttpServletRequestUtil.getString( request, "shopStr" );
        ObjectMapper mapper = new ObjectMapper(); // create once, reuse
        Shop shop = null;
        try {
            shop = mapper.readValue(shopStr, Shop.class);
        } catch (IOException e) {
            modelMap.put("success", false);
            modelMap.put("errMsg", e.getMessage());
            return modelMap;
        }
        CommonsMultipartFile shopImg = null;
        //在本次会话的上下文获取上传的文件
        CommonsMultipartResolver commonsMultipartResolver =
                new CommonsMultipartResolver(request.getSession().getServletContext());
        //如果文件上传的有值
        if(commonsMultipartResolver.isMultipart( request )){
            MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest)request;
            shopImg = (CommonsMultipartFile)multipartHttpServletRequest.getFile("shopImg");
        } else{
            modelMap.put( "success", false );
            modelMap.put("errMsg", "上传图片不能为空");
            return modelMap;
        }
        //2.注册店铺
        if(shop != null && shopImg != null){
            PersonInfo user = (PersonInfo) request.getSession().getAttribute("user");
            shop.setOwner( user );
            ShopExecution shopExecution = shopService.addShop(shop, shopImg);
            if(shopExecution.getState() == ShopStateEnum.CHECK.getState()){
                modelMap.put( "success", true );

            }else{
                modelMap.put( "success", false );
                modelMap.put( "errMsg",  shopExecution.getStateInfo());
            }
        }else{
            modelMap.put("success", false);
            modelMap.put("errMsg", "请输入店铺信息");
        }
        //3.返回结果
        return modelMap;
    }

　　

但是单单这样，后台是读取不到

针对form中有文件流的，要用multipartResolver的文件上传解析器

要在spring-web.xml中

<!--文件上传解析器-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="utf-8"></property>
        <!--1024 * 1024 * 20 = 20M-->
        <property name="maxUploadSize" value="20971502"></property>
        <property name="maxInMemorySize" value="20971502"></property>
    </bean>

　　

还在pom.xml中添加

<!--文件上传-->
    <!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.3.2</version>
    </dependency>