shop--6.店铺注册--店铺注册之js实现

1.获取初始的区域和类别

2.提交给后台

首先要有初始化的url，一加载此js，就执行此url，进行初始化

initUrl中的getshopinitinfo 是获取店铺分类和区域信息，进行前端的店铺分类和所属区域的下拉菜单的初始化

registerShopUrl 是进行店铺的注册，即在前面的WEB-INF/html/shop/shopoperation.html中添加的信息，通过此url返回给后台的Controller处理，进行店铺的注册

js页面的调试：运行Tomcat，在Chrome中按F12，找到sources，在其中找到js页面，然后打上断点就可以了，F10是步过，F8是跳过

其中加入了

getShopInitInfo()  获取店铺初始信息

getShopInfo(shopId)  通过传入的shopId，查询shop的信息，然后获取到js页面中，为后面修改shop信息做准备

$('#submit')  提交店铺信息的按钮

/**
 * 
 */
// 从后台获取到区域信息和地区信息 填充进去
$(function() {
    var shopId = getQueryString('shopId');
    var isEdit = shopId ? true : false;

    var initUrl = '/o2o/shopadmin/getshopinitinfo';
    var registerShopUrl = '/o2o/shopadmin/registershop';
    var shopInfoUrl = '/o2o/shopadmin/getshopbyid?shopId=' + shopId;
    var editShopUrl = '/o2o/shopadmin/modifyshop';
    if (!isEdit) {
        getShopInitInfo();
    } else {
        getShopInfo(shopId);
    }
    function getShopInfo(shopId) {
        $.getJSON(shopInfoUrl, function(data) {
            if (data.success) {
                var shop = data.shop;
                $('#shop-name').val(shop.shopName);
                $('#shop-addr').val(shop.shopAddr);
                $('#shop-phone').val(shop.phone);
                $('#shop-desc').val(shop.shopDesc);
                var shopCategory = '<option data-id="'
                        + shop.shopCategory.shopCategoryId + '" selected>'
                        + shop.shopCategory.shopCategoryName + '</option>';
                var tempAreaHtml = '';
                data.areaList.map(function(item, index) {
                    tempAreaHtml += '<option data-id="' + item.areaId + '">'
                            + item.areaName + '</option>';
                });
                $('#shop-category').html(shopCategory);
                $('#shop-category').attr('disabled', 'disabled');
                $('#area').html(tempAreaHtml);
                $("#area option[data-id='"+shop.area.areaId+"']").attr('data-id', shop.areaId);
            }
        });
    }
    function getShopInitInfo() {
        $.getJSON(initUrl, function(data) {
            if (data.success) {
                var tempHtml = '';
                var tempAreaHtml = '';
                data.shopCategoryList.map(function(item, index) {
                    tempHtml += '<option data-id="' + item.shopCategoryId
                            + '">' + item.shopCategoryName + '</option>';
                });
                data.areaList.map(function(item, index) {
                    tempAreaHtml += '<option data-id="' + item.areaId + '">'
                            + item.areaName + '</option>';
                });
                $('#shop-category').html(tempHtml);
                $('#area').html(tempAreaHtml);
            }
        });
    }
    //
    $('#submit').click(function() {
        var shop = {};
        if(isEdit){
            shop.shopId = shopId;
        }
        shop.shopName = $('#shop-name').val();
        shop.shopAddr = $('#shop-addr').val();
        shop.phone = $('#shop-phone').val();
        shop.shopDesc = $('#shop-desc').val();
        shop.shopCategory = {
            shopCategoryId : $('#shop-category').find('option').not(function() {
                return !this.selected;
            }).data('id')
        };
        shop.area = {
            areaId : $('#area').find('option').not(function() {
                return !this.selected;
            }).data('id')
        };
        var shopImg = $('#shop-img')[0].files[0];
        var formData = new FormData();
        formData.append('shopImg', shopImg);
        formData.append('shopStr', JSON.stringify(shop));
        var verifyCodeActual = $('#j_captcha').val();
        if (!verifyCodeActual) {
            $.toast('请输入验证码!');
            return;
        }
        formData.append('verifyCodeActual', verifyCodeActual);
        $.ajax({
            url : (isEdit ? editShopUrl : registerShopUrl),
            type : 'POST',
            data : formData,
            contentType : false,
            processData : false,
            cache : false,
            success : function(data) {
                console.log(data)
                if (data.success) {
                    $.toast('提交成功');
                } else {
                    $.toast('提交失败' + data.errMsg);
                }
                $('#captcha_img').click();
            },
            error : function(err) {
                console.log(err.status);
                console.log('异常');
            }

        });
    });
})

然后在shopoperation.html中添加js的标签

<script type='text/javascript' src='../resources/js/shop/shopoperation.js' charset='utf-8'></script>

其中的initUrl='/shopadmin/getshopinitinfo'; 中的初始化调用方法

@RequestMapping(value="getshopinitinfo", method=RequestMethod.GET)
    @ResponseBody
    public Map<String, Object> getShopInitInfo(){
        Map<String, Object> modelMap = new HashMap<>();
        List<ShopCategory> shopCategoryList = new ArrayList<>(  );
        List<Area> areaList = new ArrayList<>(  );
        try{
            shopCategoryList = shopCategoryService.getShopCategoryList( new ShopCategory() );
            areaList = areaService.getAreaList();
        } catch(Exception e){
            modelMap.put("success", false);
            modelMap.put("errMsg", e.toString());
        }
        modelMap.put( "shopCategoryList", shopCategoryList );
        modelMap.put( "areaList", areaList );
        modelMap.put( "success", true );
        return modelMap;
 
    }