使用Springboot/Thymelef/Layui添加数据的几个步骤和注意事项

通过几个示例，进一步总结了Springboot框架的基本应用。下面是添加数据的几个注意事项：

一、实体类的建立

根据数据库的字段名和字段类型建立实体类，可借助Lombok

这里是一个“一对多”的例子

@Data
public class JM_kkpc {
   private Integer id;
   private String pch;
   private String kkyh;
   private String skhm;
   private String skzh;
   private String tjr;
   private String bz;
   private Date create_time;
   private List<JM_kkmx> jm_kkmxes;
}

二、Mapper.xml

定义resultMap，使用inner join联合查询，实现“一对多”的查询语句。

<?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="pers.gl.mapper.bank.JM_kkpcMapper">
   <!--一对多，一个PCH对应多名人员,property对应实体类中对象的名称,column对应sql查询语句查询结果的字段名-->
   <resultMap id="getOneByPchMap" type="pers.gl.model.bank.JM_kkpc">
       <result property="pch" column="pch"></result>
       <result property="kkyh" column="kkyh"></result>
       <result property="skhm" column="skhm"></result>
       <result property="skzh" column="skzh"></result>
       <collection property="jm_kkmxes"
                   ofType="pers.gl.model.bank.JM_kkmx">
           <id column="id" property="id"></id>
           <result column="tjr" property="tjr"></result>
           <result column="create_time" property="create_time"></result>
           <result column="xm" property="xm"></result>
           <result column="sfzh" property="sfzh"></result>
           <result column="yhzh" property="yhzh"></result>
           <result column="ykkje" property="ykkje"></result>
           <result column="bz" property="bz"></result>
           <result column="yhzh" property="yhzh"></result>
       </collection>
   </resultMap>
   <!--根据一个PCH,查询到实体类列表-->
   <select id="getOneByPch" parameterType="String"
           resultMap="getOneByPchMap">
      SELECT       a.pch,a.kkyh,a.skhm,a.skzh,b.tjr,b.bz,b.create_time,b.xm,b.sfzh,b.ykkje,b.id,b.yhzh
      FROM jm_kkpc a
      inner join jm_kkmx b
      on a.pch=b.pch
      where a.pch=#{pch}
      order by id desc
   </select>

   <!-- 全部数据查询扣款批次 -->
   <select id="findAll" resultType="pers.gl.model.bank.JM_kkpc">
      select * from jm_kkpc order by id desc
   </select>

   <!-- 插入数据-->
   <insert id="insertData" parameterType="pers.gl.model.bank.JM_kkpc">
      insert into jm_kkpc(pch,kkyh,skhm,skzh,tjr,bz,create_time) values(#{pch},#{kkyh},#{skhm},#{skzh},#{tjr},#{bz},#{create_time})
   </insert>
</mapper>

三、数据接口Interface

public interface JM_kkpcMapper {
   //全部数据
   public List<JM_kkpc> findAll();
   //插入数据
   public int insertData(JM_kkpc jm_kkpc);
   //根据一个PCH,查询到实体类列表
   public List<JM_kkpc> getOneByPch(String pch);
}

四、服务Service

使用ResultData产生Layui接口要求的JSON数据；插入数据时，插入“当前日期时间”和“用户登录信息”，这里的登录使用shiro。

@Service
public class JM_kkpcService {
   @Autowired
   private JM_kkpcMapper jm_kkpcMapper;
   // 列表全部数据，使用分页插件pagehelper
   public ResultData<JM_kkpc> findAllPage(int page, int limit) {
       Page<JM_kkpc> pages = PageHelper.startPage(page, limit);
       // 查询数据
       List<JM_kkpc> lists = jm_kkpcMapper.findAll();
       // 组装
       ResultData<JM_kkpc> listData = new ResultData<>();
       listData.setCode(0);
       listData.setMsg("");
       listData.setCount(pages.getTotal());
       listData.setData(lists);
       // 返回组装后的数据
       return listData;
  }

   // 插入数据
   public int insertData(JM_kkpc jm_kkpc) {
       // 添加创建时间为当前日期时间
       jm_kkpc.setCreate_time(new Date());
       // 添加登录用户的信息
       jm_kkpc.setTjr((String) SecurityUtils.getSubject().getPrincipal());
       return jm_kkpcMapper.insertData(jm_kkpc);
  }

   //根据一个PCH，查询实体类列表
   public List<JM_kkpc> getOneByPch(String pch){
       return jm_kkpcMapper.getOneByPch(pch);
  }
}

五、前端页面

1、列表页面使用的Layui的表格渲染

注意toolbar的两种情况：第1个是表头的按钮；第2个是每行的按钮，分别对应不同的事件。

table.on('toolbar(table-list-filter)', function (obj) {})

//每行的按钮事件
table.on('tool(table-list-filter)', function (obj) {
   var data = obj.data;
   var layEvent = obj.event;
  //触发事件
   switch(obj.event){
   case 'view':
     layer.open({
           type: 2,
           title: "扣款人员明细",
           area: ['80%', '80%'],
           shadeClose: true,
           content:getContextPath()+ '/kkpc/view/'+ data.pch
          });
   break;
   case 'del':
     layer.msg('删除');
   break;
   case 'edit':
     layer.msg('编辑');
   break;
  };
});

2、添加页面为了让表单自动产生yyyyMMdd格式的文本，使用如下JS语句

//格式化日期
function formatDate(date) {
   date = new Date();
   var y = date.getFullYear();
   var m = date.getMonth() + 1;
   m = m < 10 ? '0' + m : m;
   var d = date.getDate();
   d = d < 10 ? ('0' + d) : d;
   return y + m +d;
}
var today=new Date();
var submitTime=formatDate(today);
$("#pch").attr('value',submitTime);

3、在添加前验证表单的必填项，使用如下JS语句（其实另一个页面使用的layui的form.on）。这里面实现了，添加数据后，弹窗提示成功添加，然后关闭当前页面，刷新父页面。

function check() {
//根据ID获取值
var xm = document.getElementById("pch").value;
if(xm ==  null || xm == '') {
alert("不能为空");
return false;
}
       return true;
}

$("#btn-add").click(function() {
   if(check()){
       $.ajax({
           url: getContextPath() +"/kkpc/insertData",
           type: "post",
           data: $("#form-add").serialize(),
           dataType: "json",
           success: function(res) {
                    if (res.success) {
                   alert(res.msg); window.close();parent.location.reload();
              } else {
                  alert(res.msg);
                }
          },
           error:function(xhr){
                alert("发生错误"+xhr.status);
          }
      });
  }
});

4、查看页面使用了Thymeleaf模板引擎，表格的主要代码如下：

注意：序号的生成、删除链接的两种形式对比

<table class="layui-table" th:each="pcmx:${onebypch}">
       <colgroup>
           <col width="150">
           <col width="150">
           <col width="200">
           <col>
       </colgroup>
       <thead>
       <tr>
           <th>序号</th>
           <th >姓名</th>
           <th >身份证号码</th>
           <th >银行账号</th>
           <th >应扣款金额</th>
           <th>操作</th>
       </tr>
       </thead>
       <tbody>
       <tr th:each="rymx:${pcmx.jm_kkmxes}">
           <td th:text="${rymxStat.index+1}">序号</td>
           <td th:text="${rymx.xm}">张三</td>
           <td th:text="${rymx.sfzh}">3703**</td>
           <td th:text="${rymx.yhzh}">9137***</td>
           <td th:text="${rymx.ykkje}">100.00</td>
        <!--<td><a th:href="@{/kkmx/del(id=${rymx.id})}">删除</a></td>-->
           <td><a href="javascript:;" th:onclick="shanchu([[${rymx.id}]]);">删除</a></td>
       </tr>
       </tbody>
</table>

这是删除的JS代码：

//删除代码
function shanchu(id){
if (prompt("请输入密码：") == 'ok') {
$.ajax({
 url:getContextPath() +'/kkmx/del',
 data:{'id':id},
 type:'post',
 success:function(data){
 if(data.success){
          alert(data.msg);
          window.location.reload();
}
 else{
          alert(data.msg);
          window.location.reload();
  }
}
});
};
};