【SSM分布式架構電商項目-09】後台管理系統商品規格參數

什麼是商品規格參數

分析：
同一個商品類目下的商品的規格參數的格式（內容）一樣，只是具體的資料不同。
不同的類目的商品規格參數的格式是不同的。
如何?。
方案一：
針對每一個商品類目都建立一張表，來儲存規格參數資料。就需要儲存很多張表。

可行性: 不推薦。 維護的表太多了。

方案二：
使用模板的思想實現。

方案二具體實現：
1、 模板如何儲存。
a) 儲存到資料庫
b) 欄位不能固定
i. Map
ii. Json
2、 儲存的json結構
a) 模板結構

b) 最終資料結構
資料庫表結構

需要有2張表：
1、 模板表，需要和商品類目關聯
2、 規格參數資料表，需要和商品關聯 模板表

最終資料表

實現 匯入pojo

package com.taotao.manage.pojo;import javax.persistence.Column;import javax.persistence.GeneratedValue;import javax.persistence.GenerationType;import javax.persistence.Id;import javax.persistence.Table;@Table(name = "tb_item_param")public class ItemParam extends BasePojo {    @Id    @GeneratedValue(strategy = GenerationType.IDENTITY)    private Long id;    @Column(name = "item_cat_id")    private Long itemCatId;    @Column(name = "param_data")    private String paramData;    public Long getId() {        return id;    }    public void setId(Long id) {        this.id = id;    }    public Long getItemCatId() {        return itemCatId;    }    public void setItemCatId(Long itemCatId) {        this.itemCatId = itemCatId;    }    public String getParamData() {        return paramData;    }    public void setParamData(String paramData) {        this.paramData = paramData;    }}

package com.taotao.manage.pojo;import javax.persistence.Column;import javax.persistence.GeneratedValue;import javax.persistence.GenerationType;import javax.persistence.Id;import javax.persistence.Table;@Table(name = "tb_item_param_item")public class ItemParamItem extends BasePojo {    @Id    @GeneratedValue(strategy = GenerationType.IDENTITY)    private Long id;    @Column(name = "item_id")    private Long itemId;    @Column(name = "param_data")    private String paramData;    public Long getId() {        return id;    }    public void setId(Long id) {        this.id = id;    }    public Long getItemId() {        return itemId;    }    public void setItemId(Long itemId) {        this.itemId = itemId;    }    public String getParamData() {        return paramData;    }    public void setParamData(String paramData) {        this.paramData = paramData;    }}

建立Mapper

package com.taotao.manage.mapper;import com.github.abel533.mapper.Mapper;import com.taotao.manage.pojo.ItemParam;public interface ItemParamMapper extends Mapper<ItemParam>{}

package com.taotao.manage.mapper;import com.github.abel533.mapper.Mapper;import com.taotao.manage.pojo.ItemParamItem;public interface ItemParamItemMapper extends Mapper<ItemParamItem>{}

建立Service

package com.taotao.manage.service;import org.springframework.stereotype.Service;import com.taotao.manage.pojo.ItemParam;@Servicepublic class ItemParamService extends BaseService<ItemParam>{}

package com.taotao.manage.service;import org.springframework.stereotype.Service;import com.taotao.manage.pojo.ItemParamItem;@Servicepublic class ItemParamItemService extends BaseService<ItemParamItem> {}

建立Controller

package com.taotao.manage.controller;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import com.taotao.manage.service.ItemParamService;@RequestMapping("item/param")@Controllerpublic class ItemParamController {    @Autowired    private ItemParamService itemParamService;}

package com.taotao.manage.controller;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import com.taotao.manage.service.ItemParamItemService;@RequestMapping("item/param/item")@Controllerpublic class ItemParamItemController {    @Autowired    private ItemParamItemService itemParamItemService;}

頁面功能 選擇類目

根據選擇的類目進行判斷，如果該類目所對應的模板存在，提醒使用者已經存在，如果模板不存在，可以建立模板。
後台開發根據類目id尋找模板的介面

