程序员社区

【校园商铺SSM-25】商品编辑--Controller+View+前后端联调的实现

文章目录

      • 1. Controller层的实现
        • 1. getProductById
        • 2. modifyProduct
      • 2. View层的实现
      • 3. 前后端联合调试

1. Controller层的实现

1. getProductById

@RequestMapping(value = "/getproductbyid",method = RequestMethod.GET)
@ResponseBody
private Map<String,Object> getProductById(@RequestParam Long productId){
    Map<String,Object> modelMap = new HashMap<>();
    //非空判断
    if(productId>-1){
        //获取商品信息
        Product product = productService.getProductById(productId);
        //获取该店铺下的商品类别列表
        List<ProductCategory> productCategoryList
                = productCategoryService.getProductCategoryList(product.getShop().getShopId());
        modelMap.put("product",product);
        modelMap.put("productCategoryList",productCategoryList);
        modelMap.put("success",true);
    }else{
        modelMap.put("success",false);
        modelMap.put("errMsg","empty producted");
    }
    return modelMap;
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2. modifyProduct

@RequestMapping(value = "/modifyproduct",method = RequestMethod.POST)
@ResponseBody
private Map<String,Object> modifyProduct(HttpServletRequest request){
    Map<String,Object> modelMap = new HashMap<>();
    //判断是商品编辑还是商品上下架
    boolean statusChange = HttpServletRequestUtil.getBoolean(request,"statusChange");
    //如果为商品编辑就进行验证码判断,后者不进行
    if(!statusChange && !CodeUtil.verifyCode(request)){
        modelMap.put("success",false);
        modelMap.put("errMsg","输入了错误的验证码");
        return modelMap;
    }

    //接收前端参数的变量的初始化,包括商品,缩略图,详情图列表实体类
    //1.图片
    MultipartHttpServletRequest multipartRequest = null;
    ImageHolder thumbnail = null;
    List<ImageHolder> productImgList = new ArrayList<>();
    //从Session中获取文件流
    CommonsMultipartResolver multipartResolver
            = new CommonsMultipartResolver(request.getSession().getServletContext());
    try {
        //如果请求中有文件流,那么取出相关的文件(包括缩略图和详情图)
        if(multipartResolver.isMultipart(request)){
            multipartRequest = (MultipartHttpServletRequest)request;
            //取出缩略图并构建ImageHolder对象
            CommonsMultipartFile thumbnailFile
                    = (CommonsMultipartFile)multipartRequest.getFile("thumbnail");
            thumbnail
                    = new ImageHolder(thumbnailFile.getOriginalFilename(),thumbnailFile.getInputStream());

            //取出详情图列表并构建List<ImageHolder>列表对象,最多支持6张图片上传
            for(int i=0;i<IMAGEMAXCOUNT;i++){
                CommonsMultipartFile productImgFile
                        = (CommonsMultipartFile)multipartRequest.getFile("productImg"+i);
                if(productImgFile!=null){
                    //如果取出的第i个详情图片不为空,那么将其加入详情图列表
                    ImageHolder productImg =
                            new ImageHolder(productImgFile.getOriginalFilename(),productImgFile.getInputStream());
                    productImgList.add(productImg);
                }else{
                    //如果取出的第i个详情图片文件为空,则终止循环
                    break;
                }
            }
        }
    } catch (Exception e) {
        modelMap.put("success",false);
        modelMap.put("errMsg",e.toString());
        return modelMap;
    }

    //2.商品实体类
    ObjectMapper mapper = new ObjectMapper();
    Product product = null;
    String productStr = HttpServletRequestUtil.getString(request,"productStr");
    try {
        //尝试获取前台穿来的表单将其装换为Product实体类
        product = mapper.readValue(productStr,Product.class);
    } catch (Exception e) {
        modelMap.put("success",false);
        modelMap.put("errMsg",e.toString());
        return modelMap;
    }
    //进行商品信息更新
    if(product!=null){
        try {
            //从session中获取当前店铺的id并赋值给product,减少对前端数据的依赖
            Shop currentShop = (Shop)request.getSession().getAttribute("currentShop");
            product.setShop(currentShop);
            //开始对商品信息变更操作
            ProductExecution productExecution
                    = productService.modifyProduct(product,thumbnail,productImgList);
            if(productExecution.getState()==ProductStateEnum.SUCCESS.getState()){
                modelMap.put("success",true);
            }else{
                modelMap.put("success",false);
                modelMap.put("errMsg",productExecution.getStateInfo());
            }
        } catch (ProductOperationException e) {
            modelMap.put("success",false);
            modelMap.put("errMsg",e.toString());
            return modelMap;
        }
    }else{
        modelMap.put("success",false);
        modelMap.put("errMsg","请输入商品信息");
    }
    return modelMap;
}

2. View层的实现

productoperation.js文件:

$(function(){
    //通过url是否含有productId来判断是添加商品还是编辑
    var productId = getQueryString('productId');
    // 标示符  productId非空则为true即编辑,否则为添加商品
    var isEdit = productId ? true : false ;

    // 商品添加URL 用于提交
    var addProductURL = '/o2o/shopadmin/addproduct';
    // 商品编辑URL 用于提交
    var editProductURL = '/o2o/shopadmin/modifyproduct?productId=' + productId;
    // 获取商品初始化信息的URL  根据页面原型只需要获取productCategory即可,后台调用之前写好的路由方法即可
    var categoryInfoURL = '/o2o/shopadmin/getproductcategorylist';
    // 商品编辑URL 用于从后台加载该product的基本信息,页面展示用
    var productInitURL = '/o2o/shopadmin/getproductbyid?productId=' + productId;



    // 通过标示符,确定调用的方法
    if(isEdit){
        // 为true,则根据productId调用获取product信息的方法
        showEditProductPage(productId);
    }else{
        // 为false,则初始化新增product页面
        showAddProductPage();
    }

    /**
     * 始化新增product页面
     *
     * 根据页面原型和数据模型,需要加载该shop对应的productCategory信息(shop信息从服务端session中获取)
     */
    function showAddProductPage(){
        $.getJSON(categoryInfoURL,
            function(data){
                if(data.success){
                    // 设置product_category
                    var productCategoryList = data.data;
                    var productCategoryTempHtml = '';
                    productCategoryList.map(function(item, index) {
                        productCategoryTempHtml
                            += '<option data-value="'
                            + item.productCategoryId
                            + '">'
                            + item.productCategoryName
                            + '</option>';
                    });
                    $('#product-category').html(productCategoryTempHtml);
                }else{
                    $.toast(data.errMsg)
                }
            });
    };

    /**
     * 点击控件的最后一个且图片数量小于6个的时候,生成一个选择框
     */
    $('.detail-img-div').on('change', '.detail-img:last-child', function() {
        if ($('.detail-img').length < 6) {
            $('#detail-img').append('<input type="file" class="detail-img">');
        }
    });


    /**
     * 编辑页面调用的function
     */
    function showEditProductPage(productId){
        $.getJSON(
            productInitURL,
            function(data) {
                if (data.success) {
                    var product = data.product;
                    $('#product-name').val(product.productName);
                    $('#product-desc').val(product.productDesc);
                    $('#priority').val(product.priority);
                    $('#normal-price').val(product.normalPrice);
                    $('#promotion-price').val(
                        product.promotionPrice);

                    var optionHtml = '';
                    var optionArr = data.productCategoryList;
                    var optionSelected = product.productCategory.productCategoryId;
                    optionArr.map(function(item, index) {
                        var isSelect = optionSelected === item.productCategoryId ? 'selected'
                            : '';
                        optionHtml += '<option data-value="'
                            + item.productCategoryId
                            + '"'
                            + isSelect
                            + '>'
                            + item.productCategoryName
                            + '</option>';
                    });
                    $('#product-category').html(optionHtml);
                }
            });
    };

    /**
     * 提交按钮的响应时间,分别对商品添加和商品编辑做不同的相应
     */
    $('#submit').click(
        function(){
            // 创建商品Json对象,并从表单对象中获取对应的属性值
            var product = {};

            // 如果是编辑操作,需要传入productId
            if(isEdit){
                product.productId = productId;
            }

            product.productName = $('#product-name').val();
            product.productDesc = $('#product-desc').val();

            // 获取商品的特定目录值
            product.productCategory = {
                productCategoryId : $('#product-category').find('option').not(
                    function() {
                        return !this.selected;
                    }).data('value')
            };

            product.priority = $('#priority').val();
            product.normalPrice = $('#normal-price').val();
            product.promotionPrice = $('#promotion-price').val();

            // 生成表单对象用于接收参数并传递给后台
            var formData = new FormData();

            // 缩略图 (只有一张),获取缩略图的文件流
            var thumbnail = $('#small-img')[0].files[0];
            formData.append('thumbnail',thumbnail);

            // 图片详情
            $('.detail-img').map(
                function(index, item) {
                    // 判断该控件是否已经选择了文件
                    if ($('.detail-img')[index].files.length > 0) {
                        // 将第i个文件流赋值给key为productImgi的表单键值对里
                        formData.append('productImg' + index,
                            $('.detail-img')[index].files[0]);
                    }
                });
            // 将product 转换为json ,添加到forData
            formData.append('productStr', JSON.stringify(product));

            // 获取表单中的验证码
            var verifyCodeActual = $('#j_captcha').val();
            if (!verifyCodeActual) {
                $.toast('请输入验证码!');
                return;
            }
            formData.append("verifyCodeActual", verifyCodeActual);

            // 使用ajax异步提交
            $.ajax({
                url: isEdit?editProductURL:addProductURL,
                type: 'POST' ,
                data : formData,
                contentType : false,
                processData : false,
                cache : false,
                success: function(data){
                    if (data.success) {
                        $.toast('提交成功!');
                        $('#captcha_img').click();
                    } else {
                        $.toast('提交失败!');
                        $('#captcha_img').click();
                    }
                }
            });
        });
});

在这里插入图片描述

3. 前后端联合调试

在前端打上5个断点:
在这里插入图片描述
进入前端调试页面后在后端打一个断点:
在这里插入图片描述
按f10进行步调,按f8跳过进入下一个断点进行调试,进入后端按f8进行步调,调试完按f9结束调试
在这里插入图片描述
在这里插入图片描述

赞(0) 打赏
未经允许不得转载:IDEA激活码 » 【校园商铺SSM-25】商品编辑--Controller+View+前后端联调的实现

相关推荐

  • 暂无文章

一个分享Java & Python知识的社区