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

后面接shop--7.店铺编辑和列表--更新店铺的信息 前端实现 js

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

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

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

其中

js其实就是一个静态页面，使用script标签嵌入到html页面中 

注意，在这里之前有编写错误，.data('id')后面加了 ; 导致js页面不能加载，又不报错，觉得好无奈哦，居然不报错。唉。只怪自己太大意了。

这个js是在html页面加载时就调用相应的url，来加载店铺的初始化信息的。

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

其中加入了

getShopInitInfo()  获取店铺初始信息

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

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

　　

$(function(){
    //通过该方法获取是否传了shopId  如果传了shopId，则是对shop进行更新，否则就是进行注册
    var shopId=getQueryString('shopId');
    var isEdit=shopId ? true : false;


    var initUrl='/shopadmin/getshopinitinfo';
    var registerShopUrl='/shopadmin/registershop';

    var shopInfoUrl='/shopadmin/getshopbyid?shopId=' + shopId;
    var editShopUrl='/shopadmin/modifyshop';
    //通过isEdit来判断是修改店铺信息还是注册店铺，来调用不同的方法
    if(!isEdit){
        getShopInitInfo();
    } else{
        getShopInfo(shopId);
    }

    /*此方法是获取店铺分类和区域信息，进行前端的店铺分类和所属区域的下拉菜单的初始化*/
    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);
            }
        });
    }


    //通过传入的shopId，查询shop的信息，然后获取到js页面中，为后面修改shop信息做准备
    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);
                //将shopCategory的信息以option的形式保存，然后赋值到下面的shop_category，并且它的attr是disabled的（不可选择的）
                //area是以下拉列表的形式保存，area的attr默认选择的是现在的店铺区域信息
                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("selected", "selected");
            }
        });
    }

    //提交按钮，将店铺信息提交到后台进行处理 url根据isEdit来分情况选择
    $('#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];
        //在ajax中传递的参数
        var formData = new FormData();
        //参数的内容，分别是上面的shop和shop图片
        formData.append('shopImg', shopImg);
        formData.append('shopStr', JSON.stringify(shop));
        var verifyCodeActual = $('#j_kaptcha').val();
        if(!verifyCodeActual){
            $.toast('请输入验证码！');
            return;
        }
        formData.append('verifyCodeActual', verifyCodeActual);
        /*使用ajax提交到后台*/
        $.ajax({
            url:(isEdit?editShopUrl: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的标签

<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;

    }