【原】无脑操作：IDEA + maven + SpringBoot + JPA + EasyUI实现CRUD及分页

背景：上一篇文章的界面太丑、没有条件查询功能。所以做一些改进，整合EasyUI做实现。（仅以此文纪念表格中出现的这些朋友工作六周年，祭奠一下逝去的青春^_^）

一、开发环境（参照上一篇文章）

补充：EasyUI直接从官网随便下载一个版本即可，本文用的版本是 1.3.3

二、程序结构：java目录下都是服务端代码，resources目录下templates目录存放页面文件，static目录下存放JavaScript文件、CSS文件、图片等资源文件

三、具体实现（Talk is cheap.Show your my code.该写的注释都在代码中^_^）

1、pom.xml（同上一篇）

2、resources目录下新建application.properties（当然喜欢用yaml的可以用yaml）（同上一篇）

3、创建SpringBoot程序启动类SpringbootApplication.java（同上一篇）

4、创建实体类Person.java

 package cn.temptation.model;

 import javax.persistence.*;

 //建库建表
 //DROP TABLE person;
 //
 //CREATE TABLE person
 //(
 //personid INT AUTO_INCREMENT PRIMARY KEY,
 //personname VARCHAR(10) NOT NULL,
 //personage INT NOT NULL
 //);
 //
 //INSERT INTO person VALUES
 //(NULL, '张洋', 21), (NULL, '张兄家', 20), (NULL, '王生杰', 22),
 //(NULL, '洪自军', 21), (NULL, '吴庆庆', 21), (NULL, '武建昌', 22), (NULL, '叶宇', 18);
 //
 //SELECT * FROM person;
 @Entity
 @Table(name = "person")
 public class Person {
     @Id
     @GeneratedValue(strategy = GenerationType.IDENTITY)
     @Column(name = "personid")
     private Integer personid;
     @Column(name = "personname")
     private String personname;
     @Column(name = "personage")
     private Integer personage;

     public Person() {
     }

     public Person(String personname, Integer personage) {
         this.personname = personname;
         this.personage = personage;
     }

     public Integer getPersonid() {
         return personid;
     }

     public void setPersonid(Integer personid) {
         this.personid = personid;
     }

     public String getPersonname() {
         return personname;
     }

     public void setPersonname(String personname) {
         this.personname = personname;
     }

     public Integer getPersonage() {
         return personage;
     }

     public void setPersonage(Integer personage) {
         this.personage = personage;
     }
 }

5、创建DAO接口PersonDao.java

 package cn.temptation.dao;

 import cn.temptation.model.Person;
 import org.springframework.data.jpa.repository.JpaRepository;
 import org.springframework.data.jpa.repository.JpaSpecificationExecutor;

 /**
  * 因为需要使用分页和条件查询，所以从JpaRepository接口 和 JpaSpecificationExecutor接口继承
  */
 public interface PersonDao extends JpaRepository<Person, Integer>, JpaSpecificationExecutor<Person> {

 }