package com.taotao.manage.controller;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.http.HttpStatus;import org.springframework.http.ResponseEntity;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import com.taotao.manage.pojo.ItemParam;import com.taotao.manage.service.ItemParamService;@RequestMapping("item/param")@Controllerpublic class ItemParamController {    @Autowired    private ItemParamService itemParamService;    /**     * 根據商品類目id查詢規格參數模板     *      * @param itemCatId     * @return     */    @RequestMapping(value = "{itemCatId}", method = RequestMethod.GET)    public ResponseEntity<ItemParam> queryByItemCatId(@PathVariable("itemCatId") Long itemCatId) {        try {            ItemParam record = new ItemParam();            record.setItemCatId(itemCatId);            ItemParam itemParam = this.itemParamService.queryOne(record);            if (null == itemParam) {                // 404                return ResponseEntity.status(HttpStatus.NOT_FOUND).body(null);            }            return ResponseEntity.ok(itemParam);        } catch (Exception e) {            e.printStackTrace();        }        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);    }}

JS實現

執行傳入的函數：
點擊提交事件

$("#itemParamAddTable .submit").click(function(){            var params = [];            var groups = $("#itemParamAddTable [name=group]");            groups.each(function(i,e){                var p = $(e).parentsUntil("ul").parent().find("[name=param]");                var _ps = [];                p.each(function(_i,_e){                    var _val = $(_e).siblings("input").val();                    if($.trim(_val).length>0){                        _ps.push(_val);                                         }                });                var _val = $(e).siblings("input").val();                if($.trim(_val).length>0 && _ps.length > 0){                    params.push({                        "group":_val,                        "params":_ps                    });                                 }            });            var url = "/rest/item/param/"+$("#itemParamAddTable [name=cid]").val();            $.post(url,{"paramData":JSON.stringify(params)},function(data){                $.messager.alert('提示','新增商品規格成功!',undefined,function(){                    $(".panel-tool-close").click();                    $("#itemParamList").datagrid("reload");                });            });        });

查看提交資料：

提交的資料結構：
後端實現

package com.taotao.manage.controller;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.http.HttpStatus;import org.springframework.http.ResponseEntity;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;import com.taotao.manage.pojo.ItemParam;import com.taotao.manage.service.ItemParamService;@RequestMapping("item/param")@Controllerpublic class ItemParamController {    @Autowired    private ItemParamService itemParamService;    /**     * 根據商品類目id查詢規格參數模板     *      * @param itemCatId     * @return     */    @RequestMapping(value = "{itemCatId}", method = RequestMethod.GET)    public ResponseEntity<ItemParam> queryByItemCatId(@PathVariable("itemCatId") Long itemCatId) {        try {            ItemParam record = new ItemParam();            record.setItemCatId(itemCatId);            ItemParam itemParam = this.itemParamService.queryOne(record);            if (null == itemParam) {                // 404                return ResponseEntity.status(HttpStatus.NOT_FOUND).body(null);            }            return ResponseEntity.ok(itemParam);        } catch (Exception e) {            e.printStackTrace();        }        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);    }    /**     * 新增規格參數模板     *      * @param itemCatId     * @param paramData     * @return     */    @RequestMapping(value = "{itemCatId}", method = RequestMethod.POST)    public ResponseEntity<Void> saveItemParam(@PathVariable("itemCatId") Long itemCatId,            @RequestParam("paramData") String paramData) {        try {            ItemParam itemParam = new ItemParam();            itemParam.setId(null);            itemParam.setItemCatId(itemCatId);            itemParam.setParamData(paramData);            this.itemParamService.save(itemParam);            return ResponseEntity.status(HttpStatus.CREATED).build();        } catch (Exception e) {            e.printStackTrace();        }        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();    }}

測試效果:

然後我們在重新選擇手機類目：

點擊確定會重新開啟選擇類目框：
新增商品時套用模板輸入資料 選擇類目時觸發載入模板

動態產生form表單內容:

添加商品選擇類目（選擇手機）之後效果如下：
點擊提交按鈕，將使用者的輸入，產生json資料