shop--6.店鋪註冊--使用kaptcha實現驗證碼
阿新 • • 發佈：2018-04-19
ssa p s request ava edi eth ring formdata input
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>
shop--6.店鋪註冊--使用kaptcha實現驗證碼