SSM项目之商铺系统-商品增加(十五)

最新推荐文章于 2022-12-21 10:22:01 发布

Sunmeok

最新推荐文章于 2022-12-21 10:22:01 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/Sunmeok/article/details/81416441

版权

我们要完成商品增加的功能

首先我们先来看看商品增加的思路，我们前台显示的话是这样的

我们需要为这个页面完成什么？

首先获取商品类型，让其自动显示在这个页面，然后特别的还有需要传入详情图片，详情图片是多个，

但是我们之前已经完成了通过一个店铺的信息得到该店铺所有商品的列表，我们在js中直接调用之前的方返回的值交给前端处理即可

这里我们只需要编辑加入新商品的功能。

首先DAO层的开发：

梳理思路：我们需要给product存入所有添加的属性并且通过权值来排序

新建product的层文件。

mapper.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="storepro.dao.ProductDao">
    <insert id="insertProduct" parameterType="product" useGeneratedKeys="true"
            keyColumn="product_id" keyProperty="productId">
        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>


    <!--通过productId获取Product-->

</mapper>

package storepro.dto;

import java.io.InputStream;

/*
* 如果每次都是传入文件流和名字，那么我们要传入的参数太多，我们对文件流和名字进行封装,
* 我们要对所有需要传入文件流和文件名称的方法赋值
* */
public class ImageHolder {
    private String imageName;
    private InputStream image;

    public  ImageHolder(String imageName,InputStream image){
        this.imageName=imageName;
        this.image=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;
    }
}

我们插入了除了product外的所有属性，当插入语句时我们传入了一个对象参数，这个对象参数里除了productId其他全有了，因为id为自增属性，不能我们设置，通过useGeneratedKeys="true" keyColumn="product_id" keyProperty="productId
这三个语句完成给传入的对象的相应属性进行赋值。

Service：

public interface ProductService {
    //添加商品信息以及图片处理(这里图片当上传缩略图时上传单个图片，其他图片可以单个或多个所以用list传入)
    // ImageHolder类型为缩略图
    // List<ImageHolder> 为详情图，就是多个的
    ProductExecution addProduct(Product product, ImageHolder imageHolder, List<ImageHolder> imageHolderList) throws ProductOperationException;
}

注意解释下这里，我们的service因为要接受图片，所以接受的参数有文件输入流，和文件名称，但是我们product方法还需要传入商品的缩略图和多个图片的详情图。

所以这样下来我们需要有五个参数，第一个prodcut，第二个和第三个分别是缩略图（单个）的名字和文件流，第四个和第五个分别是图片详情的名字和缩略图，而且是List类型的如图：

ProductExecution addProduct(Product product, InputStream prodImgIns, String prodImgName, List<InputStream> prodImgDetailInsList, List<String> prodImgDetailNameList) throws ProductOperationException;

那么我们想到一个办法，把文件的输入流和名字封装起来这样就变成了三个参数

我们先看些封装代码：

package storepro.dto;

import java.io.InputStream;

/*
* 如果每次都是传入文件流和名字，那么我们要传入的参数太多，我们对文件流和名字进行封装,
* 我们要对所有需要传入文件流和文件名称的方法赋值
* */
public class ImageHolder {
    private String imageName;
    private InputStream image;

    public  ImageHolder(String imageName,InputStream image){
        this.imageName=imageName;
        this.image=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;
    }
}

我们在这个方法里这是封装了商品名称和商品文件流两个字段

我们还需要看下这个方法的返回值是我们自定义的dto类：

package storepro.dto;

import storepro.entity.Product;
import storepro.entity.ProductCategory;
import storepro.enums.ProductCategoryStateEnum;
import storepro.enums.ProductStateEnum;