6、创建控制器类PersonController.java

 package cn.temptation.web;

 import cn.temptation.dao.PersonDao;
 import cn.temptation.model.Person;
 import cn.temptation.util.TypeUtil;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.data.domain.Page;
 import org.springframework.data.domain.PageRequest;
 import org.springframework.data.domain.Pageable;
 import org.springframework.data.domain.Sort;
 import org.springframework.data.jpa.domain.Specification;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.ResponseBody;

 import javax.persistence.criteria.*;
 import java.util.HashMap;
 import java.util.List;
 import java.util.Map;

 @Controller
 @RequestMapping("/person")
 public class PersonController {
     @Autowired
     private PersonDao personDao;

     /**
      * 跳转至列表页
      *
      * @return
      */
     @RequestMapping("/view")
     public String view() {
         // 跳转至列表页
         return "personlist";
     }

     /**
      * 查询列表信息
      *
      * @param searchcondition 查询条件
      * @param searchcontent   查询内容
      * @param page            页数
      * @param rows            每页记录数
      * @return
      */
     @RequestMapping("/list")
     @ResponseBody
     public Map<String, Object> list(@RequestParam(value = "searchcondition", required = false) String searchcondition,
                                     @RequestParam(value = "searchcontent", required = false) String searchcontent,
                                     @RequestParam(value = "page", required = false) Integer page,
                                     @RequestParam(value = "rows", required = false) Integer rows) {
         // 创建查询规格对象
         Specification<Person> specification = new Specification<Person>() {
             @Override
             public Predicate toPredicate(Root<Person> root, CriteriaQuery<?> query, CriteriaBuilder cb) {
                 Predicate predicate = null;
                 Path path = null;

                 if (searchcondition != null && !"".equals(searchcondition)
                         && searchcontent != null && !"".equals(searchcontent)) {
                     switch (searchcondition) {
                         case "personname":      // 人员名称
                             path = root.get("personname");
                             predicate = cb.like(path, "%" + searchcontent + "%");
                             break;
                         case "personage":       // 人员年龄
                             path = root.get("personage");
                             if (TypeUtil.isNum(searchcontent)) {
                                 predicate = cb.equal(path, Integer.parseInt(searchcontent));
                             }
                             break;
                     }
                 }

                 return predicate;
             }
         };

         Pageable pageable = new PageRequest(page - 1, rows, Sort.Direction.ASC, "personid");
         Page<Person> pagePerson = personDao.findAll(specification, pageable);

         // 获取rows
         List<Person> list = pagePerson.getContent();
         // 获取count
         Long count = pagePerson.getTotalElements();

         Map<String, Object> resultMap = new HashMap();
         resultMap.put("total", count);
         resultMap.put("rows", list);
         resultMap.put("success", true);

         return resultMap;
     }

     /**
      * 新增处理 和 修改处理
      *
      * @param person
      * @return
      */
     @RequestMapping("/save")
     @ResponseBody
     public Map<String, Object> personsave(Person person) {
         Map<String, Object> resultMap = new HashMap<String, Object>();
         personDao.save(person);
         resultMap.put("success", true);
         return resultMap;
     }

     /**
      * 删除处理
      *
      * @param personid
      * @return
      */
     @RequestMapping("/delete")
     @ResponseBody
     public Map<String, Object> persondelete(@RequestParam("id") String personid) {
         Map<String, Object> resultMap = new HashMap<String, Object>();
         personDao.deleteById(Integer.parseInt(personid));
         resultMap.put("success", true);
         return resultMap;
     }
 }

7、创建工具类TypeUtil.java

 package cn.temptation.util;

 import java.util.regex.Pattern;

 public class TypeUtil {
     /**
      * 验证是否整数
      *
      * @param str
      * @return
      */
     public static boolean isNum(String str) {
         Pattern pattern = Pattern.compile("^-?[0-9]+");
         if (pattern.matcher(str).matches()) {
             return true;
         } else {
             return false;
         }
     }

     /**
      * 验证是否小数
      *
      * @param str
      * @return
      */
     public static boolean isNumEx(String str) {
         Pattern pattern = Pattern.compile("^[-+]?[0-9]+(\\.[0-9]+)?$");
         if (pattern.matcher(str).matches()) {
             return true;
         } else {
             return false;
         }
     }
 }

8、resources目录下新建templates目录，创建表现层：人员列表页面（personlist.html）

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>人员列表</title>
     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
     <script type="text/javascript" src="../easyui/jquery.min.js"></script>
     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
     <script type="text/javascript" src="../biz/person.js"></script>
 </head>
 <body>
 <!-- 表格 -->
 <table id="dg">
 </table>
 <!-- 工具栏 -->
 <div id="tb">
     <table cellpadding="0" cellspacing="0">
         <tr>
             <td>
                 <a href="javascript:loadAll()" class="easyui-linkbutton" iconCls="Arrowrefresh" plain="true">加载全部</a>
             </td>
             <td>
                 <div class="datagrid-btn-separator"></div>
             </td>
             <td>
                 &nbsp;检索条件：&nbsp;
                 <select id="searchcondition" class="easyui-combobox" name="searchcondition" style="width:200px;">
                     <option value="personname">人员名称</option>
                     <option value="personage">人员年龄</option>
                 </select>&nbsp;
             </td>
             <td>
                 <input type="text" id="searchcontent" name="searchcontent" size="20" onkeydown="if(event.keyCode==13){ queryAction(); }"/>
             </td>
             <td><a href="javascript:queryAction()" class="easyui-linkbutton" iconCls="Magnifier" plain="true">搜索</a></td>
             <td>
                 <div class="datagrid-btn-separator"></div>
             </td>
             <td><a href="javascript:openAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a></td>
             <td>
                 <div class="datagrid-btn-separator"></div>
             </td>
             <td><a href="javascript:openModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a></td>
             <td>
                 <div class="datagrid-btn-separator"></div>
             </td>
             <td><a href="javascript:deleteAction()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a></td>
         </tr>
     </table>
 </div>
 <!-- 弹出新增修改对话框 -->
 <div id="dlg" class="easyui-dialog" style="width:300px;height:200px;padding: 10px 10px" closed="true"
      buttons="#dialog-buttons" modal="true">
     <form id="fm" method="post">
         <table>
             <tr>
                 <td><label for="personname">人员名称</label></td>
                 <td><input type="text" id="personname" name="personname" class="easyui-validatebox" required="true"/>
                 </td>
             </tr>
             <tr>
                 <td><label for="personage">人员年龄</label></td>
                 <td><input type="text" id="personage" name="personage" class="easyui-validatebox" required="true"/>
                 </td>
             </tr>
         </table>
     </form>
 </div>
 <!-- 对话框按钮 -->
 <div id="dialog-buttons">
     <a href="javascript:saveAction()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
     <a href="javascript:closeDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
 </div>
 </body>
 </html>

