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

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

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

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

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

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

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

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

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

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

因?yàn)樵擁?yè)面為前端展示頁(yè)內(nèi)容，我們可以把該接口多帶帶設(shè)計(jì)到另外一個(gè)層-View層，即頁(yè)面展示層，該層提供對(duì)外訪問(wèn)的頁(yè)面內(nèi)容。但是，為了項(xiàng)目簡(jiǎn)單，而且這里只有一個(gè)頁(yè)面，我們?cè)诒卷?xiàng)目中依然將該頁(yè)面接口放到控制層，代碼如下：

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

    @Autowired
    private BookService bookService;

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

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

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

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

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

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

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

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

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

    
    

        
            新增
        
    

    
    

        
    

    
    

    
    

    
    
    

    
    
    
    
    
    

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

index.js：項(xiàng)目路徑srcmain esourcesstaticjsindex.js

comm.js：項(xiàng)目路徑srcmain esourcesstaticjscomm.js

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

var $table;

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