毕业设计_后台_新增商品

数据库设计

需求文档:

对应的表结构

CREATE TABLE `tb_item` (
  `id` bigint(10) NOT NULL AUTO_INCREMENT COMMENT '商品id，同时也是商品编号',
  `title` varchar(100) NOT NULL COMMENT '商品标题',
  `sell_point` varchar(150) DEFAULT NULL COMMENT '商品卖点',
  `price` bigint(20) NOT NULL COMMENT '商品价格，单位为：分',
  `num` int(10) NOT NULL COMMENT '库存数量',
  `barcode` varchar(30) DEFAULT NULL COMMENT '商品条形码',
  `image` varchar(500) DEFAULT NULL COMMENT '商品图片',
  `cid` bigint(10) NOT NULL COMMENT '所属类目，叶子类目',
  `status` tinyint(4) NOT NULL DEFAULT '1' COMMENT '商品状态，1-正常，2-下架，3-删除',
  `created` datetime NOT NULL COMMENT '创建时间',
  `updated` datetime NOT NULL COMMENT '更新时间',
  PRIMARY KEY (`id`),
  KEY `cid` (`cid`),
  KEY `status` (`status`),
  KEY `updated` (`updated`)
) ENGINE=InnoDB AUTO_INCREMENT=40 DEFAULT CHARSET=utf8 COMMENT='商品表';

对数据所做的优化:
1.为了避免小数计算带来的问题，我们在数据库中使用分为单位设置价格。
2.加入商品状态的字段
3.新增创建时间和更新时间
4.将热数据与冷数据分离，像我们经常不需要改变的数据应该新建一张表存储或者放到redis缓存中，例如商品描述信息，因为商品描述信息不经常改变，并且存储的数据较多，如果放在一张表里边，mysql默认会为一张表的所有信息存储在一个文件中，会造成文件越来越大，所以最好分开。

//商品描述表
CREATE TABLE `tb_item_desc` (
  `item_id` bigint(20) DEFAULT NULL COMMENT '商品ID',
  `item_desc` text COMMENT '商品描述',
  `created` datetime DEFAULT NULL COMMENT '创建时间',
  `updated` datetime DEFAULT NULL COMMENT '更新时间',
  KEY `item_id` (`item_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='商品描述表';

商品描述表与商品表属于1：1的关系,描述表中没有设置主键，需要在实体类中添加主键

静态页面

点击商品类目后首先将商品类型的id作为cid传入隐藏域中，然后在商品类目后显示选择的商品名称

js中的if与java中的if不同，这里的意思是data和data.fun同时不为undefined


转换页面中的价格:
在页面中使用的是元做单位，在提交表单时需要将元转换为分

使用eval函数将string类型转换为指定的类型然后做操作

function submitForm(){
        if(!$('#itemAddForm').form('validate')){
            $.messager.alert('提示','表单还未填写完成!');
            return ;
        }
        //处理商品的价格的单位，将元转化为分
        $("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100);
        //将编辑器中的内容同步到隐藏多行文本中
        itemAddEditor.sync();

        //输入的规格参数数据保存为json
        var paramJson = [];
        $("#itemAddForm .params li").each(function(i,e){
            var trs = $(e).find("tr");
            var group = trs.eq(0).text();
            var ps = [];
            for(var i = 1;i<trs.length;i++){
                var tr = trs.eq(i);
                ps.push({
                    "k" : $.trim(tr.find("td").eq(0).find("span").text()),
                    "v" : $.trim(tr.find("input").val())
                });
            }
            paramJson.push({
                "group" : group,
                "params": ps
            });
        });
        paramJson = JSON.stringify(paramJson);

        $("#itemAddForm [name=itemParams]").val(paramJson);

        /*
        $.post("/rest/item/save",$("#itemAddForm").serialize(), function(data){
            if(data.status == 200){
                $.messager.alert('提示','新增商品成功!');
            }
        });
        */

        //提交到后台的RESTful
        $.ajax({
           type: "POST",
           url: "/rest/item",
           data: $("#itemAddForm").serialize(), //表单序列化，将所有的输入内容转化成K/V数据格式
           statusCode : {
               201 : function(){
                   $.messager.alert('提示','新增商品成功!');
               },
                400 : function(){
                   $.messager.alert('提示','提交的参数不合法!');
               },
               500 : function(){
                   $.messager.alert('提示','新增商品失败!');
               }
           }
        });
    }

富文本编辑器的使用

使用富文本编辑器上传商品描述
首先添加kindeditor的js

然后页面初始化时创建kindeditor


定义多行文本域

在提交时需要使用sync()将富文本编辑器中的内容同步到多行文本域中