9、resources目录下新建static目录，创建表现层：人员管理用脚本文件（person.js）

 var url;

 // 页面加载
 $(function () {
     $("#dg").datagrid({
         url: 'list',
         queryParams: {},
         title: "人员列表",
         rownumbers: true,
         fit: true,
         toolbar: "#tb",
         collapsible: true,
         pagination: true,
         pageSize: 5,
         pageList: [5, 10],
         columns: [[
             {field: 'personid', title: '人员编号', width: 50, align: 'center', halign: 'center', hidden: 'true'},
             {field: 'personname', title: '人员名称', width: 200, align: 'center', halign: 'center'},
             {field: 'personage', title: '人员年龄', width: 200, align: 'right', halign: 'center'}
         ]]
     });
 });

 // 【加载全部】按钮押下处理
 var loadAll = function () {
     // 查询条件还原为默认状态
     $('#searchcondition').combobox('setValue', 'personname');
     $('#searchcontent').val("");

     // 表格重新加载
     var param = {};
     $("#dg").datagrid('load', param);
 };

 // 【搜索】按钮押下处理
 var queryAction = function () {
     var param = {
         searchcondition: $('#searchcondition').combobox('getValue'),
         searchcontent: $('#searchcontent').val()
     };

     $("#dg").datagrid('load', param);
 };

 // 重置表单内容
 var resetValue = function () {
     $('#fm')[0].reset();
 };

 // 打开添加对话框
 var openAddDialog = function () {
     resetValue();
     $('#dlg').dialog({
         modal: true,
         title: '添加人员信息'
     });
     $('#dlg').dialog("open");
     url = "save";
 };

 // 新增处理
 var saveAction = function () {
     $("#fm").form("submit", {
         url: url,
         onSubmit: function () {
             return $(this).form("validate");
         },
         success: function (result) {
             var result = eval('(' + result + ')');
             if (result.success) {
                 $.messager.alert("系统提示", "保存成功！");
                 resetValue();
                 $("#dlg").dialog("close");
                 $("#dg").datagrid("reload");
             } else {
                 $.messager.alert("系统提示", "保存失败！");
                 return;
             }
         }
     });
 };

 // 关闭对话框
 var closeDialog = function () {
     $("#dlg").dialog("close");
     resetValue();
 };

 // 打开编辑对话框
 var openModifyDialog = function () {
     var selectedRows = $("#dg").datagrid("getSelections");

     if (selectedRows.length != 1) {
         $.messager.alert("系统提示", "请选择一条要编辑的数据！");
         return;
     }

     var row = selectedRows[0];
     $("#dlg").dialog("open").dialog("setTitle", "编辑人员信息");
     $("#fm").form("load", row);
     url = "save?personid=" + row.personid;
 };

 // 删除处理
 var deleteAction = function () {
     var selectedRows = $("#dg").datagrid("getSelections");

     if (selectedRows.length == 0) {
         $.messager.alert("系统提示", "请选择要删除的数据");
         return;
     }

     $.messager.confirm("系统提示", "您确定要删除这<font color=red>" + selectedRows.length + "</font>条数据吗？", function (r) {
         if (r) {
             $.post("delete", {
                 id: selectedRows[0].personid
             }, function (result) {
                 if (result.success) {
                     $.messager.alert("系统提示", "数据已成功删除！");
                     $("#dg").datagrid("reload");
                 } else {
                     $.messager.alert("系统提示", "数据删除失败，请联系工作人员！");
                 }
             }, "json");
         }
     });
 };

四、启动项目，运行效果如下