SSM到Spring Boot-从零开发校园商铺平台八（商品模块）

商品添加之Dao层的实现

ProductDao

    /**
     * 插入商品
     *
     * @param product
     * @return
     */
    int insertProduct(Product product);

ProductDao.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.imooc.o2o.dao.ProductDao">
     <insert id="insertProduct" parameterType="com.imooc.o2o.entity.Product"
            useGeneratedKeys="true" keyProperty="productId" keyColumn="product_id">
		INSERT INTO
		tb_product(product_name,product_desc,img_addr,
		normal_price,promotion_price,priority,create_time,
		last_edit_time,enable_status,product_category_id,
		shop_id)
		VALUES
		(#{productName},#{productDesc},#{imgAddr},
		#{normalPrice},#{promotionPrice},#{priority},#{createTime},
		#{lastEditTime},#{enableStatus},#{productCategory.productCategoryId},
		#{shop.shopId})
	</insert>
</mapper>

ProductImgDao.xml

package com.imooc.o2o.dao;

import com.imooc.o2o.entity.ProductImg;

import java.util.List;

public interface ProductImgDao {
    List<ProductImg> queryProductImgList(long productId);

    int batchInsertProductImg(List<ProductImg> productImgList);

    int deleteProductImgByProductId(long productId);
}

ProductImgDao.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.imooc.o2o.dao.ProductImgDao">
    <select id="queryProductImgList" resultType="com.imooc.o2o.entity.ProductImg">
        select
        product_img_id,
        img_addr,
        img_desc,
        priority,
        create_time,
        product_id
        from tb_product_img
        where product_id=#{productId}
        order by
        product_img_id asc
    </select>
    <insert id="batchInsertProductImg" parameterType="java.util.List">
        insert into
        tb_product_img(img_addr,img_desc,priority,create_time,product_id)
        values
        <foreach collection="list" item="productImg" index="index"
                 separator=",">
        (
            #{productImg.imgAddr},
            #{productImg.imgDesc},
            #{productImg.priority},
            #{productImg.createTime},
            #{productImg.productId}
        )
        </foreach>
    </insert>
    <delete id="deleteProductImgByProductId">
        delete from
        tb_product_img
        where
        product_id=#{productId}
    </delete>
</mapper>

测试

package com.imooc.o2o.dao;

import com.imooc.o2o.BaseTest;
import com.imooc.o2o.entity.ProductImg;
import org.junit.FixMethodOrder;
import org.junit.Test;
import org.junit.runners.MethodSorters;
import org.springframework.beans.factory.annotation.Autowired;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import static org.junit.Assert.*;

@FixMethodOrder(MethodSorters.NAME_ASCENDING)
public class ProductImgDaoTest extends BaseTest {
    @Autowired
    private ProductImgDao productImgDao;

    @Test
    public void BqueryProductImgList() {
        List<ProductImg> productImgList = new ArrayList<ProductImg>();
        productImgList=productImgDao.queryProductImgList(1);
        for (ProductImg productImg:productImgList){
            System.out.println(productImg.getImgDesc());
        }
    }

    @Test
    public void AbatchInsertProductImg() {
        ProductImg productImg1 = new ProductImg();
        productImg1.setImgAddr("图片1");
        productImg1.setImgDesc("测试图片1");
        productImg1.setPriority(1);
        productImg1.setCreateTime(new Date());
        productImg1.setProductId(1L);
        ProductImg productImg2 = new ProductImg();
        productImg2.setImgAddr("图片2");
        productImg2.setImgDesc("测试图片2");
        productImg2.setPriority(1);
        productImg2.setCreateTime(new Date());
        productImg2.setProductId(1L);
        List<ProductImg> productImgList = new ArrayList<ProductImg>();
        productImgList.add(productImg1);
        productImgList.add(productImg2);
        int effectedNum=productImgDao.batchInsertProductImg(productImgList);
        assertEquals(2,effectedNum);
    }

    @Test
    public void CdeleteProductImgByProductId() {
        long productId=1;
        int effectedNum = productImgDao.deleteProductImgByProductId(productId);
        assertEquals(2,effectedNum);
    }
}

商品添加之Service层实现

ProductService

package com.imooc.o2o.service;

import com.imooc.o2o.dto.ImageHolder;
import com.imooc.o2o.dto.ProductExecution;
import com.imooc.o2o.entity.Product;
import com.imooc.o2o.exceptions.ProductOperationException;

import java.io.InputStream;
import java.util.List;

public interface ProductService {


//    ProductExecution addProduct(Product product, InputStream thumbnail,
//                                String thumbnailName,
//                                List<InputStream> productImgList,
//                                List<String> productImgNameList) throws ProductOperationException;

ProductExecution addProduct(Product product, ImageHolder thumbnail,
                                List<ImageHolder> productImgList) throws ProductOperationException;

}

在dto中创建ImageHolder,并将之前涉及到店铺信息图片上传的代码重构

package com.imooc.o2o.dto;

import java.io.InputStream;

public class ImageHolder {
    private String imageName;
    private InputStream image;

    public String getImageName() {
        return imageName;
    }

    public void setImageName(String imageName) {
        this.imageName = imageName;
    }

    public InputStream getImage() {
        return image;
    }

    public void setImage(InputStream image) {
        this.image = image;
    }

    public ImageHolder(String imageName, InputStream image) {
        this.imageName = imageName;
        this.image = image;
    }
}

ProductServiceImpl

package com.imooc.o2o.service.impl;

import com.imooc.o2o.dao.ProductDao;
import com.imooc.o2o.dao.ProductImgDao;
import com.imooc.o2o.dto.ImageHolder;
import com.imooc.o2o.dto.ProductExecution;
import com.imooc.o2o.entity.Product;
import com.imooc.o2o.entity.ProductImg;
import com.imooc.o2o.enums.ProductStateEnum;
import com.imooc.o2o.exceptions.ProductOperationException;
import com.imooc.o2o.service.ProductService;
import com.imooc.o2o.util.ImageUtil;
import com.imooc.o2o.util.PathUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

@Service
public class ProductServiceImpl implements ProductService {
    @Autowired
    private ProductDao productedao;

    @Autowired
    private ProductImgDao productImgDao;


    @Override
    @Transactional
    //1.处理缩略图
    //2.往tb_product写入商品信息，获取productId
    //3.结合productId批量处理商品详情图
    //4.将商品详情图列表批量插入tb_product_img中
    public ProductExecution addProduct(Product product, ImageHolder thumbnail, List<ImageHolder> productImgList) throws ProductOperationException {
        //空值判断
        if(product!=null&&product.getShop()!=null&&product.getShop().getShopId()!=null){
            //给商品设置上默认属性
            product.setCreateTime(new Date());
            product.setLastEditTime(new Date());
            //默认为上架状态
            product.setEnableStatus(1);
            //若商品缩略图不为空则添加
            if(thumbnail!=null){
                addThumbnail(product,thumbnail);
            }
            try{
                //创建商品信息
                int effectedNum = productedao.insertProduct(product);
                if(effectedNum<=0){
                    throw new ProductOperationException("创建商品失败");
                }
            }catch (Exception e){
                throw new ProductOperationException("创建商品失败："+e.toString());
            }
            //若商品详情图不为空则添加
            if(productImgList!=null&&productImgList.size()>0){
                addProductImgList(product,productImgList);
            }
            return new ProductExecution(ProductStateEnum.SUCCESS,product);
        }else{
            //传参为空则返回空值错误信息
            return new ProductExecution(ProductStateEnum.EMPTY);
        }
    }

    /**
     * 添加缩略图
     */
    public void addThumbnail(Product product,ImageHolder thumbnail){
        String dest= PathUtil.getShopImagePath(product.getShop().getShopId());
        String thumbnailAddr = ImageUtil.generateThumbnail(thumbnail,dest);
        product.setImgAddr(thumbnailAddr);
    }

    /**
     * 批量添加图片
     */
    private void addProductImgList(Product product,
                                   List<ImageHolder> productImgHolderList){
        //获取图片存储路径，这里直接存放到相应店铺的文件夹底下
        String dest= PathUtil.getShopImagePath(product.getShop().getShopId());
        List<ProductImg> productImgList = new ArrayList<ProductImg>();
        //遍历图片一次去处理，并添加进productImg实体类中
        for(ImageHolder productImgHolder:productImgHolderList){
            String imgAddr = ImageUtil.generateNormalImg(productImgHolder,dest);
            ProductImg productImg = new ProductImg();
            productImg.setImgAddr(imgAddr);
            productImg.setProductId(product.getProductId());
            productImg.setCreateTime(new Date());
            productImgList.add(productImg);
        }
        //如果确实是有图片需要添加的，就执行批量添加操作
        if(productImgList.size()>0){
            try {
                int effectedNum =
                        productImgDao.batchInsertProductImg(productImgList);
                if(effectedNum<=0){
                    throw new ProductOperationException("创建商品详情图片失败");
                }
            } catch (ProductOperationException e) {
               throw new ProductOperationException("创建商品详情图片失败"+e.toString());
            }
        }

    }

}

PeoductExecution

package com.imooc.o2o.dto;

import com.imooc.o2o.entity.Product;
import com.imooc.o2o.enums.ProductStateEnum;

import java.util.List;

public class ProductExecution {
    //结果状态
    private int state;
    //商品数量
    private String stateInfo;
    //操作的product(增删改查商品的时候用)
    private Product product;
    //获取的product列表(查询商品列表的时候用)
    private List<Product> productList;

    public ProductExecution(){

    }
    // 失败的构造器
    public ProductExecution(ProductStateEnum stateEnum) {
        this.state = stateEnum.getState();
        this.stateInfo = stateEnum.getStateInfo();
    }

    public ProductExecution(ProductStateEnum stateEnum, Product product){
        this.state = stateEnum.getState();
        this.stateInfo = stateEnum.getStateInfo();
        this.stateInfo = stateEnum.getStateInfo();
        this.product =product;
    }

    public ProductExecution(ProductStateEnum stateEnum,
                            List<Product> productList){
        this.state=stateEnum.getState();
        this.stateInfo=stateEnum.getStateInfo();
        this.productList=productList;
    }

    public int getState() {
        return state;
    }

    public void setState(int state) {
        this.state = state;
    }

    public String getStateInfo() {
        return stateInfo;
    }

    public void setStateInfo(String stateInfo) {
        this.stateInfo = stateInfo;
    }

    public Product getProduct() {
        return product;
    }

    public void setProduct(Product product) {
        this.product = product;
    }

    public List<Product> getProductList() {
        return productList;
    }

    public void setProductList(List<Product> productList) {
        this.productList = productList;
    }
}

ProductOperationException

package com.imooc.o2o.exceptions;

public class ProductOperationException extends RuntimeException{


    private static final long serialVersionUID = 5076172298827469013L;

    public ProductOperationException(String msg) {
        super(msg);
    }
}

ImageUtil中的generateNormalImag

    public static String generateNormalImg(ImageHolder thumbnail, String targetAddr) {
        String realFileName = getRandomFileName();
        //获取文件的扩展名
        String extension = getFileExtension(thumbnail.getImageName());
        //如果目标路径不存在则自动创建
        makeDirPath(targetAddr);
        //获取文件存储的相对路径
        String relativeAddr = targetAddr + realFileName + extension;
        //获取文件要保存到的目标路径
        File dest = new File(getImgBasePath() + relativeAddr);
        //调用Thumbnails生成图片
        try {
            Thumbnails.of(thumbnail.getImage()).size(337, 640).outputQuality(0.5f).toFile(dest);
        } catch (IOException e) {
            throw new RuntimeException("创建缩略图失败：" + e.toString());
        }
        //返回图片的相对路径
        return relativeAddr;
    }

商品添加之Controller层的设计

package com.imooc.o2o.web.shopadmin;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.imooc.o2o.dto.ImageHolder;
import com.imooc.o2o.dto.ProductExecution;
import com.imooc.o2o.entity.Product;
import com.imooc.o2o.entity.Shop;
import com.imooc.o2o.enums.ProductStateEnum;
import com.imooc.o2o.exceptions.ProductOperationException;
import com.imooc.o2o.service.ProductService;
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.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller
@RequestMapping("/shopadmin")
public class ProductManagementController {
    @Autowired
    private ProductService productService;

    //支持上传文件商品详情图的最大数量
    private static final int IMAGEMAXCOUNT=6;

    @RequestMapping(value = "/addproduct",method = RequestMethod.POST)
    @ResponseBody
    private Map<String,Object> addProduct(HttpServletRequest request){
        Map<String,Object> modelMap=new HashMap<String,Object>();
        //验证码校验
        if(!CodeUtil.checkVerifyCode(request)){
            modelMap.put("success",false);
            modelMap.put("errMsg","输入了错误的验证码");
            return modelMap;
        }
        //接受前端参数的变量的初始化，包括商品，缩略图，详情图列表实体类
        ObjectMapper mapper = new ObjectMapper();
        Product product = null;
        String productStr = HttpServletRequestUtil.getString(request,
                "productStr");
        //定义MultipartHttpServletRequest 处理文件流
        MultipartHttpServletRequest multipartRequest=null;
        //用来保存缩略图的文件流
        ImageHolder thumbnail=null;
        //用来保存商品详情图文件流列表以及对应的名字列表
        List<ImageHolder> productImgList= new ArrayList<ImageHolder>();
        //获取文件流
        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>列表对象，最多支持六张图片上传
                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;
                    }
                }
            }else {
                modelMap.put("success",false);
                modelMap.put("errMsg","上传图片不能为空");
                return modelMap;
            }
        }catch (Exception e){
            modelMap.put("success",false);
            modelMap.put("errMsg",e.toString());
        }
        try{
            //尝试获取前端传过来的表单string流并将其转换成Product实体类
            product = mapper.readValue(productStr,Product.class);
        }catch (Exception e){
            modelMap.put("success",false);
            modelMap.put("errMsg",e.toString());
            return modelMap;
        }
        //若Product信息，缩略图以及详情图列表为非空，则开始进行商品添加操作
        if(product!=null&&thumbnail!=null&&productImgList.size()>0){
            try{
                //从session中获取当前店铺的Id并赋值给product,减少对前端数据的依赖
                Shop currentShop =(Shop) request.getSession().getAttribute(
                        "currentShop");
                Shop shop = new Shop();
                shop.setShopId(currentShop.getShopId());
                product.setShop(shop);
                //执行添加操作
                ProductExecution pe = productService.addProduct(product,
                        thumbnail,productImgList);
                if(pe.getState()== ProductStateEnum.SUCCESS.getState()){
                    modelMap.put("success",true);
                }else {
                    modelMap.put("success",false);
                    modelMap.put("errMsg", pe.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;
    }
}

商品添加之前端的实现

productoperation.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <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">
    <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">
    <link rel="stylesheet" href="../resources/css/shop/productoperation.css">
</head>
<body>
<header class="bar bar-nav">
    <h1 class="title">商品编辑</h1>
</header>
<div class="content">
    <div class="list-block">
        <ul>
            <li>
                <div class="item-content">
                    <div class="item-media">
                        <i class="icon icon-form-name"></i>
                    </div>
                    <div class="item-inner">
                        <div class="item-title label">商品名称</div>
                        <div class="item-input">
                            <input type="text" id="product-name" placeholder="商品名称">
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-media">
                        <i class="icon icon-form-email"></i>
                    </div>
                    <div class="item-inner">
                        <div class="item-title label">目录</div>
                        <div class="item-input">
                            <select id="category">
                            </select>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-media">
                        <i class="icon icon-form-email"></i>
                    </div>
                    <div class="item-inner">
                        <div class="item-title label">优先级</div>
                        <div class="item-input">
                            <input type="number" id="priority" placeholder="数字越大越排前面">
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-media">
                        <i class="icon icon-form-email"></i>
                    </div>
                    <div class="item-inner">
                        <div class="item-title label">原价</div>
                        <div class="item-input">
                            <input type="number" id="normal-price" placeholder="可选">
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-media">
                        <i class="icon icon-form-email"></i>
                    </div>
                    <div class="item-inner">
                        <div class="item-title label">现价</div>
                        <div class="item-input">
                            <input type="number" id="promotion-price" placeholder="可选">
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-media">
                        <i class="icon icon-form-email"></i>
                    </div>
                    <div class="item-inner">
                        <div class="item-title label">缩略图</div>
                        <div class="item-input">
                            <input type="file" id="small-img">
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-media">
                        <i class="icon icon-form-email"></i>
                    </div>
                    <div class="item-inner detail-img-div">
                        <div class="item-title label">详情图片</div>
                        <div class="item-input" id="detail-img">
                            <input type="file" class="detail-img">
                            <!-- <input type="file" class="detail-img" id="detail-img-1">
                            <input type="file" class="detail-img" id="detail-img-2"> -->
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-media">
                        <i class="icon icon-form-email"></i>
                    </div>
                    <div class="item-inner">
                        <div class="item-title label">商品描述</div>
                        <div class="item-input">
                            <textarea id="product-desc" placeholder="商品描述"></textarea>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-media">
                        <i class="icon icon-form-email"></i>
                    </div>
                    <div class="item-inner">
                        <label for="j_captcha" class="item-title label">验证码</label> <input
                            id="j_captcha" name="j_captcha" type="text"
                            class="form-control in" placeholder="验证码" />
                        <div class="item-input">
                            <img id="captcha_img" alt="点击更换" title="点击更换"
                                 οnclick="changeVerifyCode(this)" src="../Kaptcha" />
                        </div>
                    </div>
                </div>
            </li>

        </ul>
    </div>
    <div class="content-block">
        <div class="row">
            <div class="col-50">
                <a href="/myo2o/shop/productmanage"
                   class="button button-big button-fill button-danger" id="back">返回商品管理</a>
            </div>
            <div class="col-50">
                <a href="#" class="button button-big button-fill" id="submit">提交</a>
            </div>
        </div>
    </div>
</div>



<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>
<script type='text/javascript'
        src='../resources/js/common/commonutil.js' charset='utf-8'></script>
<script type='text/javascript'
        src='../resources/js/shop/productoperation.js' charset='utf-8'></script>
</body>
</html>

productoperation.js

$(function() {
    //从url里获取productId参数的值
    var productId = getQueryString('productId');
    var shopId = 1;
    //通过productId获取商店信息的URL
    var infoUrl = '/shopadmin/getproductbyid?productId=' + productId;
    //获取当前店铺设定的商品类别列表的URL
    var categoryUrl = '/shopadmin/getproductcategorylist';
    //更新商品信息的URL
    var productPostUrl = '/shopadmin/modifyproduct';
    //由于商品添加和编辑使用的是同一个页面，
    //该标识符用来标明本次是添加还是编辑操作
    var isEdit = false;
    if (productId) {
        //若有productId则为编辑操作
        getInfo(productId);
        isEdit = true;
    } else {
        getCategory(shopId);
        productPostUrl = '/shopadmin/addproduct';
    }
    //获取需要编辑的商品的商品信息，并赋值给表单
    function getInfo(id) {
        $
            .getJSON(
                infoUrl,
                function(data) {
                    if (data.success) {
                        //从返回的Json当中获取product对象的信息，并赋值给表单
                        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;
                        //生成前端的HTML商品类别列表，并默认选择编辑前的商品类别
                        optionArr
                            .map(function(item, index) {
                                var isSelect = optionSelected === item.productCategoryId ? 'selected'
                                    : '';
                                optionHtml += '<option data-value="'
                                    + item.productCategoryId
                                    + '"'
                                    + isSelect
                                    + '>'
                                    + item.productCategoryName
                                    + '</option>';
                            });
                        $('#category').html(optionHtml);
                    }
                });
    }
    //为商品添加操作提供该店铺下的所有商品类别列表
    function getCategory() {
        $.getJSON(categoryUrl, function(data) {
            if (data.success) {
                var productCategoryList = data.data;
                var optionHtml = '';
                productCategoryList.map(function(item, index) {
                    optionHtml += '<option data-value="'
                        + item.productCategoryId + '">'
                        + item.productCategoryName + '</option>';
                });
                $('#category').html(optionHtml);
            }
        });
    }
    //针对商品详情图空间组，若该空间组的最后一个元素发生变化(即上传了图片)
    //且控件总数未操作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">');
        }
    });

    //提交按钮的事件响应，分别对商品添加和编辑操作做不同的响应
    $('#submit').click(
        function() {
            //创建商品json对象，并从表单里面获取对应的属性值
            var product = {};
            product.productName = $('#product-name').val();
            product.productDesc = $('#product-desc').val();
            product.priority = $('#priority').val();
            product.normalPrice = $('#normal-price').val();
            product.promotionPrice = $('#promotion-price').val();
            //获取选定的商品类别值
            product.productCategory = {
                productCategoryId : $('#category').find('option').not(
                    function() {
                        return !this.selected;
                    }).data('value')
            };
            product.productId = productId;

            //获取缩略图文件流
            var thumbnail = $('#small-img')[0].files[0];
            console.log(thumbnail);
            //生成表单对象，用于接收参数并传递给后台
            var formData = new FormData();
            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 对象转成字符流保存到表单对象key为productStr的键值对里
            formData.append('productStr', JSON.stringify(product));
            //获取表单里输入的验证码
            var verifyCodeActual = $('#j_captcha').val();
            if (!verifyCodeActual) {
                $.toast('请输入验证码！');
                return;
            }
            formData.append("verifyCodeActual", verifyCodeActual);
            //将数据提交到后台处理相关操作
            $.ajax({
                url : productPostUrl,
                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();
                    }
                }
            });
        });

});

productoperation.css

.row-product {
    border: 1px solid #999;
    padding: .5rem;
    border-bottom: none;
}
.row-product:last-child {
    border-bottom: 1px solid #999;
}
.product-name {
    white-space: nowrap;
    overflow-x: scroll;
}
.product-wrap a {
    margin-right: 1rem;
}

商品编辑之后端开发