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

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

【從零入門系列-1】Spring Boot 之 程序結(jié)構(gòu)設(shè)計說明

【從零入門系列-2】Spring Boot 之 數(shù)據(jù)庫實體類

【從零入門系列-3】Spring Boot 之 數(shù)據(jù)庫操作類

【從零入門系列-4】Spring Boot 之 WEB接口設(shè)計實現(xiàn)

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

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

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

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

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

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

    @Autowired
    private BookService bookService;

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

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

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

為了測試頁面訪問路徑的通路，減少干擾項，目前這個頁面內(nèi)容為空，只設(shè)置了頁面標(biāo)題名。

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

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

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

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

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

    
    

        
            新增
        
    

    
    

        
    

    
    

    
    

    
    
    

    
    
    
    
    
    

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

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

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

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

var $table;

//初始化bootstrap-table的內(nèi)容
function InitMainTable () {
    //記錄頁面bootstrap-table全局變量$table，方便應(yīng)用
    $table = $("#book_table").bootstrapTable({
        url: "/library/search",
        method: "post",
        contentType:"application/x-www-form-urlencoded; charset=UTF-8",
        toolbar: "#toolbar",
        dataType: "json",
        striped: true,                       // 設(shè)置為 true 會有隔行變色效果
        undefinedText: "空",                 // 當(dāng)數(shù)據(jù)為 undefined 時顯示的字符
        pagination: true,                    // 分頁
        sortable: true,                      // 是否啟用排序
        sortOrder: "asc",                    // 排序方式
        sidePagination: "server",            // 分頁方式： client 客戶端分頁， server  服務(wù)端分頁（*）
        showPaginationSwitch:true,           // 是否顯示 數(shù)據(jù)條數(shù)選擇框
        showColumns: "true",                 // 是否顯示 內(nèi)容列下拉框
        showRefresh: true,                   // 是否顯示刷新按鈕
        pageNumber: 1,                       // 如果設(shè)置了分頁，首頁頁碼
        pageSize: 3,                         // 如果設(shè)置了分頁，頁面數(shù)據(jù)條數(shù)
        pageList: [3, 5, 7],
        paginationPreText: "上一頁",         // 指定分頁條中上一頁按鈕的圖標(biāo)或文字,這里是<
        paginationNextText: "下一頁",        // 指定分頁條中下一頁按鈕的圖標(biāo)或文字,這里是>
        data_local: "zh-US",                 // 表格漢化
        clickToSelect: true,
        queryParams: function (params) {     // 得到查詢的參數(shù)
            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 "