【从零入门系列-5】Spring Boot 之 前端展示

摘要：务必在之前引入最新的核心文件为了偷懒，我们这里引入的第三方库文件都是采用的方式，也可以选择把库下载到本地然后再引用。

【从零入门系列-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 "