import java.util.List;

    /**
     * @ClassName: ProductExecution
     * @Description: 操作Product是service的返回对象

     */

    public class ProductExecution {
        /**
         * 操作返回的状态信息
         */
        private int state;

        /**
         * 操作返回的状态信息描述
         */
        private String stateInfo;

        /**
         * 操作成功的总量
         */
        private int count;

        /**
         * 批量操作（查询商品列表）返回的Product集合
         */
        private List<Product> productList;

        /**
         * 增删改的操作返回的商品信息
         */
        private Product product;

        /**
         * @Title:ProductExecution
         * @Description:默认构造函数
         */
        public ProductExecution() {

        }

        /**
         * @param productStateEnum
         * @param productList
         * @Title:ProductExecution
         * @Description:批量操作成功的时候返回的ProductExecution
         */
        public ProductExecution(ProductStateEnum productStateEnum, List<Product> productList, int count) {
            this.state = productStateEnum.getState();
            this.stateInfo = productStateEnum.getStateInfo();
            this.productList = productList;
            this.count = count;
        }

        /**
         * @param productStateEnum
         * @param product
         * @Title:ProductExecution
         * @Description:单个操作成功时返回的ProductExecution
         */
        public ProductExecution(ProductStateEnum productStateEnum, Product product) {
            this.state = productStateEnum.getState();
            this.stateInfo = productStateEnum.getStateInfo();
            this.product = product;
        }

        /**
         * @param productStateEnum
         * @Title:ProductExecution
         * @Description:操作失败的时候返回的ProductExecution，仅返回状态信息即可
         */
        public ProductExecution(ProductStateEnum productStateEnum) {
            this.state = productStateEnum.getState();
            this.stateInfo = productStateEnum.getStateInfo();
        }

        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 int getCount() {
            return count;
        }

        public void setCount(int count) {
            this.count = count;
        }

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

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

        public Product getProduct() {
            return product;
        }

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

我们看product中的信息状态枚举类型：

package storepro.enums;

/**
 *
 *
 * @ClassName: ProductStateEnum
 *
 * @Description: 使用枚举表述常量数据字典
 */
public enum ProductStateEnum {

    SUCCESS(1, "操作成功"), INNER_ERROR(-1001, "操作失败"), NULL_PARAMETER(-1002, "缺少参数"),
    EMPTY(-1003,"商品为空")
    ;

    private int state;
    private String stateInfo;

    /**
     *
     *
     * @Title:ProductStateEnum
     *
     * @Description:私有构造函数,禁止外部初始化改变定义的常量
     *
     * @param state
     * @param stateInfo
     */
    private ProductStateEnum(int state, String stateInfo) {
        this.state = state;
        this.stateInfo = stateInfo;
    }

    /**
     *
     *
     * @Title: getState
     *
     * @Description: 仅设置get方法,禁用set
     *
     * @return
     *
     * @return: int
     */
    public int getState() {
        return state;
    }

    public String getStateInfo() {
        return stateInfo;
    }

    /**
     *
     *
     * @Title: stateOf
     *
     * @Description: 定义换成pulic static 暴漏给外部,通过state获取ShopStateEnum
     *
     *               values()获取全部的enum常量
     *
     * @param state
     *
     * @return: ShopStateEnum
     */
    public static ProductStateEnum stateOf(int state) {
        for (ProductStateEnum stateEnum : values()) {
            if(stateEnum.getState() == state){
                return stateEnum;
            }
        }
        return null;
    }

}

里面的构造函数分别有list型和单个对象型并且有状态信息等满足我们的所有要求

接下来看serviceImple层：

public class ProductServiceImpl implements ProductService {

    @Autowired
    private ProductDao productDao;
    @Autowired
    private ProductImgDao productImgDao;
    @Override
    /*
     * 首先我们获得前台传来的数据
     * 1.获取缩略图，对缩略图进行存储，存储到product的shop_img里
     * 2.将信息存入tb_product中，获取product_id
     * 3.通过product获取product_id将商铺详情图处理后写入tb_produc_img中
     * */
    @Transactional//事务处理，因为很多步，所以要事务处理
    public ProductExecution addProduct(Product product, ImageHolder imageHolder, List<ImageHolder> imageHolderList) throws ProductOperationException {
        if (product != null && product.getShop() != null && product.getShop().getShopId() != null) {//如果传入的信息有效
            //设置默认的属性
            product.setCreateTime(new Date());
            product.setLastEditTime(new Date());
            product.setEnableStatus(1);//1表示商品可以显示在前端
            if (imageHolder != null) {//如果商品缩略图不为空，添加到指定目录
                addProductImg(product, imageHolder);//写入商品缩略图，并将缩略图的地址交给product
            }
            try {
                int effectnum = productDao.insertProduct(product); //将product信息写入
                if (effectnum <= 0) {
                    throw new ShopOperationException("商品创建失败");
                }
            } catch(Exception e) {
                throw new ProductOperationException("创建商品失败"+e.toString());
            }
               //如果商品添加成功，我们要继续处理详情图的内容
                if (imageHolderList!=null&&imageHolderList.size()>0){
                  addProductImgList(product,imageHolderList);//将商品详情图存入，并且防止
                }
                   return  new ProductExecution(ProductStateEnum.SUCCESS,product);
            }else{

            return  new ProductExecution(ProductStateEnum.INNER_ERROR);
        }
    }

    private void addProductImg(Product product, ImageHolder imageHolder) {//存入图片的方法
        // 根据shopId获取图片存储的相对路径
        String relativePath = PathUtil.getShopImagePath(product.getShop().getShopId());
        // 添加图片到指定的目录
        String relativeAddr = ImageUtil.generateThumnail(imageHolder, relativePath);
        // 将relativeAddr设置给product
        product.setImgAddr(relativeAddr);
    }



    /**
     * 批量添加商品图片
     *
     * @param product
     * @param productImgHolderList
     */
    private void addProductImgList(Product product, List<ImageHolder> productImgHolderList) {
        // 获取图片存储路径，这里直接存到相应店铺的文件夹下
        String desc = PathUtil.getShopImagePath(product.getShop().getShopId());
        List<ProductImg> productImgList = new ArrayList<>();

        // 遍历图片依次去处理，并添加进 productImg 实体类中
        for (ImageHolder productImageHolder : productImgHolderList) {
            String imgAddr = ImageUtil.generateNormalImg(productImageHolder, desc);
            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 (Exception e) {
                throw new ProductOperationException("创建商品详情图片失败，" + e.toString());
            }
        }
    }
}

其实与商铺类别增加方法相似

看这个方法：

首先接受controller层封装好前台的的数据的Product类型的对象，还有商品的缩略图和详情图。

接受到这些信息我们要完成下面的处理：

第一步：判断shop等重要属性不为空。

第二步：判断商品缩略图不为空后进行添加，使用了addProductImg方法，这个方法和存入商铺缩略图时类似，没区别

第三步：通过上一步我们将product的基本属性已经完全赋值，接下来调用dao层方法进行添加

第四步：我们将商品详情图的地址填入进product_img中

我们说下 addProductImg(product, imageHolder);方法里的generateNormalImg（）方法，这个方法我们和generateThumnail（）方法本质没区别，只是在所有更改了对传入图片大小的操作。

   public static String generateNormalImg(ImageHolder thumbnail, String targetAddr) {

        // 获取不重复的随机名
        String realFileName = getRandomFileName();
        // 获取文件的扩展名，如:png，jpg等
        String extension = getFileExtension(thumbnail.getImageName());
        // 如果目标路径不存在，则自动创建
        makeDidPath(targetAddr);
        // 获取文件要保存的目标路径
        String relativeAddr = targetAddr + realFileName + extension;

        // 获取文件要保存到的目录路径
        File dest = new File(PathUtil.getImgBasePath() + relativeAddr);

        // 调用 Thumbnails 生成带有水印的图片
        try {
            Thumbnails.of(thumbnail.getImage())
                    .size(337, 640)
                    .watermark(Positions.BOTTOM_RIGHT,
                            ImageIO.read(new File(basePath + "qq.jpg")), 0.25f)
                    .outputQuality(0.f)
                    .toFile(dest);
        } catch (IOException e) {
            throw new RuntimeException("创建缩略图失败，" + e.toString());
        }

        // 返回图片相对路径地址
        return relativeAddr;
    }



    private static void makeDidPath(String targetAddr) {//创建目标路径所涉及到的目录
        String realFileParentPath=PathUtil.getImgBasePath()+targetAddr;//获得文件要存储绝对路径
        File dirPath=new File(realFileParentPath);
        if (!dirPath.exists()){//不存在路径就创建出来
          dirPath.mkdirs();//创建路径
        }
    }

所有操作结束后我们给controller返回一个product的dto对象

在写controller层之间我们要先完成对存商品图集合的操作

由于处理的是多个图片，所以接受list

Mapper的方法。

<?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="storepro.dao.ProductImgDao">
    <!--当传入list类型等，必须这么写，基本类型不用-->
    <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>
</mapper>

注意：我们传入的参数是foreach，所以要完成用foreach动态语句，这个方法便完成了，并不需要service以上的操作

接下来是controller层的操作：

    private  static final int IMAGEMAXCOUNT=6;
    @RequestMapping(value = "/addproduct")
    @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 multipartRequest = null;//用来获取request文件流的形式
     ImageHolder thumbnail = null;//存储缩略图
     List<ImageHolder> productImgList = new ArrayList<ImageHolder>();//存储详情图的集合
     CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());//从request中获取文件流
     try {
         // 若请求中存在文件流，则取出相关的文件(包括缩略图和详情图)
         if (multipartResolver.isMultipart(request)) {
             multipartRequest = (MultipartHttpServletRequest) request;
             //取出文件流构建缩略图
             CommonsMultipartFile thumbnailFile = (CommonsMultipartFile) multipartRequest.getFile("thumbnail");
             thumbnail = new ImageHolder(thumbnailFile.getOriginalFilename(), thumbnailFile.getInputStream());
             //去除缩略图，最多支撑6个文件的上传
             for (int i = 0; i < IMAGEMAXCOUNT; i++) {
                 CommonsMultipartFile thumbnailFileList = (CommonsMultipartFile) multipartRequest.getFile("productImg" + i);//从requst获得想要的数据
                 if (thumbnailFileList != null) {
                     //若去取出图片的第i个详情图片文件流不为空，则将其加入详情列表
                     ImageHolder productImg = new ImageHolder(thumbnailFileList.getOriginalFilename(), thumbnailFileList.getInputStream());
                     productImgList.add(productImg);//加入文件
                 } else {
                     //若取出第i个图片详情流为空，则终止循环
                     break;
                 }
             }

         } else {
             //没有文件流上传
             modelMap.put("success", false);
             modelMap.put("errMsg", "上传文件不能为空");
             return modelMap;

         }
     } catch (IOException e) {
         modelMap.put("success", false);
         modelMap.put("errMsg", e.toString());
         return modelMap;
     }
     try {
         //存入shp信息
         //先从前端获得传来的数据
         product = mapper.readValue(productStr, Product.class);
     } catch (Exception e) {
         modelMap.put("success", false);
         modelMap.put("errMsg", e.toString());
         return modelMap;
     }
     //若product里的重要信息不为空，且前面处理的缩略图和商品图不为空，我们开始添加product
     if (product != null && thumbnail != null && productImgList.size() > 0) {
         try {
             //从session中获取shop_id
             Shop current = (Shop) request.getSession().getAttribute("currentShop");//根据shop信息获取shop内容（这的信息是我们后台在选好店铺时设置的）
             Shop shop = new Shop();
             shop.setShopId(current.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 (RuntimeException e) {
             modelMap.put("success", false);
             modelMap.put("errMsg", e.toString());
             return  modelMap;
         }
     } else {
         modelMap.put("success", false);
         modelMap.put("errMsg", "请输入商品信息");

     }
     return modelMap;

 }
}

