ssm練手（CRUD） 4、結合bootstrap，建立好前端模型

首先說下訪問思路吧
1、訪問index.jsp
2、 Index.jsp頁面發送出查詢員工列表請求
3、 EmployeeController接受請求，查出員工數據
4、來到list.jsp頁面進行展示

我們是要通過直接訪問index.jsp，然後這個文件會立馬跳轉到list.jsp中，因此，我們只需要在list.jsp中把列表展現出來就好了。
順便此處我們使用了bootstrap框架，具體請參考其官方css文檔：http://v3.bootcss.com/css/

代碼如下：
index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:forward page="/emps"></jsp:forward>

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>員工列表</title>
<%
    pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<script type="text/javascript"
    src="${ APP_PATH }/static/js/jquery-1.11.1.min.js"></script>
<link rel="stylesheet"
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script
    src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 標題 -->
        <div class="row">
            <div class="col-md-12">
                <h1>SSM-CRUD</h1>
            </div>
        </div>
        <!-- 兩個按鈕 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button class="btn btn-primary">新增</button>
                <button class="btn btn-danger">刪除</button>
            </div>
        </div>
        <!-- 顯示錶格 -->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover">
                    <tr>
                        <th>#</th>
                        <th>empName</th>
                        <th>gender</th>
                        <th>email</th>
                        <th>department</th>
                        <th>操作</th>
                    </tr>
                    <tr>
                        <th>1</th>
                        <th>q</th>
                        <th>男</th>
                        <th>[email protected]</th>
                        <th>deptName</th>
                        <th>
                            <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>
                        </th>
                    </tr>
                </table>
            </div>
        </div>
        <!-- 顯示分頁信息 -->
        <div class="row">
            <!-- 分頁信息 -->
            <div class="col-md-6">當前記錄數：sadfasdf</div>
            <!-- 分頁條信息 -->
            <div class="col-md-6">
                <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li><a href="#">首頁</a></li>
                    <li><a href="#" aria-label="Previous"> <span
                            aria-hidden="true">&laquo;</span>
                    </a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#" aria-label="Next"> <span
                            aria-hidden="true">&raquo;</span>
                    </a></li>
                    <li><a href="#">末頁</a></li>
                </ul>
                </nav>

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

然後訪問index.jsp。效果如下：

實現頁面跳轉

代碼如下：請參考註釋來了解代碼

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>員工列表</title>
<%
    pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<script type="text/javascript"
    src="${ APP_PATH }/static/js/jquery-1.11.1.min.js"></script>
<link rel="stylesheet"
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script
    src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 標題 -->
        <div class="row">
            <div class="col-md-12">
                <h1>SSM-CRUD</h1>
            </div>
        </div>
        <!-- 兩個按鈕 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button class="btn btn-primary">新增</button>
                <button class="btn btn-danger">刪除</button>
            </div>
        </div>
        <!-- 顯示錶格 -->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover">
                    <tr>
                        <th>#</th>
                        <th>empName</th>
                        <th>gender</th>
                        <th>email</th>
                        <th>department</th>
                        <th>操作</th>
                    </tr>
                    <!-- items是要遍歷的對象，在EmployeeController
                    中已經傳值給 “pageInfo”了，所以要取出其中的list值
                    然後var爲此次引用的變量名 -->
                    <c:forEach items="${ pageInfo.list }" var="emp">
                        <tr>
                            <th>${emp.empId }</th>
                            <th>${emp.empName }</th>
                            <th>${ emp.gender=="M"?"男":"女" }</th>
                            <th>${emp.email }</th>
                            <th>${emp.department.deptName }</th>
                            <th>
                                <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>
                            </th>
                        </tr>
                    </c:forEach>
                </table>
            </div>
        </div>

        <!-- 顯示分頁信息 -->
        <div class="row">
            <!-- 分頁信息 -->
            <div class="col-md-6">當前${ pageInfo.pageNum }頁，總共${ pageInfo.pages }頁，
                總共${pageInfo.total }記錄</div>


            <!-- 分頁條信息 -->
            <div class="col-md-6">
                <nav aria-label="Page navigation">
                <ul class="pagination">
                    <!-- 首頁和上一頁的圖標 -->
                    <li><a href="${ APP_PATH}/emps?pn=1">首頁</a></li>
                    <!-- 寫個判斷，如果當前頁在第一頁，則無法點擊首頁和上一頁 -->
                    <c:if test="${pageInfo.hasPreviousPage}">
                        <li><a href="${ APP_PATH}/emps?pn=${pageInfo.pageNum-1 }"
                            aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
                        </a></li>
                    </c:if>



                    <!-- 當前頁遍歷 -->
                    <c:forEach items="${ pageInfo.navigatepageNums }" var="page_Num">
                        <!-- 判斷是否爲當前頁，如果是，就利用bootstrap讓它比其他的頁面亮一點 -->
                        <c:if test="${page_Num==pageInfo.pageNum }">
                            <li class="active"><a href="#">${page_Num }</a></li>
                        </c:if>
                        <c:if test="${page_Num != pageInfo.pageNum }">
                            <!-- 跳轉到第二頁時候，href的寫法，這樣就實現了分頁跳轉 -->
                            <li><a href="${ APP_PATH}/emps?pn=${page_Num }">${page_Num }</a></li>
                        </c:if>
                    </c:forEach>

                    <!-- 末頁和下一頁圖標 -->
                    <c:if test="${pageInfo.hasNextPage}">
                        <li><a href="${ APP_PATH}/emps?pn=${pageInfo.pageNum+1 }"
                            aria-label="Next"> <span aria-hidden="true">&raquo;</span>
                        </a></li>
                    </c:if>

                    <li><a href="${ APP_PATH}/emps?pn=${pageInfo.pages}">末頁</a></li>
                </ul>
                </nav>

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

其中，pageInfo的官方代碼如圖，我們可以參考其中的屬性來靈活利用pagehelper

修改代碼後，即實現了翻頁功能

但是這種方式仍然有不足，下一篇介紹利用ajax和JSON實現改變頁面

ssm練手（CRUD） 4、結合bootstrap，建立好前端模型

實現頁面跳轉

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

記一次 .NET某工控視覺自動化系統卡死分析

ssm練手（CRUD） 1、創建項目並配置文件

ssm練手（CRUD） 7、實現新增功能並用JSR303校驗

ssm練手（CRUD） 6、重新構建員工列表

IDEA dao層“Could not autowired”（已用使用MapperScannerConfigurer掃描）

ssm練手（CRUD） 10、總結

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結