【校园商铺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() {// 获取基本信息的URLvar initUrl = '/o2o/shopadmin/getshopinitinfo';// 注册店铺的URLvar 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.UnrecognizedPropertyExceptionshop.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.penggle</groupId><artifactId>kaptcha</artifactId><version>2.3.2</version>
</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 {@Autowiredprivate ShopService shopService;@Autowiredprivate ShopCategoryService shopCategoryService;@Autowiredprivate AreaService areaService;@RequestMapping(value = "/getshopinitinfo", method = RequestMethod.GET)@ResponseBodypublic 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)@ResponseBodyprivate 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;}}
}