第一步：先判断验证码

第二步：设置一些必要的参数，因为这个controller会接受前端传来的json的信息，所以定义一个ObjectMapper类型来解析前端传来的json，我们的Product productStr就是获取了前端的json数据转为字符串，之后在使用ObjectMapper类型的方法将这个字符串存入相应的对象中去

第三步：判断是否有上传的文件流

第四步：确认文件流中传入的缩略图和商品图片数量合法

第五步：调用相应service的方法

第六步：通过相应的state值来确定返回什么样的对象给前台

view：

转自：https://blog.csdn.net/yangshangwei/article/details/80863053

概述

在完成了实战SSM_O2O商铺_30【商品】商品添加之Controller层的实现之后，我们继续来实现View层的代码部分。

商品添加和商品编辑使用的是同一个页面，所以需要根据请求的url来判断是编辑还是新增。

按照页面原型和数据模型，商品添加页面需要加载该shopId对应的productCategory。这个功能前面已经开发好了，直接调用即可。

这里写图片描述

productoperation.html

<span style="color:#000000"><code><span style="color:#4f4f4f"><!DOCTYPE html></span>
<span style="color:#006666"><<span style="color:#4f4f4f">html</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">head</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">"utf-8"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">http-equiv</span>=<span style="color:#009900">"X-UA-Compatible"</span> <span style="color:#4f4f4f">content</span>=<span style="color:#009900">"IE=edge"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">title</span>></span>商品操作<span style="color:#006666"></<span style="color:#4f4f4f">title</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">name</span>=<span style="color:#009900">"viewport"</span> <span style="color:#4f4f4f">content</span>=<span style="color:#009900">"initial-scale=1, maximum-scale=1"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">link</span> <span style="color:#4f4f4f">rel</span>=<span style="color:#009900">"shortcut icon"</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"/favicon.ico"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">name</span>=<span style="color:#009900">"apple-mobile-web-app-capable"</span> <span style="color:#4f4f4f">content</span>=<span style="color:#009900">"yes"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">name</span>=<span style="color:#009900">"apple-mobile-web-app-status-bar-style"</span> <span style="color:#4f4f4f">content</span>=<span style="color:#009900">"black"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">link</span> <span style="color:#4f4f4f">rel</span>=<span style="color:#009900">"stylesheet"</span>
    <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">link</span> <span style="color:#4f4f4f">rel</span>=<span style="color:#009900">"stylesheet"</span>
    <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">link</span> <span style="color:#4f4f4f">rel</span>=<span style="color:#009900">"stylesheet"</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"../resources/css/shop/productmanage.css"</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">head</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">body</span>></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">header</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"bar bar-nav"</span>></span>
        <span style="color:#006666"><<span style="color:#4f4f4f">h1</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"title"</span>></span>商品操作<span style="color:#006666"></<span style="color:#4f4f4f">h1</span>></span>
    <span style="color:#006666"></<span style="color:#4f4f4f">header</span>></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"content"</span>></span>
        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"list-block"</span>></span>
            <span style="color:#006666"><<span style="color:#4f4f4f">ul</span>></span>
                <span style="color:#006666"><<span style="color:#4f4f4f">li</span>></span>
                    <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-content"</span>></span>
                        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-media"</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">i</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"icon icon-form-name"</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">i</span>></span>
                        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-inner"</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-title label"</span>></span>商品名称<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-input"</span>></span>
                                <span style="color:#006666"><<span style="color:#4f4f4f">input</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">"text"</span> <span style="color:#4f4f4f">id</span>=<span style="color:#009900">"product-name"</span> <span style="color:#4f4f4f">placeholder</span>=<span style="color:#009900">"商品名称"</span>></span>
                            <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                    <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                <span style="color:#006666"></<span style="color:#4f4f4f">li</span>></span>
                <span style="color:#006666"><<span style="color:#4f4f4f">li</span>></span>
                    <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-content"</span>></span>
                        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-media"</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">i</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"icon icon-form-email"</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">i</span>></span>
                        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-inner"</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-title label"</span>></span>目录<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-input"</span>></span>
                                <span style="color:#006666"><<span style="color:#4f4f4f">select</span> <span style="color:#4f4f4f">id</span>=<span style="color:#009900">"product-category"</span>></span>
                                <span style="color:#006666"></<span style="color:#4f4f4f">select</span>></span>
                            <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                    <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                <span style="color:#006666"></<span style="color:#4f4f4f">li</span>></span>
                <span style="color:#006666"><<span style="color:#4f4f4f">li</span>></span>
                    <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-content"</span>></span>
                        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-media"</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">i</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"icon icon-form-email"</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">i</span>></span>
                        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-inner"</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-title label"</span>></span>优先级<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-input"</span>></span>
                                <span style="color:#006666"><<span style="color:#4f4f4f">input</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">"number"</span> <span style="color:#4f4f4f">id</span>=<span style="color:#009900">"priority"</span> <span style="color:#4f4f4f">placeholder</span>=<span style="color:#009900">"数字越大越排前面"</span>></span>
                            <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                    <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                <span style="color:#006666"></<span style="color:#4f4f4f">li</span>></span>
                <span style="color:#006666"><<span style="color:#4f4f4f">li</span>></span>
                    <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-content"</span>></span>
                        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-media"</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">i</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"icon icon-form-email"</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">i</span>></span>
                        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-inner"</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-title label"</span>></span>原价<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-input"</span>></span>
                                <span style="color:#006666"><<span style="color:#4f4f4f">input</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">"number"</span> <span style="color:#4f4f4f">id</span>=<span style="color:#009900">"normal-price"</span> <span style="color:#4f4f4f">placeholder</span>=<span style="color:#009900">"可选"</span>></span>
                            <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                    <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                <span style="color:#006666"></<span style="color:#4f4f4f">li</span>></span>
                <span style="color:#006666"><<span style="color:#4f4f4f">li</span>></span>
                    <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-content"</span>></span>
                        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-media"</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">i</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"icon icon-form-email"</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">i</span>></span>
                        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-inner"</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-title label"</span>></span>现价<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-input"</span>></span>
                                <span style="color:#006666"><<span style="color:#4f4f4f">input</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">"number"</span> <span style="color:#4f4f4f">id</span>=<span style="color:#009900">"promotion-price"</span> <span style="color:#4f4f4f">placeholder</span>=<span style="color:#009900">"可选"</span>></span>
                            <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                    <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                <span style="color:#006666"></<span style="color:#4f4f4f">li</span>></span>
                <span style="color:#006666"><<span style="color:#4f4f4f">li</span>></span>
                    <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-content"</span>></span>
                        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-media"</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">i</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"icon icon-form-email"</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">i</span>></span>
                        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-inner"</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-title label"</span>></span>缩略图<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-input"</span>></span>
                                <span style="color:#006666"><<span style="color:#4f4f4f">input</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">"file"</span> <span style="color:#4f4f4f">id</span>=<span style="color:#009900">"small-img"</span>></span>
                            <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                    <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                <span style="color:#006666"></<span style="color:#4f4f4f">li</span>></span>
                <span style="color:#006666"><<span style="color:#4f4f4f">li</span>></span>
                    <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-content"</span>></span>
                        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-media"</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">i</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"icon icon-form-email"</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">i</span>></span>
                        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-inner detail-img-div"</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-title label"</span>></span>详情图片<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-input"</span> <span style="color:#4f4f4f">id</span>=<span style="color:#009900">"detail-img"</span>></span>
                                <span style="color:#006666"><<span style="color:#4f4f4f">input</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">"file"</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"detail-img"</span>></span>
                                <span style="color:#880000"><!-- <input type="file" class="detail-img" id="detail-img-1">
                                <input type="file" class="detail-img" id="detail-img-2"> --></span>
                            <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                    <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                <span style="color:#006666"></<span style="color:#4f4f4f">li</span>></span>
                <span style="color:#006666"><<span style="color:#4f4f4f">li</span>></span>
                    <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-content"</span>></span>
                        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-media"</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">i</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"icon icon-form-email"</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">i</span>></span>
                        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-inner"</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-title label"</span>></span>商品描述<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-input"</span>></span>
                                <span style="color:#006666"><<span style="color:#4f4f4f">textarea</span> <span style="color:#4f4f4f">id</span>=<span style="color:#009900">"product-desc"</span> <span style="color:#4f4f4f">placeholder</span>=<span style="color:#009900">"商品描述"</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">textarea</span>></span>
                            <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                    <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                <span style="color:#006666"></<span style="color:#4f4f4f">li</span>></span>
                <span style="color:#006666"><<span style="color:#4f4f4f">li</span>></span>
                    <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-content"</span>></span>
                        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-media"</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">i</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"icon icon-form-email"</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">i</span>></span>
                        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-inner"</span>></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">label</span> <span style="color:#4f4f4f">for</span>=<span style="color:#009900">"j_captcha"</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-title label"</span>></span>验证码<span style="color:#006666"></<span style="color:#4f4f4f">label</span>></span> <span style="color:#006666"><<span style="color:#4f4f4f">input
