SprongBoot+Easyui ——商品新增

一、商品的新增

  注：这里的富文本编辑就要导入kindeditor组件，具体的用法参考：http://kindeditor.net/doc.php

 二、页面  （页面代码太多了，就截关键的部分）

三、 js部分 

/*KindEditorUtil是写的一个公共的的js，把项目中用到的ajax都封装到这里面，
          KindEditorUtil.createEditor  是调用KindEditorUtil中的createEditor方法 */
    $(function(){
        //和form下的itemDesc组件绑定   itemDesc :商品描述
        var itemAddEditor = KindEditorUtil.createEditor("#itemAddForm [name=itemDesc]");
        KindEditorUtil.init({fun:function(node){
            KindEditorUtil.changeItemParam(node, "itemAddForm");
        }});
    });
          //提交
    function submitForm(){
        //表单校验
        if(!$('#itemAddForm').form('validate')){
            $.messager.alert('提示','表单还未填写完成!');
            return ;
        }
        //转化价格单位，将元转化为分
        $("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100);
        itemAddEditor.sync();//将输入的内容同步到多行文本中
        
        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);//将对象转化为json字符串
        
        $("#itemAddForm [name=itemParams]").val(paramJson);
        
       
        /*    $("#itemAddForm").serialize()
               是ajax参数的其中写法之一，
               利⽤表单序列化，可以将form表单所有的name和值转换为json(也就是为key-value形式的字符串)，不需要我们拼接json串了，*/
        $.post("/item/save",$("#itemAddForm").serialize(), function(data){
            if(data.status == 200){
                $.messager.alert('提示','新增商品成功!');
            }else{
                $.messager.alert("提示","新增商品失败!");
            }
        });
    }
         //重置
    function clearForm(){
        $('#itemAddForm').form('reset');
        itemAddEditor.html('');
    }    

  四、后端代码

1、创建 SystemResult文件：用于返回服务器得状态码

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;

@Data
@AllArgsConstructor
@NoArgsConstructor
@Accessors(chain = true)
public class SystemResult {
    /* 通过SysResult对象 实现前后端数据交互的载体*/
    private Integer status; //后端服务器运行的返回的状态码
    private String msg;  //服务器返回的提示
    private Object date; //服务器返回的业务数据

    public static SystemResult fail(){
        return new SystemResult(201,"服务器请求异常",null);
    }

    public static SystemResult success(){
        return new SystemResult(200,"服务器执行成功",null);
    }
    public static SystemResult success(Object data){
        return new SystemResult(200,"服务器执行成功",data);
    }
    public static SystemResult success(String msg,Object date){
        return new SystemResult(200,msg,date);
    }

}

2、创建itemController 文件

/**
     * 业务说明: 商品新增
     * URL地址:    http://localhost:8091/item/save
     * 参数:    form表单 item对象接受
     * 返回值: SystemResult对象
     */
    @RequestMapping("/save")
    public SystemResult saveItem(Item item){

        try {
             itemService.saveItem(item);
            return SystemResult.success();
        }catch (Exception e){
            e.printStackTrace();
            return SystemResult.fail();

        }
    }

3、itemservice 文件以及 impl

public interface ItemService {

    void  saveItem(Item item);

}

@Transactional  //开启事务控制
    @Override
    public void saveItem(Item item) {
        item.setStatus(1) //设置启动状态
                .setCreated(new Date())
                .setUpdated(item.getCreated());
        itemMapper.insert(item);
    }

4、MP自动填充实现  

由于入库时需要手动的完成时间字段的操作,。任何一张表的入库/更新都需要操作时间.将需要自动填充的属性 进行标识 

@Data
@Accessors(chain=true)
public class BasePojo implements Serializable{
    @TableField(fill = FieldFill.INSERT) //新增操作有效
    private Date created;
    @TableField(fill = FieldFill.INSERT_UPDATE) //新增和更新操作有效
    private Date updated;

}

5、编辑配置类

@Slf4j
@Component
public class MyMetaObjectHandler implements MetaObjectHandler {
    /*新增入库时，需要维护 created 、updated*/
    @Override
    public void insertFill(MetaObject metaObject) {
         Date date = new Date();
         this.setFieldValByName("created", date, metaObject);
         this.setFieldValByName("updated", date, metaObject);
    }

    @Override
    public void updateFill(MetaObject metaObject) {
        this.setFieldValByName("updated", new Date(), metaObject);

    }
}

6、添加全局异常处理机制.

//spring中得通知 核心原理 ：spring aop 机制
public class SysResultException {
    //当程序发生异常时，如果没有try-catch 则直接向上抛出异常
    //该注解只拦截运行时异常
    @ExceptionHandler(RuntimeException.class)
    public SystemResult exception (Exception e){
        e.printStackTrace();
        return SystemResult.fail();
    }

}

五、效果展示