【原】无脑操作：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="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="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: '人员编号',  50, align: 'center', halign: 'center', hidden: 'true'},
            {field: 'personname', title: '人员名称',  200, align: 'center', halign: 'center'},
            {field: 'personage', title: '人员年龄',  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");
        }
    });
};

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