【原】無腦操作：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");
        }
    });
};

四、啟動項目，運行效果如下