SSM到Spring Boot从零开发校园商铺平台---4、店铺注册功能模块（二）

个人原因，项目搁置了一段时间，继续更新：

系列文章：
1、环境搭建及测试- - -附免费视频教程
专栏14篇，参看：http://tyronblog.com/tags/school-o2o
GitHub地址：https://github.com/tyronczt/imooc-o2o
线上演示地址：http://o2o.tyronblog.com:8090/o2o/front/index

先上效果图：

一、使用SUI Mobile编写前端代码

1、shopoperation.html
参照SUI Mobile官网示例，添加相应组件；
注意事项：将css写在头部，将js写在尾部，为了更好地用户体验。
2、shopoperation.js
实现店铺注册逻辑。
注意事项：注意单词的拼写，因为shopCategory手写缘故，拼错了，虽然有报错：Unrecognized field, not marked as ignorable，但是找了好久才找到错误所在，所以属性名能复制的尽量复制，另外在属性名定义上也要尽量规范。

二、验证码功能的实现（kaptcha）

1、引入依赖

	com.github.penggle
	kaptcha
	2.3.2

2、添加Servlet，并配置参数

	
	Kaptcha
	com.google.code.kaptcha.servlet.KaptchaServlet
    
	
		kaptcha.border
		no
	 
	
	...




	Kaptcha
	/Kaptcha

3、页面中引用

	

		

			
验证码
			
			

				
			
		
	

4、js控制更换验证码逻辑

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

5、后端校验验证码

public static boolean checkVerifyCode(HttpServletRequest request) {
	// 获取输入的校验码
	String verifyCodeActual = HttpServletRequestUtil.getString(request, "verifyCodeActual");
	// 获取图片中的校验码
	String verifyCodeExpexted = (String) request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);
	// 对比
	if (verifyCodeActual == null || !verifyCodeActual.equalsIgnoreCase(verifyCodeExpexted)) {
		return false;
	}
	return true;
}