shop--6.店铺注册--使用Kaptcha实验验证码功能-CSDN博客

1.引入jar包

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

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

1 <!-- 图片处理 -->
2         <!-- https://mvnrepository.com/artifact/net.coobird/thumbnailator -->
3         <dependency>
4             <groupId>net.coobird</groupId>
5             <artifactId>thumbnailator</artifactId>
6             <version>0.4.8</version>
7         </dependency>

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

 1 <!--使用Kaptcha来生成验证码-->
 2   <servlet>
 3     <servlet-name>Kaptcha</servlet-name>
 4     <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
 5     <!--样式-->
 6  
 7     <!--是否有边框  无边框-->
 8     <init-param>
 9       <param-name>kaptcha.border</param-name>
10       <param-value>no</param-value>
11     </init-param>
12  
13     <!--字体颜色  红色-->
14     <init-param>
15       <param-name>kaptcha.textproducer.font.color</param-name>
16       <param-value>red</param-value>
17     </init-param>
18     <!--字体大小  40-->
19     <init-param>
20       <param-name>kaptcha.textproducer.font.size</param-name>
21       <param-value>40</param-value>
22     </init-param>
23  
24     <!--图片宽度 135-->
25     <init-param>
26       <param-name>kaptcha.image.width</param-name>
27       <param-value>135</param-value>
28     </init-param>
29     <!--图片高度 50-->
30     <init-param>
31       <param-name>kaptcha.image.height</param-name>
32       <param-value>50</param-value>
33     </init-param>
34  
35     <!--使用哪些字符生成验证码 -->
36     <init-param>
37       <param-name>kaptcha.textproducer.char.string</param-name>
38       <param-value>abcdefghijklmn123654789</param-value>
39     </init-param>
40     <!--验证码的字符个数  4-->
41     <init-param>
42       <param-name>kaptcha.textproducer.char.length</param-name>
43       <param-value>4</param-value>
44     </init-param>
45     <!--字体  宋体-->
46     <init-param>
47       <param-name>kaptcha.textproducer.font.names</param-name>
48       <param-value>Arial</param-value>
49     </init-param>
50  
51     <!--干扰线颜色  黑色-->
52     <init-param>
53       <param-name>kaptcha.noise.color</param-name>
54       <param-value>black</param-value>
55     </init-param>
56   </servlet>
57    
58   <servlet-mapping>
59     <servlet-name>Kaptcha</servlet-name>
60     <url-pattern>/Kaptcha</url-pattern>
61   </servlet-mapping>

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

 1 <!--验证码  kaptcha-->
 2 <li>
 3     <div class="item-content">
 4         <div class="item-media"><i class="icon icon-form-name"></i></div>
 5         <div class="item-inner">
 6             <div class="item-title label">验证码</div>
 7             <input type="text" id="j_kaptcha" placeholder="验证码">
 8             <div class="item-input">
 9                 <img id="kaptcha_img" alt="点击更换" title="点击更换"
10                 onclick="changeVerifyCode(this)" src="../Kaptcha">
11             </div>
12         </div>
13     </div>
14 </li>

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

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

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

changeVerifyCode方法

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

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

1 var verifyCodeActual = $('#j_kaptcha').val();
2 if(!verifyCodeActual){
3      $.toast('请输入验证码！');
4      return;
5 }
6 formData.append('verifyCodeActual', verifyCodeActual);

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

CodeUtil

 1 /**
 2      * 判断验证码是否正确
 3      */
 4     public static boolean checkVerifyCode(HttpServletRequest request){
 5         //实际的验证码
 6         String verifyCodeExpected = (String) request.getSession()
 7                 .getAttribute( Constants.KAPTCHA_SESSION_KEY);
 8         String verifyCodeActual = HttpServletRequestUtil
 9                 .getString( request, "verifyCodeActual" );
10  
11         if(verifyCodeActual == null || !verifyCodeExpected.equals(verifyCodeActual)){
12             return false;
13         }
14         return true;
15     }

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

 1 //注册店铺
 2     @RequestMapping(value="/registershop", method= RequestMethod.POST )
 3     @ResponseBody
 4     public Map<String, Object> registerShop(HttpServletRequest request){
 5         Map<String, Object> modelMap = new HashMap<>();
 6         //判断验证码是否正确
 7         if(!CodeUtil.checkVerifyCode(request)){
 8             modelMap.put( "success", false );
 9             modelMap.put( "errMsg", "验证码错误" );
10             return modelMap;
11         }
12  
13  
14         //1.接收并转化相应的参数，包括店铺信息和图片信息
15         String shopStr = HttpServletRequestUtil.getString( request, "shopStr" );
16         ObjectMapper mapper = new ObjectMapper(); // create once, reuse
17         Shop shop = null;
18         try {
19             shop = mapper.readValue(shopStr, Shop.class);
20         } catch (IOException e) {
21             modelMap.put("success", false);
22             modelMap.put("errMsg", e.getMessage());
23             return modelMap;
24         }
25         CommonsMultipartFile shopImg = null;
26         //在本次会话的上下文获取上传的文件
27         CommonsMultipartResolver commonsMultipartResolver =
28                 new CommonsMultipartResolver(request.getSession().getServletContext());
29         //如果文件上传的有值
30         if(commonsMultipartResolver.isMultipart( request )){
31             MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest)request;
32             shopImg = (CommonsMultipartFile)multipartHttpServletRequest.getFile("shopImg");
33         } else{
34             modelMap.put( "success", false );
35             modelMap.put("errMsg", "上传图片不能为空");
36             return modelMap;
37         }
38         //2.注册店铺
39         if(shop != null && shopImg != null){
40             PersonInfo user = (PersonInfo) request.getSession().getAttribute("user");
41             shop.setOwner( user );
42             ShopExecution shopExecution = shopService.addShop(shop, shopImg);
43             if(shopExecution.getState() == ShopStateEnum.CHECK.getState()){
44                 modelMap.put( "success", true );
45  
46             }else{
47                 modelMap.put( "success", false );
48                 modelMap.put( "errMsg",  shopExecution.getStateInfo());
49             }
50         }else{
51             modelMap.put("success", false);
52             modelMap.put("errMsg", "请输入店铺信息");
53         }
54         //3.返回结果
55         return modelMap;
56     }

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

要在spring-web.xml中

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

还在pom.xml中添加

1 <!--文件上传-->
2     <!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
3     <dependency>
4       <groupId>commons-fileupload</groupId>
5       <artifactId>commons-fileupload</artifactId>
6       <version>1.3.2</version>
7     </dependency>