【原】无脑操作：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

 1 package cn.temptation.model;
 2
 3 import javax.persistence.*;
 4
 5 //建库建表
 6 //DROP TABLE person;
 7 //
 8 //CREATE TABLE person
 9 //(
10 //personid INT AUTO_INCREMENT PRIMARY KEY,
11 //personname VARCHAR(10) NOT NULL,
12 //personage INT NOT NULL
13 //);
14 //
15 //INSERT INTO person VALUES
16 //(NULL, ‘张洋‘, 21), (NULL, ‘张兄家‘, 20), (NULL, ‘王生杰‘, 22),
17 //(NULL, ‘洪自军‘, 21), (NULL, ‘吴庆庆‘, 21), (NULL, ‘武建昌‘, 22), (NULL, ‘叶宇‘, 18);
18 //
19 //SELECT * FROM person;
20 @Entity
21 @Table(name = "person")
22 public class Person {
23     @Id
24     @GeneratedValue(strategy = GenerationType.IDENTITY)
25     @Column(name = "personid")
26     private Integer personid;
27     @Column(name = "personname")
28     private String personname;
29     @Column(name = "personage")
30     private Integer personage;
31
32     public Person() {
33     }
34
35     public Person(String personname, Integer personage) {
36         this.personname = personname;
37         this.personage = personage;
38     }
39
40     public Integer getPersonid() {
41         return personid;
42     }
43
44     public void setPersonid(Integer personid) {
45         this.personid = personid;
46     }
47
48     public String getPersonname() {
49         return personname;
50     }
51
52     public void setPersonname(String personname) {
53         this.personname = personname;
54     }
55
56     public Integer getPersonage() {
57         return personage;
58     }
59
60     public void setPersonage(Integer personage) {
61         this.personage = personage;
62     }
63 }

5、创建DAO接口PersonDao.java

 1 package cn.temptation.dao;
 2
 3 import cn.temptation.model.Person;
 4 import org.springframework.data.jpa.repository.JpaRepository;
 5 import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
 6
 7 /**
 8  * 因为需要使用分页和条件查询，所以从JpaRepository接口 和 JpaSpecificationExecutor接口继承
 9  */
10 public interface PersonDao extends JpaRepository<Person, Integer>, JpaSpecificationExecutor<Person> {
11
12 }

6、创建控制器类PersonController.java

  1 package cn.temptation.web;
  2
  3 import cn.temptation.dao.PersonDao;
  4 import cn.temptation.model.Person;
  5 import cn.temptation.util.TypeUtil;
  6 import org.springframework.beans.factory.annotation.Autowired;
  7 import org.springframework.data.domain.Page;
  8 import org.springframework.data.domain.PageRequest;
  9 import org.springframework.data.domain.Pageable;
 10 import org.springframework.data.domain.Sort;
 11 import org.springframework.data.jpa.domain.Specification;
 12 import org.springframework.stereotype.Controller;
 13 import org.springframework.web.bind.annotation.RequestMapping;
 14 import org.springframework.web.bind.annotation.RequestParam;
 15 import org.springframework.web.bind.annotation.ResponseBody;
 16
 17 import javax.persistence.criteria.*;
 18 import java.util.HashMap;
 19 import java.util.List;
 20 import java.util.Map;
 21
 22 @Controller
 23 @RequestMapping("/person")
 24 public class PersonController {
 25     @Autowired
 26     private PersonDao personDao;
 27
 28     /**
 29      * 跳转至列表页
 30      *
 31      * @return
 32      */
 33     @RequestMapping("/view")
 34     public String view() {
 35         // 跳转至列表页
 36         return "personlist";
 37     }
 38
 39     /**
 40      * 查询列表信息
 41      *
 42      * @param searchcondition 查询条件
 43      * @param searchcontent   查询内容
 44      * @param page            页数
 45      * @param rows            每页记录数
 46      * @return
 47      */
 48     @RequestMapping("/list")
 49     @ResponseBody
 50     public Map<String, Object> list(@RequestParam(value = "searchcondition", required = false) String searchcondition,
 51                                     @RequestParam(value = "searchcontent", required = false) String searchcontent,
 52                                     @RequestParam(value = "page", required = false) Integer page,
 53                                     @RequestParam(value = "rows", required = false) Integer rows) {
 54         // 创建查询规格对象
 55         Specification<Person> specification = new Specification<Person>() {
 56             @Override
 57             public Predicate toPredicate(Root<Person> root, CriteriaQuery<?> query, CriteriaBuilder cb) {
 58                 Predicate predicate = null;
 59                 Path path = null;
 60
 61                 if (searchcondition != null && !"".equals(searchcondition)
 62                         && searchcontent != null && !"".equals(searchcontent)) {
 63                     switch (searchcondition) {
 64                         case "personname":      // 人员名称
 65                             path = root.get("personname");
 66                             predicate = cb.like(path, "%" + searchcontent + "%");
 67                             break;
 68                         case "personage":       // 人员年龄
 69                             path = root.get("personage");
 70                             if (TypeUtil.isNum(searchcontent)) {
 71                                 predicate = cb.equal(path, Integer.parseInt(searchcontent));
 72                             }
 73                             break;
 74                     }
 75                 }
 76
 77                 return predicate;
 78             }
 79         };
 80
 81         Pageable pageable = new PageRequest(page - 1, rows, Sort.Direction.ASC, "personid");
 82         Page<Person> pagePerson = personDao.findAll(specification, pageable);
 83
 84         // 获取rows
 85         List<Person> list = pagePerson.getContent();
 86         // 获取count
 87         Long count = pagePerson.getTotalElements();
 88
 89         Map<String, Object> resultMap = new HashMap();
 90         resultMap.put("total", count);
 91         resultMap.put("rows", list);
 92         resultMap.put("success", true);
 93
 94         return resultMap;
 95     }
 96
 97     /**
 98      * 新增处理 和 修改处理
 99      *
100      * @param person
101      * @return
102      */
103     @RequestMapping("/save")
104     @ResponseBody
105     public Map<String, Object> personsave(Person person) {
106         Map<String, Object> resultMap = new HashMap<String, Object>();
107         personDao.save(person);
108         resultMap.put("success", true);
109         return resultMap;
110     }
111
112     /**
113      * 删除处理
114      *
115      * @param personid
116      * @return
117      */
118     @RequestMapping("/delete")
119     @ResponseBody
120     public Map<String, Object> persondelete(@RequestParam("id") String personid) {
121         Map<String, Object> resultMap = new HashMap<String, Object>();
122         personDao.deleteById(Integer.parseInt(personid));
123         resultMap.put("success", true);
124         return resultMap;
125     }
126 }

