SSM整合_年輕人的第一個增刪改查_查詢

蔚然丶丶發表於2022-04-13

寫在前面

SSM整合_年輕人的第一個增刪改查_基礎環境搭建
 SSM整合_年輕人的第一個增刪改查_查詢
 SSM整合_年輕人的第一個增刪改查_新增
 SSM整合_年輕人的第一個增刪改查_修改
 SSM整合_年輕人的第一個增刪改查_刪除
GitHub：https://github.com/say-hey/ssm_crud
Gitee：https://gitee.com/say-hey/ssm_crud

有用嗎？對於學完Spring、SpringMVC、Mybatis還無從下手的同學來說這是一個很好引子。對於正在學習同一個案例的同學，可能解決一些問題。對於需要這個案例的同學可以直接獲取。

有什麼？：xml配置檔案編寫，引入一個簡單的前端框架，使用MyBatis Generator逆向工程生成一些程式碼，使用框架簡單快速搭建一個頁面，好用的分頁工具PageHelper，簡單的前後端分離，傳送ajax請求，利用json傳遞資料，增、刪、改、查的簡單實現。

簡單嗎？內容很簡單，涉及Java程式碼不多，但是對於新手來說，最困難的部分是各種環境搭建、配置檔案、版本衝突，如果能夠根據錯誤提示動手解決，那就是一大進步。

怎麼學？如果有時間可以在B站搜尋：ssm整合crud，雷豐陽講的。如果想看到每個功能的實現過程和原始碼，可以在這裡學習，每個步驟都有註釋。也可以作為複習快速瀏覽。

2、查詢

分頁查詢、ajax請求、json資料、通用返回型別，效果如圖

1. 測試分頁請求

先配置，然後測試，通過之後進行真正的請求
使用MyBatis分頁外掛PageHelper進行分頁

新增依賴

		<!-- mybatis 分頁外掛pagehelper -->
		<!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper -->
		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper</artifactId>
			<version>5.1.2</version>
		</dependency>

mybatis-config.xml新增外掛，注意標籤順序

    <!-- 使用pagehelper外掛 -->
    <plugins>
        <plugin interceptor="com.github.pagehelper.PageInterceptor">
            <!-- 分頁合理化，如果超出總頁數，只顯示最後一頁，合理顯示 -->
            <property name="reasonable" value="true"/>
        </plugin>
    </plugins>

index.jsp最上面新增轉發請求

<!-- 測試用 -->
<!-- 來到這個頁面直接去展示員工的控制器-->
<jsp:forward page="/emps"></jsp:forward>

Controller

package com.ssm.controller;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.ssm.bean.Employee;
import com.ssm.service.EmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.List;

/**
 * 處理員工增刪改查請求
 */
@Controller
public class EmployeeController {

    @Autowired
    EmployeeService employeeService;

    /**
     * 測試
     * 查詢所有員工資料
     * 訪問index.jsp首頁查詢所有資料並分頁，將資料返回並跳轉到list.jsp頁面展示
     * @param pn 頁碼，預設第一頁
     * @param model 傳遞出去的資料
     * @return
     */
    @RequestMapping("/emps")
    public String testGetEmps(@RequestParam(value = "pn", defaultValue = "1")Integer pn, Model model){
        //使用分頁外掛
        //在使用之前只需要呼叫，傳入頁碼，每頁大小
        PageHelper.startPage(pn, 5);
        //startPage後面緊跟的就是一個分頁查詢
        List<Employee> emps = employeeService.getAll();
        //使用pageInfo包裝查詢後的結果，包括查詢出來的資料，員工列表
        //封裝員工，設定連續顯示頁碼
        PageInfo<Employee> info = new PageInfo<>(emps, 5);
        //只需要將pageinfo交給頁面，裡面封裝了詳細分頁資訊
        model.addAttribute("pageInfo", info);
        return "list";
    }
}

Service

package com.ssm.service;

