摘要：務必在之前引入最新的核心文件為了偷懶，我們這里引入的第三方庫文件都是采用的方式，也可以選擇把庫下載到本地然后再引用。

【從零入門系列-0】Spring Boot 之 Hello World

【從零入門系列-1】Spring Boot 之 程序結構設計說明

【從零入門系列-2】Spring Boot 之 數據庫實體類

【從零入門系列-3】Spring Boot 之 數據庫操作類

【從零入門系列-4】Spring Boot 之 WEB接口設計實現

【從零入門系列-5】Spring Boot 之 前端展示

前一章已經實現了對圖書管理常用的Web接口的功能服務，這一步將使用bootstrap和bootstrap-table等前端技術整合后臺提供的服務功能完成一個圖書管理頁的功能設計，提供一個功能較為完善的圖書館書籍管理功能頁。

對于前端不熟的同學可以自行完成對bootstrap的學習，主要包括布局、模態框、表格分頁、JQuery的學習，然后再回過頭來實踐本篇涉及內容。

第一步我們先建立好該頁面的路徑和結構，首先能夠讓前端能夠直接訪問到該頁面，由于這里的頁面內容為Html頁面，非上一篇文章提及的Json內容，因此我們需要區別對待。

因為該頁面為前端展示頁內容，我們可以把該接口多帶帶設計到另外一個層-View層，即頁面展示層，該層提供對外訪問的頁面內容。但是，為了項目簡單，而且這里只有一個頁面，我們在本項目中依然將該頁面接口放到控制層，代碼如下：

@RestController
@RequestMapping(path = "/library")
public class BookController {
    @Autowired
    private BookJpaRepository bookJpaRepository;

    @Autowired
    private BookService bookService;

    /**
     * 圖書管理頁
     * @return 返回圖書管理頁面內容
     */
    @RequestMapping(value = "")
    public ModelAndView index(){
        return new ModelAndView("index");
    }
    
    /* 其他已有的代碼省略 */
}

在這里，我們使用@RequestMapping(value = "")關聯Web的訪問路徑，指定可以接收任意類型(GET和POST等)的Web請求，且訪問路徑問/library。

對應的該處理函數返回的類型為ModelAndView，因為@RestController注解后類的接口返回的默認是Json類型，當我們需要返回渲染的Html文件內容時，則需要使用ModelAndView了，上述代碼中返回的index是一個html文件，默認路徑為項目路徑srcmain esources emplates，因此我們需要在templates目錄下新建一個index.html文件，文件內容如下：

為了測試頁面訪問路徑的通路，減少干擾項，目前這個頁面內容為空，只設置了頁面標題名。

然后我們啟動程序，訪問地址http://localhost:8080/library就可以發現能正常訪問到我們這里的index.html文件內容了。

引入我們的頁面即將要使用到bootstrap和bootstrap-table的css和js相關的文件，注意由于bootstrap需要使用到jquery，所以我們需要在引入bootstrap的JS前先將jquery引入，代碼內容如下：

為了偷懶，我們這里引入的第三方庫文件都是采用CDN的方式，也可以選擇把庫下載到本地然后再引用。

注意到采用的是thymeleaf語法特性，并引入thymeleaf支持，相關thymeleaf知識可以自行搜索學習，本項目基本不涉及thymeleaf知識點。

我們項目使用b，如果你還沒使用過該組件，可參考此處學習，代碼如下：

    
    

        
            新增
        
    

    
    

        
    

    
    

    
    

    
    
    

    
    
    
    
    
    

這里需要新建兩個JS文件，其中index.js為處理index.html頁面相關的JS內容，comm.js為通用的JS相關代碼，由于我們按項目的默認配置引用文件，因此在static目錄下新建相對應的路徑即可：

index.js：項目路徑srcmain esourcesstaticjsindex.js

comm.js：項目路徑srcmain esourcesstaticjscomm.js

bootstrap-table的使用主要在JS部分，在JS完成對表格的配置及初始化，index.js相關代碼為：

var $table;

//初始化bootstrap-table的內容
function InitMainTable () {
    //記錄頁面bootstrap-table全局變量$table，方便應用
    $table = $("#book_table").bootstrapTable({
        url: "/library/search",
        method: "post",
        contentType:"application/x-www-form-urlencoded; charset=UTF-8",
        toolbar: "#toolbar",
        dataType: "json",
        striped: true,                       // 設置為 true 會有隔行變色效果
        undefinedText: "空",                 // 當數據為 undefined 時顯示的字符
        pagination: true,                    // 分頁
        sortable: true,                      // 是否啟用排序
        sortOrder: "asc",                    // 排序方式
        sidePagination: "server",            // 分頁方式： client 客戶端分頁， server  服務端分頁（*）
        showPaginationSwitch:true,           // 是否顯示 數據條數選擇框
        showColumns: "true",                 // 是否顯示 內容列下拉框
        showRefresh: true,                   // 是否顯示刷新按鈕
        pageNumber: 1,                       // 如果設置了分頁，首頁頁碼
        pageSize: 3,                         // 如果設置了分頁，頁面數據條數
        pageList: [3, 5, 7],
        paginationPreText: "上一頁",         // 指定分頁條中上一頁按鈕的圖標或文字,這里是<
        paginationNextText: "下一頁",        // 指定分頁條中下一頁按鈕的圖標或文字,這里是>
        data_local: "zh-US",                 // 表格漢化
        clickToSelect: true,
        queryParams: function (params) {     // 得到查詢的參數
            var param = getFormParam($("#formSearch"));
            // 頁大小
            param["pageSize"] =  params.limit;
            // 頁碼
            param["pageNumber"] =  (params.offset / params.limit);
            // 排序類型
            param["sortDir"] = params.order;
            // 排序字段
            param["ordName"] = params.sort;
            return param;
        },
        idField: "id",                       // 指定主鍵列
        columns: [
            {
                field: "id",
                title: "書ID"
            }, {
                field: "name",
                title: "書名"
            }, {
                field: "author",
                title: "作者"
            },{
                field: "image",
                title: "封面",
                formatter: function (value, row, index) {
                    return "