</span>                                <span style="color:#4f4f4f">id</span>=<span style="color:#009900">"j_captcha"</span> <span style="color:#4f4f4f">name</span>=<span style="color:#009900">"j_captcha"</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">"text"</span>
                                <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"form-control in"</span> <span style="color:#4f4f4f">placeholder</span>=<span style="color:#009900">"验证码"</span> /></span>
                            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"item-input"</span>></span>
                                <span style="color:#006666"><<span style="color:#4f4f4f">img</span> <span style="color:#4f4f4f">id</span>=<span style="color:#009900">"captcha_img"</span> <span style="color:#4f4f4f">alt</span>=<span style="color:#009900">"点击更换"</span> <span style="color:#4f4f4f">title</span>=<span style="color:#009900">"点击更换"</span>
                                    <span style="color:#4f4f4f">onclick</span>=<span style="color:#009900">"changeVerifyCode(this)"</span> <span style="color:#4f4f4f">src</span>=<span style="color:#009900">"../Kaptcha"</span> /></span>
                            <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                    <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                <span style="color:#006666"></<span style="color:#4f4f4f">li</span>></span>

            <span style="color:#006666"></<span style="color:#4f4f4f">ul</span>></span>
        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"content-block"</span>></span>
            <span style="color:#880000"><!-- 预留两个按钮 TODO --></span>
            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"row"</span>></span>
                <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"col-50"</span>></span>
                    <span style="color:#006666"><<span style="color:#4f4f4f">a</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"#"</span>
                        <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"button button-big button-fill button-danger"</span> <span style="color:#4f4f4f">id</span>=<span style="color:#009900">"back"</span>></span>返回商品管理<span style="color:#006666"></<span style="color:#4f4f4f">a</span>></span>
                <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"col-50"</span>></span>
                    <span style="color:#006666"><<span style="color:#4f4f4f">a</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"#"</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"button button-big button-fill"</span> <span style="color:#4f4f4f">id</span>=<span style="color:#009900">"submit"</span>></span>提交<span style="color:#006666"></<span style="color:#4f4f4f">a</span>></span>
                <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
            <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
    <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>



    <span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span> <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'//g.alicdn.com/sj/lib/zepto/zepto.min.js'</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span> <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js'</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span> <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js'</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
    <span style="color:#880000"><!-- 引入自定义的JS --></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span> <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'../resources/js/common/common.js'</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span> <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'../resources/js/shop/productoperation.js'</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>

