SSM项目之商铺系统-店铺注册之js实现和店铺类别、区域信息的获取(十一)

本文主要是介绍SSM项目之商铺系统-店铺注册之js实现和店铺类别、区域信息的获取(十一)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

现在都是通过js 完成许多很复杂的功能

我们接下来实现js功能

$(function() {// 获取基本信息的URLvar initUrl = '/storepro/shopadmin/getshopinitinfo';// 注册店铺的URLvar registerShopUrl = '/storepro/shopadmin/registershop';// 调用函数，加载数据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// 如果是编辑，需要传入shopIdshop.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();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({// 动态判断 urlurl: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();}});});
});

我们实现了两个功能：

1.当我们点开注册商铺页面时，两个下拉框

需要自动从后台提取数据，显示在下拉框交给用户选择，由于我们主要是后台部分，我们在后台给前端提供一个接口，让前台去根据url获取数据，我们看controller方法实现：

思路：获取所有商铺类别写入一个map对象里，交给前端使用

步骤：

第一步：DAO层写一个查找所有商铺类别的接口，并通过mapper文件实现

传入一个商品类别实体类，@Param：这样在xml文件中原本的#{shopCategory}变为#{shopCategoryCondition} 

mapper文件：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">  
<mapper namespace="storepro.dao.ShopCategoryDao"><select id="queryShopCategory" resultType="shopCategory">SELECTshop_category_id ,shop_category_name,shop_category_desc,shop_category_img,priority,create_time,last_edit_time,parent_idFROMtb_shop_category<where><!--我们查询店铺的话都是查询二级店铺,就是有父类型店铺,一级店铺像是一个选择界面,点击后进入二级界面--><if test="shopCategoryCondition!= null">and parent_id IS  NOT  NULL</if><!--显示父类相同的店铺--><if test="shopCategoryCondition.parent != null">and parent_id=#{shopCategoryCondition.parent.shopCategoryId}</if></where>ORDER BY priorityDESC</select>
</mapper>

方法解释：我们查询了所有店铺类别的所有信息，第一个限定条件是非一级店铺，因为我们的一级店铺更像是一种分类

一级类别：

二级类别才是实体店铺：

第二个限定条件：通过传入的店铺类别，显示相同的父店铺为相同店铺的

获取地区信息的方法之前已经完成，我们直接实现获取店铺类别的方法：

ServiceImpl：

package storepro.service.impl;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import storepro.dao.ShopCategoryDao;
import storepro.entity.ShopCategory;
import storepro.service.ShopCategoryService;import java.util.List;
@Service
public class ShopCategoryServiceImpl implements ShopCategoryService {@AutowiredShopCategoryDao shopCategoryDao;@Overridepublic List<ShopCategory> getShopCategoryList(ShopCategory shopCategoryContidion) {return shopCategoryDao.queryShopCategory(shopCategoryContidion);}
}

没有多余的方法，直接调用Dao层的获取所有店铺类别的方法。

我们看controller层的实现：

package storepro.web.shopadmin;import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
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 storepro.dto.ShopExecution;
import storepro.entity.Area;
import storepro.entity.PersonInfo;
import storepro.entity.Shop;
import storepro.entity.ShopCategory;
import storepro.enums.ShopStateEnum;
import storepro.service.AreaService;
import storepro.service.ShopCategoryService;
import storepro.service.ShopService;
import storepro.util.CodeUtil;
import storepro.util.HttpServletRequestUtil;import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
import java.util.*;@Controller//注解它是一个controller@RequestMapping("/shopadmin")//根url
public class ShopManagementController {@Autowiredprivate ShopService shopService;@Autowiredprivate ShopCategoryService shopCategoryService;@Autowiredprivate AreaService areaService;@RequestMapping(value = "/getshopinitinfo",method = RequestMethod.GET)@ResponseBodyprivate  Map<String, Object> getShopInitInfo() throws JsonProcessingException {Map<String,Object> modelMap=new HashMap<String,Object>();List<ShopCategory> shopCategoryList=new ArrayList<ShopCategory>();List<Area> areaList=new ArrayList<Area>();//ObjectMapper objectMapper=new ObjectMapper();try {shopCategoryList=shopCategoryService.getShopCategoryList(new ShopCategory());areaList=areaService.getAreaList();modelMap.put("shopCategoryList", shopCategoryList);modelMap.put("areaList",areaList);modelMap.put("success",true);}catch (Exception e){modelMap.put("success",false);modelMap.put("errMsg",e.getMessage());//String str=objectMapper.writeValueAsString(modelMap);//return  str;return modelMap;}// String str=objectMapper.writeValueAsString(modelMap);//return  str;return modelMap;}}

controller方法简介：

思路：分别调用areaService和shopCategoryList的实现类的getAreaList()和shopCategoryList（）方法，来获得所有二类店铺信息。将他们装入map类型中。并且返回这个map交给前端处理。

这里有个问题卡了我很久

：https://blog.csdn.net/Sunmeok/article/details/81347453

这篇关于SSM项目之商铺系统-店铺注册之js实现和店铺类别、区域信息的获取(十一)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---