实战SSM_O2O商铺_14【商铺注册】View层之验证码kaptcha组件
生活随笔
收集整理的這篇文章主要介紹了
实战SSM_O2O商铺_14【商铺注册】View层之验证码kaptcha组件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- Kaptcha概述
- maven依賴
- web.xml配置Kaptcha對應的servlet，設置屬性
- 頁面
- shopoperation.html中定義組件
- common.js
- shopoperation.js使用
- spring-web.xml配置multipartResolver
- 控制層
- 封裝校驗驗證碼的工具類
- 控制層獲取驗證碼做校驗
- Github地址
Kaptcha概述
GitHub:
https://github.com/penggle/kaptcha
官網
http://code.google.com/p/kaptcha/
Kaptcha是基于SimpleCaptcha的開源項目。通過調整Kaptcha配置可以生成各種樣式的驗證碼。
Kaptcha提供的功能如下：
-
驗證碼的字體
-
驗證碼字體的大小
-
驗證碼字體的字體顏色
-
驗證碼內容的范圍
-
驗證碼圖片的大小，邊框，邊框粗細，邊框顏色
-
驗證碼的干擾線
-
驗證碼的樣式
maven依賴
<!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha --><dependency><groupId>com.github.penggle</groupId><artifactId>kaptcha</artifactId><version>2.3.2</version></dependency>web.xml配置Kaptcha對應的servlet，設置屬性
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaeehttp://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"version="3.1" metadata-complete="true"><!-- 配置DispatcherServlet -->.........省略.........省略<!-- 為避免編碼不一致,一般情況下都需要增加編碼過濾器 -->.........省略.........省略<!-- 生成圖片的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></web-app>頁面
shopoperation.html中定義組件
/o2o/src/main/webapp/WEB-INF/html/shop/shopoperation.html
輸入部分input ：設置id,便于js中操作
圖片部分img ：設置id, 定義onClick事件,通過src屬性，調用對應的servlet
<!-- 驗證碼 kapa--><li><div class="item-content"><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"> <!-- src是找到web.xml中 對應的servlet的名字 --></div></div></div></li>最后引用自定義的common.js
<script type='text/javascript'src='../resources/js/common/common.js' charset='utf-8'></script>common.js
/o2o/src/main/webapp/resources/js/common/common.js
點擊觸發更換驗證碼
function changeVerifyCode(img){img.src="../Kaptcha?" + Math.floor(Math.random() * 1000) }shopoperation.js使用
/o2o/src/main/webapp/resources/js/shop/shopoperation.js
通過html中設置的id值，獲取輸入屬性，做了一層很弱的校驗，并封裝到formData中利用ajax發送到后臺
/*** submit按鈕觸發的操作*/$('#submit').click(function() {// 獲取頁面的值var shop = {};.........省略.........省略// 驗證碼var verifyCodeActual =$('#j_kaptcha').val();console.log('verifyCodeActual:'+verifyCodeActual);if(!verifyCodeActual){$.toast('請輸入驗證碼');return;}// 接收數據var formData = new FormData();// 將數據封裝到formData發送到后臺formData.append('verifyCodeActual',verifyCodeActual);.........省略.........省略// 利用ajax提交$.ajax({url:registerShopUrl,type:'POST',data:formData,contentType:false,processData:false,cache:false,success:function(data){if(data.success){$.toast('提示信息:'+data.errMsg);}else{$.toast('提示信息:' + data.errMsg);}// 點擊提交后 不管成功失敗都更換驗證碼，防止重復提交$('#kaptcha_img').click();}});});spring-web.xml配置multipartResolver
/o2o/src/main/resources/spring/spring-web.xml
我們的首頁使用了文件上傳，以及驗證碼（圖片），multipart類型。 Spring需要multipartResolver來接收解析這部分流。 如果不配置的話，無法獲取到輸入的驗證碼。
<!-- 文件上傳解析器 --><bean id="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="defaultEncoding" value="utf-8"></property><property name="maxUploadSize" value="10485760000"></property><!-- 最大上傳文件大小 --><property name="maxInMemorySize" value="10960"></property></bean>控制層
封裝校驗驗證碼的工具類
package com.artisan.o2o.util;import javax.servlet.http.HttpServletRequest;import org.slf4j.Logger; import org.slf4j.LoggerFactory;public class VerifyCodeUtil {private static final Logger logger = LoggerFactory.getLogger(VerifyCodeUtil.class);/*** * * @Title: verifyCode* * @Description:驗證碼校驗* * @param request* 前端HttpServletRequest* @return* * @return: boolean*/public static boolean verifyCode(HttpServletRequest request) {// 圖片中的驗證碼String verifyCodeExpected = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);logger.debug("verifyCodeExpected:{}", verifyCodeExpected);// 用戶輸入的驗證碼String verifyCodeActual = HttPServletRequestUtil.getString(request,"verifyCodeActual");logger.debug("verifyCodeActual:{}", verifyCodeActual);if (verifyCodeActual == null|| !verifyCodeActual.equalsIgnoreCase(verifyCodeExpected)) {return false;}return true;} }控制層獲取驗證碼做校驗
在 ShopController#registerShop()中，首先進行驗證碼的校驗工作，使用封裝的工具類，如果輸入錯誤，直接返回給前端，將錯誤結果放入modelMap中。
// 0. 驗證碼校驗if (!VerifyCodeUtil.verifyCode(request)) {modelMap.put("success", false);modelMap.put("errMsg", "驗證碼不正確");return modelMap;}Github地址
代碼地址： https://github.com/yangshangwei/o2o
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的实战SSM_O2O商铺_14【商铺注册】View层之验证码kaptcha组件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 实战SSM_O2O商铺_13【商铺注册】
- 下一篇： 实战SSM_O2O商铺_15【商铺注册】