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

1.引入jar包

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

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

1 
2         
3         <dependency>
4             <groupId>net.coobirdgroupId>
5             <artifactId>thumbnailatorartifactId>
6             <version>0.4.8version>
7         dependency>

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

 1 
 2   <servlet>
 3     <servlet-name>Kaptchaservlet-name>
 4     <servlet-class>com.google.code.kaptcha.servlet.KaptchaServletservlet-class>
 5     
 6  
 7     
 8     <init-param>
 9       <param-name>kaptcha.borderparam-name>
10       <param-value>noparam-value>
11     init-param>
12  
13     
14     <init-param>
15       <param-name>kaptcha.textproducer.font.colorparam-name>
16       <param-value>redparam-value>
17     init-param>
18     
19     <init-param>
20       <param-name>kaptcha.textproducer.font.sizeparam-name>
21       <param-value>40param-value>
22     init-param>
23  
24     
25     <init-param>
26       <param-name>kaptcha.image.widthparam-name>
27       <param-value>135param-value>
28     init-param>
29     
30     <init-param>
31       <param-name>kaptcha.image.heightparam-name>
32       <param-value>50param-value>
33     init-param>
34  
35     
36     <init-param>
37       <param-name>kaptcha.textproducer.char.stringparam-name>
38       <param-value>abcdefghijklmn123654789param-value>
39     init-param>
40     
41     <init-param>
42       <param-name>kaptcha.textproducer.char.lengthparam-name>
43       <param-value>4param-value>
44     init-param>
45     
46     <init-param>
47       <param-name>kaptcha.textproducer.font.namesparam-name>
48       <param-value>Arialparam-value>
49     init-param>
50  
51     
52     <init-param>
53       <param-name>kaptcha.noise.colorparam-name>
54       <param-value>blackparam-value>
55     init-param>
56   servlet>
57    
58   <servlet-mapping>
59     <servlet-name>Kaptchaservlet-name>
60     <url-pattern>/Kaptchaurl-pattern>
61   servlet-mapping>

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

 1 
 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>

其中  

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 registerShop(HttpServletRequest request){
 5         Map 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         
5         <property name="maxUploadSize" value="20971502">property>
6         <property name="maxInMemorySize" value="20971502">property>
7     bean>

还在pom.xml中添加

1 
2     
3     <dependency>
4       <groupId>commons-fileuploadgroupId>
5       <artifactId>commons-fileuploadartifactId>
6       <version>1.3.2version>
7     dependency>

错误及其查错过程

https://www.cnblogs.com/windbag7/p/9317624.html

转载于:https://www.cnblogs.com/windbag7/p/9347076.html