shop--6.店铺注册--使用Kaptcha实验验证码功能
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="点击更换" onclick="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>
错误及其查错过程