7、创建工具类TypeUtil.java

 1 package cn.temptation.util;
 2
 3 import java.util.regex.Pattern;
 4
 5 public class TypeUtil {
 6     /**
 7      * 验证是否整数
 8      *
 9      * @param str
10      * @return
11      */
12     public static boolean isNum(String str) {
13         Pattern pattern = Pattern.compile("^-?[0-9]+");
14         if (pattern.matcher(str).matches()) {
15             return true;
16         } else {
17             return false;
18         }
19     }
20
21     /**
22      * 验证是否小数
23      *
24      * @param str
25      * @return
26      */
27     public static boolean isNumEx(String str) {
28         Pattern pattern = Pattern.compile("^[-+]?[0-9]+(\\.[0-9]+)?$");
29         if (pattern.matcher(str).matches()) {
30             return true;
31         } else {
32             return false;
33         }
34     }
35 }

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>人员列表</title>
 6     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
 7     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
 8     <script type="text/javascript" src="../easyui/jquery.min.js"></script>
 9     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
10     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
11     <script type="text/javascript" src="../biz/person.js"></script>
12 </head>
13 <body>
14 <!-- 表格 -->
15 <table id="dg">
16 </table>
17 <!-- 工具栏 -->
18 <div id="tb">
19     <table cellpadding="0" cellspacing="0">
20         <tr>
21             <td>
22                 <a href="javascript:loadAll()" class="easyui-linkbutton" iconCls="Arrowrefresh" plain="true">加载全部</a>
23             </td>
24             <td>
25                 <div class="datagrid-btn-separator"></div>
26             </td>
27             <td>
28                 &nbsp;检索条件：&nbsp;
29                 <select id="searchcondition" class="easyui-combobox" name="searchcondition" style="width:200px;">
30                     <option value="personname">人员名称</option>
31                     <option value="personage">人员年龄</option>
32                 </select>&nbsp;
33             </td>
34             <td>
35                 <input type="text" id="searchcontent" name="searchcontent" size="20" onkeydown="if(event.keyCode==13){ queryAction(); }"/>
36             </td>
37             <td><a href="javascript:queryAction()" class="easyui-linkbutton" iconCls="Magnifier" plain="true">搜索</a></td>
38             <td>
39                 <div class="datagrid-btn-separator"></div>
40             </td>
41             <td><a href="javascript:openAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a></td>
42             <td>
43                 <div class="datagrid-btn-separator"></div>
44             </td>
45             <td><a href="javascript:openModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a></td>
46             <td>
47                 <div class="datagrid-btn-separator"></div>
48             </td>
49             <td><a href="javascript:deleteAction()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a></td>
50         </tr>
51     </table>
52 </div>
53 <!-- 弹出新增修改对话框 -->
54 <div id="dlg" class="easyui-dialog" style="width:300px;height:200px;padding: 10px 10px" closed="true"
55      buttons="#dialog-buttons" modal="true">
56     <form id="fm" method="post">
57         <table>
58             <tr>
59                 <td><label for="personname">人员名称</label></td>
60                 <td><input type="text" id="personname" name="personname" class="easyui-validatebox" required="true"/>
61                 </td>
62             </tr>
63             <tr>
64                 <td><label for="personage">人员年龄</label></td>
65                 <td><input type="text" id="personage" name="personage" class="easyui-validatebox" required="true"/>
66                 </td>
67             </tr>
68         </table>
69     </form>
70 </div>
71 <!-- 对话框按钮 -->
72 <div id="dialog-buttons">
73     <a href="javascript:saveAction()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
74     <a href="javascript:closeDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
75 </div>
76 </body>
77 </html>

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

  1 var url;
  2
  3 // 页面加载
  4 $(function () {
  5     $("#dg").datagrid({
  6         url: ‘list‘,
  7         queryParams: {},
  8         title: "人员列表",
  9         rownumbers: true,
 10         fit: true,
 11         toolbar: "#tb",
 12         collapsible: true,
 13         pagination: true,
 14         pageSize: 5,
 15         pageList: [5, 10],
 16         columns: [[
 17             {field: ‘personid‘, title: ‘人员编号‘, width: 50, align: ‘center‘, halign: ‘center‘, hidden: ‘true‘},
 18             {field: ‘personname‘, title: ‘人员名称‘, width: 200, align: ‘center‘, halign: ‘center‘},
 19             {field: ‘personage‘, title: ‘人员年龄‘, width: 200, align: ‘right‘, halign: ‘center‘}
 20         ]]
 21     });
 22 });
 23
 24 // 【加载全部】按钮押下处理
 25 var loadAll = function () {
 26     // 查询条件还原为默认状态
 27     $(‘#searchcondition‘).combobox(‘setValue‘, ‘personname‘);
 28     $(‘#searchcontent‘).val("");
 29
 30     // 表格重新加载
 31     var param = {};
 32     $("#dg").datagrid(‘load‘, param);
 33 };
 34
 35 // 【搜索】按钮押下处理
 36 var queryAction = function () {
 37     var param = {
 38         searchcondition: $(‘#searchcondition‘).combobox(‘getValue‘),
 39         searchcontent: $(‘#searchcontent‘).val()
 40     };
 41
 42     $("#dg").datagrid(‘load‘, param);
 43 };
 44
 45 // 重置表单内容
 46 var resetValue = function () {
 47     $(‘#fm‘)[0].reset();
 48 };
 49
 50 // 打开添加对话框
 51 var openAddDialog = function () {
 52     resetValue();
 53     $(‘#dlg‘).dialog({
 54         modal: true,
 55         title: ‘添加人员信息‘
 56     });
 57     $(‘#dlg‘).dialog("open");
 58     url = "save";
 59 };
 60
 61 // 新增处理
 62 var saveAction = function () {
 63     $("#fm").form("submit", {
 64         url: url,
 65         onSubmit: function () {
 66             return $(this).form("validate");
 67         },
 68         success: function (result) {
 69             var result = eval(‘(‘ + result + ‘)‘);
 70             if (result.success) {
 71                 $.messager.alert("系统提示", "保存成功！");
 72                 resetValue();
 73                 $("#dlg").dialog("close");
 74                 $("#dg").datagrid("reload");
 75             } else {
 76                 $.messager.alert("系统提示", "保存失败！");
 77                 return;
 78             }
 79         }
 80     });
 81 };
 82
 83 // 关闭对话框
 84 var closeDialog = function () {
 85     $("#dlg").dialog("close");
 86     resetValue();
 87 };
 88
 89 // 打开编辑对话框
 90 var openModifyDialog = function () {
 91     var selectedRows = $("#dg").datagrid("getSelections");
 92
 93     if (selectedRows.length != 1) {
 94         $.messager.alert("系统提示", "请选择一条要编辑的数据！");
 95         return;
 96     }
 97
 98     var row = selectedRows[0];
 99     $("#dlg").dialog("open").dialog("setTitle", "编辑人员信息");
100     $("#fm").form("load", row);
101     url = "save?personid=" + row.personid;
102 };
103
104 // 删除处理
105 var deleteAction = function () {
106     var selectedRows = $("#dg").datagrid("getSelections");
107
108     if (selectedRows.length == 0) {
109         $.messager.alert("系统提示", "请选择要删除的数据");
110         return;
111     }
112
113     $.messager.confirm("系统提示", "您确定要删除这<font color=red>" + selectedRows.length + "</font>条数据吗？", function (r) {
114         if (r) {
115             $.post("delete", {
116                 id: selectedRows[0].personid
117             }, function (result) {
118                 if (result.success) {
119                     $.messager.alert("系统提示", "数据已成功删除！");
120                     $("#dg").datagrid("reload");
121                 } else {
122                     $.messager.alert("系统提示", "数据删除失败，请联系工作人员！");
123                 }
124             }, "json");
125         }
126     });
127 };

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