<span style="color:#006666"></<span style="color:#4f4f4f">body</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">html</span>></span>
</code></span>

productoperation.js

<span style="color:#000000"><code><span style="color:#880000">/**
 *  因为商品的添加和编辑复用同一个页面，所以需要根据url中的商品Id来判断
 */</span>
$(<span style="color:#000088">function</span><span style="color:#4f4f4f">()</span>{
    <span style="color:#880000">//通过url是否含有productId来判断是添加商品还是编辑</span>
    <span style="color:#000088">var</span> productId = getQueryString(<span style="color:#009900">'productId'</span>);
    <span style="color:#880000">// 标示符  productId非空则为true即编辑，否则为添加商品</span>
    <span style="color:#000088">var</span> isEdit = productId ? <span style="color:#006666">true</span> : <span style="color:#006666">false</span> ;

    <span style="color:#880000">// 商品添加URL</span>
    <span style="color:#000088">var</span> addProductURL = <span style="color:#009900">'/o2o/shopadmin/addproduct'</span>;
    <span style="color:#880000">// 商品编辑URL  TODO</span>
    <span style="color:#000088">var</span> editProductURL = <span style="color:#009900">''</span>;
    <span style="color:#880000">// 获取商品初始化信息的URL  根据页面原型只需要获取productCategory即可，后台调用之前写好的路由方法即可</span>
    <span style="color:#000088">var</span> initProductURL = <span style="color:#009900">'/o2o/shopadmin/getproductcategorybyshopId'</span>;


    <span style="color:#880000">// 通过标示符，确定调用的方法</span>
    <span style="color:#000088">if</span>(isEdit){
        <span style="color:#880000">// 为true，则根据productId调用获取product信息的方法  TODO</span>
        getProductInfoById(productId);
    }<span style="color:#000088">else</span>{
        <span style="color:#880000">// 为false，则初始化新增product页面</span>
        getProductInitInfo();
    }

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

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

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

                <span style="color:#880000">// 如果是编辑操作,需要传入productId</span>
                <span style="color:#000088">if</span>(isEdit){
                    product.productId = productId;
                }

                product.productName = $(<span style="color:#009900">'#product-name'</span>).val();
                product.productDesc = $(<span style="color:#009900">'#product-desc'</span>).val();

                <span style="color:#880000">// 获取商品的特定目录值</span>
                product.productCategory = {
                        productCategoryId : $(<span style="color:#009900">'#product-category'</span>).find(<span style="color:#009900">'option'</span>).not(
                                <span style="color:#000088">function</span><span style="color:#4f4f4f">()</span> {
                                    <span style="color:#000088">return</span> !<span style="color:#000088">this</span>.selected;
                                }).data(<span style="color:#009900">'value'</span>)
                    };

                product.priority = $(<span style="color:#009900">'#priority'</span>).val();
                product.normalPrice = $(<span style="color:#009900">'#normal-price'</span>).val();
                product.promotionPrice = $(<span style="color:#009900">'#promotion-price'</span>).val();

                <span style="color:#880000">// 生成表单对象用于接收参数并传递给后台</span>
                <span style="color:#000088">var</span> formData = <span style="color:#000088">new</span> FormData();

                <span style="color:#880000">// 缩略图 （只有一张），获取缩略图的文件流</span>
                <span style="color:#000088">var</span> thumbnail = $(<span style="color:#009900">'#small-img'</span>)[<span style="color:#006666">0</span>].files[<span style="color:#006666">0</span>];
                formData.append(<span style="color:#009900">'thumbnail'</span>,thumbnail);

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

                <span style="color:#880000">// 获取表单中的验证码</span>
                <span style="color:#000088">var</span> verifyCodeActual = $(<span style="color:#009900">'#j_captcha'</span>).val();
                <span style="color:#000088">if</span> (!verifyCodeActual) {
                    $.toast(<span style="color:#009900">'请输入验证码！'</span>);
                    <span style="color:#000088">return</span>;
                }
                formData.append(<span style="color:#009900">"verifyCodeActual"</span>, verifyCodeActual);


                <span style="color:#880000">// 使用ajax异步提交</span>
                $.ajax({
                    url: isEdit?editProductURL:addProductURL,
                    type: <span style="color:#009900">'POST'</span> ,
                    data : formData,
                    contentType : <span style="color:#006666">false</span>,
                    processData : <span style="color:#006666">false</span>,
                    cache : <span style="color:#006666">false</span>,
                    success: <span style="color:#000088">function</span><span style="color:#4f4f4f">()</span>{
                        <span style="color:#000088">if</span> (data.success) {
                            $.toast(<span style="color:#009900">'提交成功！'</span>);
                            $(<span style="color:#009900">'#captcha_img'</span>).click();
                        } <span style="color:#000088">else</span> {
                            $.toast(<span style="color:#009900">'提交失败！'</span>);
                            $(<span style="color:#009900">'#captcha_img'</span>).click();
                        }
                    }
                });
            });
});</code></span>

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

Sunmeok

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
SSM项目之商铺系统-商品增加(十五)

我们要完成商品增加的功能首先我们先来看看商品增加的思路，我们前台显示的话是这样的我们需要为这个页面完成什么？首先获取商品类型，让其自动显示在这个页面，然后特别的还有需要传入详情图片，详情图片是多个，但是我们之前已经完成了通过一个店铺的信息得到该店铺所有商品的列表，我们在js中直接调用之前的方返回的值交给前端处理即可这里我们只需要编辑加入新商品的功能。首先DAO层的开发...
复制链接

扫一扫