import com.ssm.bean.Employee;
import com.ssm.dao.EmployeeMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class EmployeeService {
    @Autowired
    EmployeeMapper employeeMapper;

    /**
     * 查詢所有員工資料
     * @return
     */
    public List<Employee> getAll() {
        //查詢所有
        return employeeMapper.selectByExampleWithDept(null);
    }
}

在com.ssm.test中進行測試

注意@WebAppConfiguration

package com.ssm.test;


import com.github.pagehelper.PageInfo;
import com.ssm.bean.Employee;

import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
import org.junit.jupiter.api.extension.ExtendWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.mock.web.MockHttpServletRequest;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit.jupiter.SpringExtension;
import org.springframework.test.context.web.WebAppConfiguration;
import org.springframework.test.web.servlet.MockMvc;
import org.springframework.test.web.servlet.MvcResult;
import org.springframework.test.web.servlet.request.MockMvcRequestBuilders;
import org.springframework.test.web.servlet.setup.MockMvcBuilders;
import org.springframework.web.context.WebApplicationContext;

import java.util.List;

//新增springmvc到spring容器
@WebAppConfiguration
//如果您想在測試中使用Spring測試框架功能（例如）@MockBean，則必須使用@ExtendWith(SpringExtension.class)。它取代了不推薦使用的JUnit4@RunWith(SpringJUnit4ClassRunner.class)
@ExtendWith(SpringExtension.class)
@ContextConfiguration(locations = {"classpath:applicationContext.xml","classpath:springmvc.xml"})
public class MvcTest {

    //傳入springmvc的IOC，需要加註解
    @Autowired
    WebApplicationContext context;
    //虛擬mvc請求，獲取請求結果
    MockMvc mockMvc;

    //每次使用都初始化
    //junit4使用@Before，junit5使用@BeforeEach，在@Test方法之前執行
    @BeforeEach()
    public void initMockMvc() {
        //建立MockMVC，模擬mvc請求
        mockMvc = MockMvcBuilders.webAppContextSetup(context).build();
    }

    @Test
    public void testPage() throws Exception {
        //模擬傳送請求拿到返回值，get，引數第八頁，返回值
        MvcResult result = mockMvc.perform(MockMvcRequestBuilders.get("/emps").param("pn", "8")).andReturn();

        //請求成功後，請求域中會有pageInfo，取出 驗證
        MockHttpServletRequest request = result.getRequest();
        PageInfo pageInfo = (PageInfo) request.getAttribute("pageInfo");
        System.out.println("當前頁碼：" + pageInfo.getPageNum());
        System.out.println("總頁碼：" + pageInfo.getPages());
        System.out.println("總記錄數：" + pageInfo.getTotal());
        System.out.println("在頁面連續顯示頁碼");

        int[] nums = pageInfo.getNavigatepageNums();
        for (int i : nums) {
            System.out.print(i + " ");
        }

        System.out.println();
        //員工資料也封裝在pageinfo中
        List<Employee> list = pageInfo.getList();
        for(Employee e : list) {
            System.out.println( e.getEmpId() + "--" +e.getEmpName() + "--" + e.getEmail());
        }
    }
}

輸出

當前頁碼：8
總頁碼：202
總記錄數：1010
在頁面連續顯示頁碼
6 7 8 9 10 
36--b242634--b242634@123.com
37--26a8135--26a8135@123.com
38--5c13f36--5c13f36@123.com
39--da7c437--da7c437@123.com
40--28a4438--28a4438@123.com

2. 搭建分頁頁面

使用任意方法建立頁面，或者如下所示。主要內容是一個表格，可以檢視Bootstrap教程，複製需要的樣式，然後貼上，稍微修改。

