Migo商城2.0 商品的添加功能实现七

接着看商品的添加功能

向商品表添加一条记录。

商品的基本信息保存到：tb_item

商品的描述：tb_item_desc

下图数据库表分析可以看出，为保证商品id不能重复，考虑到并发的需求，将自动增长删除

看下图jd商品id的设计是一个数值类型

这里用一个工具类IDUtils生成id

这里将商品描述和商品的基本数据分离：

商品描述的数据量大，会导致数据文件变大，影响查询速度。

后期会对商品描述数据的存储做改造，所以需要将描述数据分离

点击商品类目的叶子节点产生的事件

如图：

不再解释过多了

接着看新增页面的中的价格有个注意点：

再往下，商品描述，就是kindEditor的使用

1 导入js文件

2 商品描述

3 通过JS创建出富文本编辑器

最后，提交商品数据

1	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>

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(),
	   success: function(msg){
		   $.messager.alert('提示','新增商品成功!');
	   },
	   error: function(){
		   $.messager.alert('提示','新增商品失败!');
	   }
	});
}

如何做到更加明了的restful化，查jquery api 发现：

- statusCode (默认值：{})
  
  类型：PlainObject
  
  数字HTTP代码，以及当响应具有对应的代码时执行的函数，所构成的对象。举个例子，以下代码将提醒响应状态是404：
  1
  2
  3
  4
  5
  6
  7
  8
  > $.ajax({
  > statusCode: {
  > 404: function() {
  > alert( "page not found" );
  > }
  > }
  > });
  >
>

如果请求成功了，状态代码函数会取用和success回调函数同样的参数；如果以失败告终（包括3xx重定向），状态代码函数会取用和error回调函数同样的参数。

1.5

所以上述代码ajax提交这里可以更改为：

//提交到后台的RESTful
$.ajax({
	   type: "POST",
	   url: "/rest/item",
	   data: $("#itemAddForm").serialize(),//表单序列化,不明白查api
	   statusCode : {
			   201 : function(){
				   $.messager.alert('提示','新增商品成功!');
			   },
				400 : function(){
				   $.messager.alert('提示','提交的参数不合法!');
			   },
			   500 : function(){
				   $.messager.alert('提示','新增商品失败!');
			   }
		   }

	});

商品描述后台处理

因为使用了通用mapper，那就按照通用mapper的方法来

看@id 这样就可以认为是对应表的主键id了，一下子方便了不少，省去了，第一个版本中的添加属性条件的判断

@Table(name = "tb_item_desc")
public class ItemDesc extends BasePojo{
    
    @Id//对应tb_item中的id
    private Long itemId;
    
    private String itemDesc;

    public Long getItemId() {
        return itemId;
    }

    public void setItemId(Long itemId) {
        this.itemId = itemId;
    }

    public String getItemDesc() {
        return itemDesc;
    }

    public void setItemDesc(String itemDesc) {
        this.itemDesc = itemDesc;
    }
    
    

}

service代码实现：

因要保证事务一致性，所以保存商品和商品描述要在一个方法内实现，具体代码如下：

ItemDescService：

package com.migo.service;

import com.migo.pojo.ItemDesc;
import org.springframework.stereotype.Service;

/**
 * Author  知秋
 * Created by kauw on 2016/11/12.
 */
@Service
public class ItemDescService extends BaseService<ItemDesc> {
}

ItemService

package com.migo.service;

import com.migo.pojo.Item;
import com.migo.pojo.ItemDesc;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

/**
 * Author  知秋
 * Created by kauw on 2016/11/12.
 */
@Service
public class ItemService extends BaseService<Item> {
    @Autowired
    private ItemDescService itemDescService;
    //desc参考前端页面传过来的数据是序列化成字符串的
    public Boolean saveItem(Item item,String desc){
        item.setId(null);//强制设置id为null，避免产生安全漏洞
        //'商品状态，1-正常，2-下架，3-删除'
        item.setStatus(1);

        //保存商品数据
        Integer save = super.save(item);

        ItemDesc itemDesc=new ItemDesc();
        itemDesc.setItemDesc(desc);
        itemDesc.setItemId(item.getId());

        //保存商品描述数据
        Integer save1 = this.itemDescService.save(itemDesc);
        return save.intValue()==1&&save1.intValue()==1;

    }
}

controller实现

package com.migo.controller;

import com.migo.pojo.Item;
import com.migo.service.ItemService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
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.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

/**
 * Author  知秋
 * Created by kauw on 2016/11/12.
 */
@Controller
@RequestMapping("item")
public class ItemController {
    private static final Logger LOGGER= LoggerFactory.getLogger(ItemController.class);
    @Autowired
    private ItemService itemService;

    /**
     * 新增商品
     */
@RequestMapping(method = RequestMethod.POST)
    public ResponseEntity<Void> addItem(Item item, @RequestParam("desc") String desc){

    if (LOGGER.isInfoEnabled()) {
        LOGGER.info("新增商品，item = {}, desc = {}", item, desc);
    }
    /**
     * TODO 校验以后完善
     */
    if (item.getPrice()==null||item.getPrice().intValue()==0){
        if (LOGGER.isInfoEnabled()){
            LOGGER.info("新增商品时用户输入的参数不合法，item = {}, desc = {}", item, desc);
        }
        // 参数有误，返回400
        //ResponseEntity<Void> build();
        return ResponseEntity.status(HttpStatus.BAD_REQUEST).build();
    }

    try {
        Boolean saveItem = this.itemService.saveItem(item, desc);
        if (saveItem) {
            if (LOGGER.isInfoEnabled()) {
                LOGGER.info("新增商品成功! id = {}", item.getId());
            }
            //CREATED(201, "Created"),
            return ResponseEntity.status(HttpStatus.CREATED).build();
        }
    } catch (Exception e) {
        LOGGER.error("新增商品失败! item = " + item + ", desc = " + desc, e);
        e.printStackTrace();


    }
    return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
}

}

运行项目

出错：

解决：

package com.migo.mapper;

import com.migo.pojo.Item;
import tk.mybatis.mapper.common.Mapper;

/**
 * Author  知秋
 * Created by kauw on 2016/11/12.
 */
public interface ItemMapper extends Mapper<Item> {
}

package com.migo.mapper;

import com.migo.pojo.ItemDesc;
import tk.mybatis.mapper.common.Mapper;

/**
 * Author  知秋
 * Created by kauw on 2016/11/12.
 */
public interface ItemDescMapper extends Mapper<ItemDesc> {
}

重启运行，添加图片的时候出错：

本来还以为是父子容器的关系，改了一下，发现原来是自己写属性配置文件是搞错了，真坑。。。

图片上传功能完成

插入图片描述，出错：

解决：

PicService代码修改为：

@Service
public class ItemService extends BaseService<Item> {
    @Autowired
    private ItemDescService itemDescService;
    //desc参考前端页面传过来的数据是序列化成字符串的
    public Boolean saveItem(Item item,String desc){
        // 1、生成商品id
        long itemId = IDUtils.genItemId();
        // 2、对TbItem对象补全属性。
        item.setId(itemId);

        //'商品状态，1-正常，2-下架，3-删除'
        item.setStatus(1);

        //保存商品数据
        Integer save = super.save(item);

        ItemDesc itemDesc=new ItemDesc();
        itemDesc.setItemDesc(desc);
        itemDesc.setItemId(item.getId());

        //保存商品描述数据
        Integer save1 = this.itemDescService.save(itemDesc);
        return save.intValue()==1&&save1.intValue()==1;

    }
}

商品增加成功，如图所示：

Migo商城2.0 商品的添加功能实现 七