【校园商铺SSM-11】店铺注册--前端设计
文章目录
-
-
- 1. 借助SUI Mobile前端工具编写shopoperation.html页面
- 2. 编写ShopAdminController访问shopoperation.html
- 3. shopoperation.js文件的编写
- 4. 引入kaptcha实现验证码
- 5. 完整Controller层
-
1. 借助SUI Mobile前端工具编写shopoperation.html页面
访问地址：SUI Mobile访问地址.
进入下面的表单页面：.
表单页面右键选择网页源码：复制网页源码粘贴到shopoperation.html中：
进入SUI Mobile开始使用页面.
根据需求修改shopoperation.html页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>商铺注册</title>
<meta name="description"
content="MSUI: Build mobile apps with simple HTML, CSS, and JS components.">
<meta name="author" content="阿里巴巴国际UED前端">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!--
<link rel="shortcut icon" href="/favicon.ico">
-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<!-- Google Web Fonts -->
<link rel="stylesheet"
href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet"
href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?ba76f8230db5f616edc89ce066670710";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
<div class="page-group">
<div id="page-label-input" class="page">
<header class="bar bar-nav">
<!--
<a class="button button-link button-nav pull-left back"
href="/demos/form"> <span class="icon icon-left"></span> 返回
</a>
-->
<h1 class="title">商铺注册</h1>
</header>
<div class="content">
<div class="list-block">
<!--根据tb_shop中的字段，店铺信息的页面编写出来-->
<ul>
<!-- 商铺名称 -->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">商铺名称</div>
<div class="item-input">
<!-- 添加id 便于在js中操作 -->
<input type="text" id="shop-name" placeholder="商铺名称">
</div>
</div>
</div>
</li>
<!-- 商铺分类 下拉列表 -->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">商铺分类</div>
<div class="item-input">
<!-- 增加id,便于js中操作，需要从后台读取数据 -->
<select id="shop-category">
</select>
</div>
</div>
</div>
</li>
<!-- 所属区域 下拉列表 - -->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">所属区域</div>
<div class="item-input">
<select id="shop-area">
</select>
</div>
</div>
</div>
</li>
<!-- 详细地址 text-->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">详细地址</div>
<div class="item-input">
<!-- 添加id 便于在js中操作 -->
<input type="text" id="shop-addr" placeholder="详细地址">
</div>
</div>
</div>
</li>
<!-- 商铺电话 text-->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">商铺电话</div>
<div class="item-input">
<!-- 添加id 便于在js中操作 -->
<input type="text" id="shop-phone" placeholder="商铺电话">
</div>
</div>
</div>
</li>
<!-- 商铺图片上传组件-->
<li class="item-content">
<div class="item-inner">
<div class="item-inner">
<div class="item-title label">商铺图片</div>
<div class="item-input">
<input type="file" id="shop-img">
</div>
</div>
</div>
</li>
<!-- 商铺简介 textarea-->
<li class="align-top">
<div class="item-content">
<div class="item-inner">
<div class="item-title label">商铺简介</div>
<div class="item-input">
<textarea id="shop-desc" placeholder="商铺简介"></textarea>
</div>
</div>
</div>
</li>
<!-- 验证码 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>
</ul>
</div>
<div class="content-block">
<div class="row">
<div class="col-50">
<!-- 点击返回，回到商铺管理页面 TODO -->
<a href="#" class="button button-big button-fill button-danger">返回</a>
</div>
<div class="col-50">
<!-- 增加id ,便于js操作 -->
<a href="#" class="button button-big button-fill button-success" id="submit">提交</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 将css写在头部，将js写在尾部，为了更好地用户体验 -->
<script type='text/javascript'
src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript'
src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript'
src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<!-- 加载自定义的JS -->
<script type='text/javascript'
src='../resources/js/shop/shopoperation.js' charset='utf-8'></script>
<script type='text/javascript'
src='../resources/js/common/common.js' charset='utf-8'></script>
</body>
</html>
由于商铺图片的类型为file因此需要在pom.xml中添加与文件上传相关的jar包：
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.2</version>
</dependency>
同时在spring-web中配置文件上传解析器：
<!--配置文件上传解析器-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!--默认字符集编码-->
<property name="defaultEncoding" value="utf-8"/>
<!-- 设置上传文件最大尺寸，1024*1024*20-->
<property name="maxUploadSize" value="20971520" />
<!--最大内存-->
<property name="maxInMemorySize" value="20971520"/>
</bean>
2. 编写ShopAdminController访问shopoperation.html
由于shopoperation.html文件放在webapp下面的路径下面，因此没有办法通过前端的Url进行访问，只能在controller层编写后台路由访问：
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
@RequestMapping(value = "/shopadmin",method = RequestMethod.GET)
public class ShopAdminController {
@RequestMapping(value = "/shopoperation")
public String shopOperation(){
return "shop/shopoperation";
}
}
3. shopoperation.js文件的编写
操作html页面获取初始的信息：
1.获取商铺分类和所属区域的列表信息
2.点击提交的时候将表单的信息全部获取到，通过ajax转发到后台
两个功能：
1.从后台获取店铺分类信息和区域信息，将这些信息填充到前台html页面中
2.将表单的信息获取到，转发到后台注册店铺
$(function() {
// 获取基本信息的URL
var initUrl = '/o2o/shopadmin/getshopinitinfo';
// 注册店铺的URL
var registerShopUrl = '/o2o/shopadmin/registshop';
// 调用函数，加载数据
getShopInitInfo();
/**
* 从后台加载获取下拉菜单的值
*/
function getShopInitInfo() {
$.getJSON(initUrl, function(data) {
if (data.success) {
var tempShopCategoryHtml = '';
var tempShopAreaHtml = '';
data.shopCategoryList.map(function(item, index) {
tempShopCategoryHtml += '<option data-id="'
+ item.shopCategoryId + '">' + item.shopCategoryName
+ 'option>';
});
data.areaList.map(function(item, index) {
tempShopAreaHtml += '<option data-id="' + item.areaId
+ '">' + item.areaName + 'option>';
});
// 获取html中对应标签的id 赋值
$('#shop-category').html(tempShopCategoryHtml);
$('#shop-area').html(tempShopAreaHtml)
}else{
$.toast(data.errMsg);
}
});
};
/**
* submit按钮触发的操作
*/
$('#submit').click(function() {
// 获取页面的值
var shop = {};
// 注意： 这个地方的变量名称要和Shop实体类中的属性保持一致，因为后台接收到shopStr后，会将Json转换为实体类，如果不一致会抛出异常
// com.fasterxml.jackson.databind.exc.UnrecognizedPropertyException
shop.shopName = $('#shop-name').val();
shop.shopAddr = $('#shop-addr').val();
shop.phone = $('#shop-phone').val();
shop.shopDesc = $('#shop-desc').val();
// 选择id,双重否定=肯定
shop.shopCategory = {
// 这里定义的变量要和ShopCategory.shopCategoryId保持一致，否则使用databind转换会抛出异常
shopCategoryId:$('#shop-category').find('option').not(function(){
return !this.selected;
}).data('id')
};
shop.area = {
// 这里定义的变量要和Area.areaId属性名称保持一致，否则使用databind转换会抛出异常
areaId:$('#shop-area').find('option').not(function(){
return !this.selected;
}).data('id')
};
// 图片
var shopImg = $('#shop-img')[0].files[0];
// 验证码
var verifyCodeActual =$('#j_kaptcha').val();
console.log('verifyCodeActual:'+verifyCodeActual);
if(!verifyCodeActual){
$.toast('请输入验证码');
return;
}
// 接收数据
var formData = new FormData();
// 和后端约定好，利用shopImg和 shopStr接收 shop图片信息和shop信息
formData.append('shopImg',shopImg);
// 转成JSON格式，后端收到后将JSON转为实体类
formData.append('shopStr',JSON.stringify(shop));
// 将数据封装到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('提交成功！');
}else{
$.toast('提交失败' + data.errMsg);
}
// 点击提交后 不管成功失败都更换验证码，防止重复提交
$('#kaptcha_img').click();
}
});
});
});
在shopoperation.html中引入我们定义的js文件：
4. 引入kaptcha实现验证码
验证在shopoperation.html文件和shopoperation.js中的编写已经完成，现在讲解整个验证码的流程：
1.在pom.xml问价中引入验码的jar包：
<dependency>
<groupId>com.github.pengglegroupId>
<artifactId>kaptchaartifactId>
<version>2.3.2version>
dependency>
2.在web.xml中配置servlet，负责生成验证码：
<!-- 生成图片的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>
<!-- 图片宽度 -->
<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>
3.在shopoperation.html中引入验证码组件：
4.在common.js文件中实现changeVerifyCode()方法：
function changeVerifyCode(img){
//提示servlet生成新的验证码
img.src="../Kaptcha?" + Math.floor(Math.random() * 1000)
}
并且在shopoperation.html中引入自定义的common.js文件：
5.在shopoperation.js文件中编写接收验证码代码：
同时不管提交成功还是失败都希望改变验证码：
6.编写CodeUtil判断验证码是否符合预期的验证码：
import javax.servlet.http.HttpServletRequest;
public class CodeUtil {
public static boolean verifyCode(HttpServletRequest request) {
// 图片中的验证码
String verifyCodeExpected = (String) request.getSession().getAttribute(
com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
// 用户输入的验证码
String verifyCodeActual = HttpServletRequestUtil.getString(request,
"verifyCodeActual");
if (verifyCodeActual == null
|| !verifyCodeActual.equalsIgnoreCase(verifyCodeExpected)) {
return false;
}
return true;
}
}
7.将工具类引入controller层店铺注册，判断验证码
//先判断验证码是否正确
if (!CodeUtil.verifyCode(request)){
//当验证码错误时
modelMap.put("success",false);
modelMap.put("errMsg","输入了错误的验证码");
return modelMap;
}
5. 完整Controller层
package com.imooc.o2o.web.shopadmin;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.imooc.o2o.dto.ShopExecution;
import com.imooc.o2o.entity.Area;
import com.imooc.o2o.entity.PersonInfo;
import com.imooc.o2o.entity.Shop;
import com.imooc.o2o.entity.ShopCategory;
import com.imooc.o2o.enums.ShopStateEnum;
import com.imooc.o2o.service.AreaService;
import com.imooc.o2o.service.ShopCategoryService;
import com.imooc.o2o.service.ShopService;
import com.imooc.o2o.util.CodeUtil;
import com.imooc.o2o.util.HttpServletRequestUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartFile;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
import javax.servlet.http.HttpServletRequest;
import java.io.*;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Controller
@RequestMapping("/shopadmin")
public class ShopManagementController {
@Autowired
private ShopService shopService;
@Autowired
private ShopCategoryService shopCategoryService;
@Autowired
private AreaService areaService;
@RequestMapping(value = "/getshopinitinfo", method = RequestMethod.GET)
@ResponseBody
public Map<String, Object> getshopinitinfo() {
Map<String, Object> modelMap = new HashMap<String, Object>();
List<ShopCategory> shopCategoryList = null;
List<Area> areaList = null;
try {
shopCategoryList = shopCategoryService.getShopCategoryList(new ShopCategory());
areaList = areaService.getAreaList();
// 返回success shopCategoryList areaList,前端通过 data.success来判断从而展示shopCategoryList和areaList的数据
modelMap.put("success", true);
modelMap.put("shopCategoryList", shopCategoryList);
modelMap.put("areaList", areaList);
} catch (Exception e) {
modelMap.put("success", false);
modelMap.put("errMsg", e.getMessage());
}
return modelMap;
}
@RequestMapping(value="/registshop",method = RequestMethod.POST)
@ResponseBody
private Map<String,Object> registerShop(HttpServletRequest request){
Map<String,Object> modelMap=new HashMap<String,Object>();
//先判断验证码是否正确
if (!CodeUtil.verifyCode(request)){
//当验证码错误时
modelMap.put("success",false);
modelMap.put("errMsg","输入了错误的验证码");
return modelMap;
}
//1.接受转换相应的参数,包括店铺信息和店铺图片信息
String shopStr = HttpServletRequestUtil.getString(request,"shopStr");//通过转换工具类将前端传来的数据转为字符串
ObjectMapper mapper=new ObjectMapper();//获取处理json的对象
//定义一个Shop实体类来接收起前端传来的信息
Shop shop=null;
try{
shop=mapper.readValue(shopStr,Shop.class);//将传入的shopStr转为Shop对象并完成赋值
}catch (Exception e){
//出错后输出错误信息
modelMap.put("success",false);
modelMap.put("errMsg",e.getMessage());
return modelMap;
}
/*
* 操作添加图片
* */
CommonsMultipartFile shopImg=null;//spring自带
CommonsMultipartResolver commonsMultipartResolver=new CommonsMultipartResolver(
request.getSession().getServletContext()
);//解析request传来的文件的,通过本次会话的上下文获取相关文件上传的内容
if (commonsMultipartResolver.isMultipart((request))) {
//如果有上传的文件流
MultipartHttpServletRequest multipartHttpServletRequest= (MultipartHttpServletRequest) request;//这样就能提取出request中的文件流了
shopImg=(CommonsMultipartFile)multipartHttpServletRequest.getFile("shopImg");//(这个字符串"shopImg"是前端传来的),得到文件
}else {
//如果不具备图片
modelMap.put("success",false);
modelMap.put("errMsg","上传图片不能为空");
return modelMap;
}
// 2.注册店铺
if (shop!=null&&shopImg!=null) {
//如果接受完相应的参数
PersonInfo owner=new PersonInfo();//owner的信息可以通过session获取
owner.setUserId(2L);//先手动设置，后期更改
shop.setOwner(owner);
ShopExecution shopExecution= null;//不能直接传文件，因为CommonsMultipartFile和File不能直接转换
try {
shopExecution = shopService.addShop(shop,shopImg.getInputStream(),shopImg.getOriginalFilename());
if (shopExecution.getState()== ShopStateEnum.CHECK.getState()){
//如果操作成功
modelMap.put("success",true);
}else {
modelMap.put("success",false);
modelMap.put("errMsg",shopExecution.getStateInfo());
return modelMap;
}
} catch (IOException e) {
e.printStackTrace();
}
return modelMap;
}else{
modelMap.put("success",false);
modelMap.put("errMsg","请输入店铺信息");
return modelMap;
}
}
}