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

商品編輯之後端開發