在list.jsp頁面，新增下面程式碼

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%-- 是否忽略EL表示式，預設true，導致不能訪問jsp域，PATH不生效--%>
<%@ page isELIgnored="false"%>
<html>
<head>
    <title>員工列表</title>
    <%
        /* 設定路徑 以“/”開始的相對路徑是從服務下開始查詢http://localhost:8080 */
        pageContext.setAttribute("PATH", request.getContextPath());
    %>
    <script src="${PATH}/static/jquery-1.12.4.js"></script>
    <script src="${PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link href="${PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- row行必須包含在container中 -->
    <div class="container">
        <!-- 定義row行 -->
        <!-- 標題 -->
        <div class="row">
            <!-- 定義col列 -->
            <div class="col-md-12">
                <h1>SSM_CRUD</h1>
            </div>
        </div>
        <!-- 按鈕 -->
        <div class="row">
            <div class="col-md-2 col-md-offset-9">
                <button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
                <button class="btn btn-danger" id="emp_del_modal_btn">刪除</button>
            </div>
        </div>

        <!-- 顯示錶格 -->
        <div class="row">
            <div class="col-md-12">

                <table class="table table-hover" id="emps_table">
                    <!-- table table-striped-->

                    <!-- 對錶格分組 table-thead-tbody-tfoot -->
                    <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="check_all">
                        </th>
                        <th>#</th>
                        <th>EmpName</th>
                        <th>Gender</th>
                        <th>Email</th>
                        <th>DeptName</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>

                <!-- 手動新增資料測試 -->

                    <tr>
                        <td></td>
                        <td style="width: 80px">1</td>
                        <td>Tom</td>
                        <td>M</td>
                        <td style="width: 300px">Tom@123.com</td>
                        <td>研發部</td>
                        <td>
                            <button class="btn btn-primary btn-sm">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                                新增
                            </button>
                            <button class="btn btn-danger btn-sm">
                                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                刪除
                            </button>
                        </td>
                    </tr>

                    </tbody>
                </table>
            </div>

        </div>
        <!-- 分頁資料 暫時佔據位置，之後需要拼接-->
        <div class="row">

            <div class="col-md-4" id="page_info_area">
                當前第xx頁，總xx，
                    總xx條資料
            </div>
            <div class="col-md-6 col-md-offset-7" id="page_nav_area">
                首頁 << 1 2 3 4 5 >> 尾頁
            </div>
        </div>
    </div>
</body>
</html>

效果如下

3. 顯示分頁資料（JSTL）

新增JSTL表示式，然後從域中取出資料遍歷到表格中

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%-- 是否忽略EL表示式，預設true，導致不能訪問jsp域，PATH不生效--%>
<%@ page isELIgnored="false" %>
<%-- 新增JSTL表示式 --%>
<%--報錯的可以把jstl引入改成：<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>--%>
<%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<html>
<head>
    <title>員工列表</title>
    <%
        /* 設定路徑 以“/”開始的相對路徑是從服務下開始查詢http://localhost:8080 */
        pageContext.setAttribute("PATH", request.getContextPath());
    %>
    <script src="${PATH}/static/jquery-1.12.4.js"></script>
    <script src="${PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link href="${PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<!-- row行必須包含在container中 -->
<div class="container">
    <!-- 定義row行 -->
    <!-- 標題 -->
    <div class="row">
        <!-- 定義col列 -->
        <div class="col-md-12">
            <h1>SSM_CRUD</h1>
        </div>
    </div>
    <!-- 按鈕 -->
    <div class="row">
        <div class="col-md-2 col-md-offset-9">
            <button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
            <button class="btn btn-danger" id="emp_del_modal_btn">刪除</button>
        </div>
    </div>

    <!-- 顯示錶格 -->
    <div class="row">
        <div class="col-md-12">

            <table class="table table-hover" id="emps_table">
                <!-- table table-striped-->

                <!-- 對錶格分組 table-thead-tbody-tfoot -->
                <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="check_all">
                    </th>
                    <th>#</th>
                    <th>EmpName</th>
                    <th>Gender</th>
                    <th>Email</th>
                    <th>DeptName</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>

                    <%-- 手動新增資料測試 --%>
                    <%--                    <tr>
                            <td></td>
                            <td style="width: 80px">1</td>
                            <td>Tom</td>
                            <td>M</td>
                            <td style="width: 300px">Tom@123.com</td>
                            <td>研發部</td>
                            <td>
                                <button class="btn btn-primary btn-sm">
                                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                                    新增
                                </button>
                                <button class="btn btn-danger btn-sm">
                                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                    刪除
                                </button>
                            </td>
                        </tr>--%>

                    <!-- jstl表示式，取出後臺傳送資料 -->
                    <c:forEach items="${pageInfo.list}" var="p">
                        <tr>
                            <td style="width: 80px">${p.empId}</td>
                            <td>${p.empName}</td>
                            <td>${p.gender=="M"?"男":"女"}</td>
                            <td style="width: 300px">${p.email}</td>
                            <td>${p.department.deptName}</td>
                            <td>
                                <button class="btn btn-primary btn-sm">
                                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                                    新增
                                </button>
                                <button class="btn btn-danger btn-sm">
                                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                    刪除
                                </button>
                            </td>
                        </tr>
                    </c:forEach>
                </tbody>
            </table>
        </div>

    </div>
    <!-- 分頁資料 暫時佔據位置，之後需要拼接-->
    <div class="row">

        <div class="col-md-4" id="page_info_area">
            當前第xx頁，總xx，
            總xx條資料
        </div>
        <div class="col-md-6 col-md-offset-7" id="page_nav_area">
            首頁 << 1 2 3 4 5 >> 尾頁
        </div>
    </div>
</div>
</body>
</html>

訪問測試

上述方法是使用JSP頁面混合JSTL語言，高耦合。對於分頁欄，也可以用相似的方法，使用Bootstrap樣式，利用JSTL語句遍歷PageHelper資料，具體可以看https://www.bilibili.com/video/BV17W411g7zP?p=15。

4. 返回分頁json資料（Ajax）

使用json格式可以適用更多場景，需要引入

		<!-- springmvc 返回json資料，@ResponseBody -->
		<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-databind</artifactId>
			<version>2.10.1</version>
		</dependency>

註釋掉以前的/emps重新編寫方法，新增@ResponseBody註解，將分頁部分移到Service中

EmployeeController

    @ResponseBody
    @RequestMapping("/emps")
    public PageInfo getEmpsWithJson(@RequestParam(value = "pn",defaultValue = "1")Integer pn) {
        PageInfo pageInfo = employeeService.getPage(pn);
        return pageInfo;
    }

EmployeeService

    public PageInfo getPage(Integer pn) {
        // 分頁查詢
        PageHelper.startPage(pn, 5);
        List<Employee> emps = getAll();
        PageInfo<Employee> pageInfo = new PageInfo<>(emps, 5);
        return pageInfo;
    }

訪問/emps，得到如下資料

{"pageNum":1,"pageSize":5,"size":5,"startRow":1,"endRow":5,"total":1010,"pages":202,"list":[{"empId":1,"empName":"Tom","gender":"M","email":"Tom@123.com","dId":1,"department":{"deptId":1,"deptName":"開發部"}},{"empId":2,"empName":"ebeaf0","gender":"M","email":"ebeaf0@123.com","dId":1,"department":{"deptId":1,"deptName":"開發部"}},{"empId":3,"empName":"0d4141","gender":"M","email":"0d4141@123.com","dId":1,"department":{"deptId":1,"deptName":"開發部"}},{"empId":4,"empName":"85be92","gender":"M","email":"85be92@123.com","dId":1,"department":{"deptId":1,"deptName":"開發部"}},{"empId":5,"empName":"2368d3","gender":"M","email":"2368d3@123.com","dId":1,"department":{"deptId":1,"deptName":"開發部"}}],"prePage":0,"nextPage":2,"isFirstPage":true,"isLastPage":false,"hasPreviousPage":false,"hasNextPage":true,"navigatePages":5,"navigatepageNums":[1,2,3,4,5],"navigateFirstPage":1,"navigateLastPage":5,"lastPage":5,"firstPage":1}

5. 通用返回型別

上面的方法只能傳遞PageHelper分頁資料，如果是新增、刪除操作，不能通知頁面是否成功，所以要封裝一個類，用來傳遞所有訊息。

在com.ssm.bean中建立類

package com.ssm.bean;

import java.util.HashMap;
import java.util.Map;

/**
 * 通用返回型別
 */
public class Msg {
    //狀態碼 2333成功 5555失敗
    private Integer code;
    //提示資訊
    private String msg;
    //使用者返回給瀏覽器的資料
    private Map<String,Object> extend = new HashMap<>();

    //增加兩個靜態方法，一個成功，一個失敗，再加一個新增資料的方法
    public static Msg success() {
        Msg result = new Msg();
        result.setCode(2333);
        result.setMsg("ʅ（´◔౪◔）ʃ");
        return result;
    }
    public static Msg fail() {
        Msg result = new Msg();
        result.setCode(5555);
        result.setMsg("o(ﾟДﾟ)っ啥！");
        return result;
    }
    //新增查詢出來的資料,
    public Msg add(String key,Object value) {
        // getExtend()就是Map的get方法，用於獲取當前類的屬性，然後再返回當前類，可以鏈式呼叫
        this.getExtend().put(key, value);
        return this;
    }
    public Integer getCode() {
        return code;
    }
    public void setCode(Integer code) {
        this.code = code;
    }
    public String getMsg() {
        return msg;
    }
    public void setMsg(String msg) {
        this.msg = msg;
    }
    public Map<String, Object> getExtend() {
        return extend;
    }
    public void setExtend(Map<String, Object> extend) {
        this.extend = extend;
    }
}

修改/emps方法返回值型別

    @ResponseBody
    @RequestMapping("/emps")
    public Msg getEmpsWithJson(@RequestParam(value = "pn",defaultValue = "1")Integer pn) {
        PageInfo pageInfo = employeeService.getPage(pn);
        return Msg.success().add("pageInfo", pageInfo);
    }

訪問/emps

{"code":2333,"msg":"ʅ（´◔౪◔）ʃ","extend":{"PageInfo":{"pageNum":1,"pageSize":5,"size":5,"startRow":1,"endRow":5,"total":1010,"pages":202,"list":[{"empId":1,"empName":"Tom","gender":"M","email":"Tom@123.com","dId":1,"department":{"deptId":1,"deptName":"開發部"}},{"empId":2,"empName":"ebeaf0","gender":"M","email":"ebeaf0@123.com","dId":1,"department":{"deptId":1,"deptName":"開發部"}},{"empId":3,"empName":"0d4141","gender":"M","email":"0d4141@123.com","dId":1,"department":{"deptId":1,"deptName":"開發部"}},{"empId":4,"empName":"85be92","gender":"M","email":"85be92@123.com","dId":1,"department":{"deptId":1,"deptName":"開發部"}},{"empId":5,"empName":"2368d3","gender":"M","email":"2368d3@123.com","dId":1,"department":{"deptId":1,"deptName":"開發部"}}],"prePage":0,"nextPage":2,"isFirstPage":true,"isLastPage":false,"hasPreviousPage":false,"hasNextPage":true,"navigatePages":5,"navigatepageNums":[1,2,3,4,5],"navigateFirstPage":1,"navigateLastPage":5,"firstPage":1,"lastPage":5}}}

6. 構建員工列表

使用任意方法建立頁面，或者如下所示

現在可以使用json資料，利用ajax傳送請求，獲取資料然後渲染到頁面，就可以將分離前後端

新建一個index.jsp，將原始index.jsp給名為index2.jsp

將list.jsp中的表格複製過來，並刪掉JSTL相關語句

<%-- 解決亂碼 --%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%-- 是否忽略EL表示式，預設true，導致不能訪問jsp域，PATH不生效--%>
<%@ page isELIgnored="false" %>
<html>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>

    <%
        /* 設定路徑 以“/”開始的相對路徑是從服務下開始查詢http://localhost:8080 */
        pageContext.setAttribute("PATH", request.getContextPath());
    %>
    <script src="${PATH}/static/jquery-1.12.4.js"></script>
    <script src="${PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link href="${PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
    <div class="container">
        <!-- 定義row行 -->
        <!-- 標題 -->
        <div class="row">
            <!-- 定義col列 -->
            <div class="col-md-12">
                <h1>SSM_CRUD</h1>
            </div>
        </div>
        <!-- 按鈕 -->
        <div class="row">
            <div class="col-md-2 col-md-offset-9">
                <button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
                <button class="btn btn-danger" id="emp_del_modal_btn">刪除</button>
            </div>
        </div>

        <!-- 顯示錶格 -->
        <div class="row">
            <div class="col-md-12">

                <table class="table table-hover" id="emps_table">
                    <!-- table table-striped-->

                    <!-- 對錶格分組 table-thead-tbody-tfoot -->
                    <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="check_all">
                        </th>
                        <th>#</th>
                        <th>EmpName</th>
                        <th>Gender</th>
                        <th>Email</th>
                        <th>DeptName</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>

        </div>
        <!-- 分頁資料 暫時佔據位置，之後需要拼接-->
        <div class="row">

            <div class="col-md-4" id="page_info_area">

            </div>
            <div class="col-md-6 col-md-offset-7" id="page_nav_area">

            </div>
        </div>
    </div>
</body>
</html>

建立ajax請求

    <script type="text/javascript">
        $(function() {
            $.ajax({
                url : "${PATH}/emps",
                // data : "pn=" + pn,
                data : "pn=1",
                type : "GET",
                success : function(result) {
                    console.log(result)
                    //1.解析並顯示員工資料
                    build_emps_table(result);
                    //2.解析並顯示分頁資訊
                    build_page_info(result);
                    //3.解析並顯示分頁欄
                    build_page_nav(result);
                }
            });
        });
            //構建員工表
        function build_emps_table(result) {
            //每次構建之前要清空
            $("#emps_table tbody").empty();

            //獲取到員工列表
            var emps = result.extend.pageInfo.list;
            //利用jQuery的each遍歷,index:索引 item：當前物件
            $.each(emps, function(index, item) {
                //alert(item.empName);
                //建立出要展示的<td>標籤
                var checkboxTd = $("<td><input type='checkbox' class='check_item'/></td>");
                var empIdTd = $("<td></td>").append(item.empId);
                var empNameTd = $("<td></td>").append(item.empName);
                var genderTd = $("<td></td>").append(
                    item.gender == "M" ? "男" : "女");
                var emailTd = $("<td></td>").append(item.email);
                var deptNameTd = $("<td></td>")
                    .append(item.department.deptName);

                //1. 在修改刪除按鈕上統一新增 類標識 edit_btn  delete_btn
                var editBtn = $("<button></button>").addClass(
                    "btn btn-primary btn-sm edit_btn").append("<span></span>")
                    .addClass("glyphicon glyphicon-pencil").append("編輯");

                //2. 在 編輯/刪除 按鈕上新增當前所選物件id.或者從這個的父層查詢第一個tr第一個td的值
                editBtn.attr("edit-id",item.empId);
                var delBtn = $("<button></button>").addClass(
                    "btn btn-danger btn-sm delete_btn").append("<span></span>")
                    .addClass("glyphicon glyphicon-trash").append("刪除");
                delBtn.attr("del-id",item.empId);

                //將倆個按鈕放到td中去
                var btnTd = $("<td></td>").append(editBtn).append(" ").append(
                    delBtn);
                //append方法執行完之後還返回原來的元素，就是tr，可以繼續新增
                $("<tr></tr>").append(checkboxTd).append(empIdTd).append(empNameTd).append(
                    genderTd).append(emailTd).append(deptNameTd).append(
                    btnTd)
                    //新增到
                    .appendTo("#emps_table tbody")
            });
        }

    </script>

7. 構建分頁條

構建分頁條，將請求提取為方法

    <script type="text/javascript">
        //1.頁面載入完成後，直接傳送ajax請求，要到分頁資料
        $(function() {
            //頁面載入後去首頁
            to_page(1);
        });

        //2.查詢指定頁資料
        function to_page(pn) {
            $.ajax({
                url : "${PATH}/emps",
                data : "pn=" + pn,
                type : "GET",
                success : function(result) {
                    //console.log(result)
                    //1.解析並顯示員工資料
                    build_emps_table(result);
                    //2.解析並顯示分頁資訊
                    build_page_info(result);
                    //3.解析並顯示分頁欄
                    build_page_nav(result);
                }
            });
        }

        //構建員工表
        function build_emps_table(result) {
            //每次構建之前要清空
            $("#emps_table tbody").empty();

            //獲取到員工列表
            var emps = result.extend.pageInfo.list;
            //利用jQuery的each遍歷,index:索引 item：當前物件
            $.each(emps, function(index, item) {
                //alert(item.empName);
                //建立出要展示的<td>標籤
                var checkboxTd = $("<td><input type='checkbox' class='check_item'/></td>");
                var empIdTd = $("<td></td>").append(item.empId);
                var empNameTd = $("<td></td>").append(item.empName);
                var genderTd = $("<td></td>").append(
                    item.gender == "M" ? "男" : "女");
                var emailTd = $("<td></td>").append(item.email);
                var deptNameTd = $("<td></td>")
                    .append(item.department.deptName);

                //1. 在修改刪除按鈕上統一新增 類標識 edit_btn  delete_btn
                var editBtn = $("<button></button>").addClass(
                    "btn btn-primary btn-sm edit_btn").append("<span></span>")
                    .addClass("glyphicon glyphicon-pencil").append("編輯");

                //2. 在 編輯/刪除 按鈕上新增當前所選物件id.或者從這個的父層查詢第一個tr第一個td的值
                editBtn.attr("edit-id",item.empId);
                var delBtn = $("<button></button>").addClass(
                    "btn btn-danger btn-sm delete_btn").append("<span></span>")
                    .addClass("glyphicon glyphicon-trash").append("刪除");
                delBtn.attr("del-id",item.empId);

                //將倆個按鈕放到td中去
                var btnTd = $("<td></td>").append(editBtn).append(" ").append(
                    delBtn);
                //append方法執行完之後還返回原來的元素，就是tr，可以繼續新增
                $("<tr></tr>").append(checkboxTd).append(empIdTd).append(empNameTd).append(
                    genderTd).append(emailTd).append(deptNameTd).append(
                    btnTd)
                    //新增到
                    .appendTo("#emps_table tbody")
            });
        }


        //解析構建分頁資訊
        function build_page_info(result) {
            //每次構建之前要清空
            $("#page_info_area").empty();

            $("#page_info_area").append(
                "當前第" + result.extend.pageInfo.pageNum + "頁，總"
                + result.extend.pageInfo.pages + "頁，總"
                + result.extend.pageInfo.total + "條資料");
            //（後面用到）全域性引數，獲取總記錄數，用來跳到最後一頁
            totalRecord = result.extend.pageInfo.total;
            currentPage = result.extend.pageInfo.pageNum;
        }

        //構建分頁欄
        function build_page_nav(result) {
            //每次構建之前要清空
            $("#page_nav_area").empty();

            var nav = $("<nav></nav>");
            var ul = $("<ul></ul>").addClass("pagination");
            //首頁，尾頁，上一頁，下一頁
            var firstPageLi = $("<li></li>").append(
                $("<a></a>").append("首頁").attr("href", "#"));
            var lastPageLi = $("<li></li>").append(
                $("<a></a>").append("尾頁").attr("href", "#"));
            var prePageLi = $("<li></li>").append(
                $("<a></a>").append($("<span></span>").append("&laquo;")));
            var nextPageLi = $("<li></li>").append(
                $("<a></a>").append($("<span></span>").append("&raquo;")));
            //var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
            //var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));

            //判斷是否有前一頁,如果沒有則禁用，否則才新增點選事件
            if (result.extend.pageInfo.hasPreviousPage == false) {
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            } else {
                //為首頁上一頁新增點選事件
                firstPageLi.click(function() {
                    to_page(1);
                })
                prePageLi.click(function() {
                    to_page(result.extend.pageInfo.pageNum - 1);
                })
            }
            //判斷是否有後一頁，如果沒有則禁用，否則才新增點選事件
            if (result.extend.pageInfo.hasNextPage == false) {
                lastPageLi.addClass("disabled");
                nextPageLi.addClass("disabled");
            } else {
                //為下一頁尾頁新增點選事件
                lastPageLi.click(function() {
                    to_page(result.extend.pageInfo.pages);
                })
                nextPageLi.click(function() {
                    to_page(result.extend.pageInfo.pageNum + 1);
                })
            }

            //1.新增首頁和前一頁
            ul.append(firstPageLi).append(prePageLi);
            //連續顯示的頁
            $.each(result.extend.pageInfo.navigatepageNums, function(index,
                                                                     item) {
                //2.新增連續的頁
                var numLi = $("<li></li>").append(
                    $("<a></a>").append(item).attr("href", "#"));
                //設定當前頁啟用狀態，如果當前頁就是被遍歷的頁，新增啟用樣式
                if (result.extend.pageInfo.pageNum == item) {
                    numLi.addClass("active");
                }
                //新增點選事件，這個li被點選就跳轉 新請求會將資料再次渲染，頁面就亂了，需清空
                numLi.click(function() {
                    to_page(item);
                });
                ul.append(numLi);
            });
            //3.新增下一頁和尾頁
            ul.append(nextPageLi).append(lastPageLi);
            //4.將整個分頁欄新增到合適位置
            $("#page_nav_area").append(ul);

        }

    </script>

8. 頁面效果

SSM整合_年輕人的第一個增刪改查_新增
2022-04-13
SSM
SSM整合_年輕人的第一個增刪改查_基礎環境搭建
2022-04-12
SSM
layui+ssm簡單增刪改查
2019-08-07
UISSM
增刪改查
2024-03-23
第一個mybatis程式，實現增刪改查CRUD
2023-05-05
MyBatis
mybatis的增刪改查
2024-12-05
MyBatis
layui的增刪改查
2019-07-10
UI
redist的增刪改查
2020-12-29
Redis
列表的增刪改查
2018-07-31
字典的增刪改查
2018-08-01
Mongoose查增改刪
2023-12-02
Go
indexedDB 增刪改查
2020-07-13
Index
mysql增刪改查
2020-10-18
MySql
SQL增刪改查
2018-08-21
SQL
springboot整合mybatis增刪改查（三）：mybatis逆向工程
2019-01-29
Spring BootMyBatis
單表增刪改查
2024-12-03
mongodb 基本增刪改查
2024-04-03
MongoDB
EFCore之增刪改查
2021-05-24
MongoDB增刪改查操作
2020-10-22
MongoDB
mysql基本增刪改查
2020-12-15
MySql
sql指令，增，刪，查，改
2021-04-28
SQL
cobra.Command的增刪改查
2024-07-10
02-CoreData 的增刪改查
2019-01-02
SSM-員工管理專案實戰-CRUD-增刪改查
2021-03-28
SSM
C# SqlSugar增刪改查
2024-10-09
C#SqlSugar
rust sqlx 使用---增刪改查
2022-07-27
RustSQL
JavaWeb中jdbc增刪查改
2021-11-02
JavaWebJDBC
PHP操作MongoDB（增刪改查）
2021-11-23
PHPMongoDB
elasticsearch7.2增刪改查
2020-06-03
Elasticsearch
[express+mongoose](增刪改查)
2020-11-20
ExpressGo
iOS CoreData (一) 增刪改查
2018-12-06
iOS
CoreData - 簡單增刪改查
2018-12-23
Jfinal+layui增刪改查
2018-04-12
UI
SQL 基礎增、刪、改、查
2018-08-22
SQL
Day28SSM之CRUD開發版本2的部門增刪改查
2020-10-19
SSM
MySQL的基本語法（增，刪，改，查）
2024-10-08
MySql
MySql 表資料的增、刪、改、查
2024-06-14
MySql
MySQL表的增刪查改(提高篇)
2020-02-17
MySql