SpringBoot系列記錄（十八）——SpringBoot整合BootStrap4實現表格數據展示

一、前言

看過第十四篇的SpringBoot用Restful風格實現增刪改查並使用MyBatis逆向工程  以下部分代碼可以直接逆向工程哈，快速開發。

此篇對於逆向工程就不贅述了

二、準備工作

2.1 MySql創建一張學生表

DROP TABLE IF EXISTS `student`;
CREATE TABLE `student`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `sname` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
  `age` int(11) NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB;

2.2 添加數據

INSERT INTO `student` VALUES (1, '張一', 6);
INSERT INTO `student` VALUES (2, '張二', 7);
INSERT INTO `student` VALUES (3, '張三', 8);
INSERT INTO `student` VALUES (4, '張四', 6);
INSERT INTO `student` VALUES (5, '張武', 7);
INSERT INTO `student` VALUES (6, '張六', 6);
INSERT INTO `student` VALUES (7, '張琪', 6);
INSERT INTO `student` VALUES (8, '張八', 7);
INSERT INTO `student` VALUES (9, '張久', 8);
INSERT INTO `student` VALUES (10, '張小十', 7);
INSERT INTO `student` VALUES (11, '張十一', 6);

2.3 POM文件

   <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.8.1</version>
        </dependency>    
<!-- MySql -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <!--            <version>5.1.27</version>-->
            <scope>runtime</scope>
        </dependency>
        <!-- Druid -->
        <!--改爲stater的方式  纔可以監控-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.10</version>
        </dependency>

        <!-- Mybatis -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.3.2</version>
        </dependency>

        <!-- Mybatis逆向工程 -->
        <dependency>
            <groupId>org.mybatis.generator</groupId>
            <artifactId>mybatis-generator-core</artifactId>
            <version>1.3.7</version>
        </dependency>

        <!-- 分頁 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.12</version>
        </dependency>

2.4 properties文件

#數據源類型
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
#spring.datasource.druid.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.driver-class-name = com.mysql.jdbc.Driver
spring.datasource.url = jdbc:mysql://localhost:3306/demo?useUnicode=true&characterEncoding=UTF-8&serverTimezone=GMT%2B8
spring.datasource.username = root
spring.datasource.password = 1234
##########Druid連接池配置
# 初始化大小，最小，最大
spring.datasource.initialSize=5
spring.datasource.minIdle=5
spring.datasource.maxActive=20

mybatis.type-aliases-package=com.demo6.demo.core.mapper
mybatis.mapper-locations=classpath:/mappers/*.xml

##PageHelper相關配置
pagehelper.helper-dialect = mysql
pagehelper.reasonable = true
pagehelper.support-methods-arguments = true
pagehelper.params= count= countSql

##thymeleaf 配置
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html
#屬性設置爲false可以禁用模板引擎編譯的緩存結果。
spring.thymeleaf.cache=false
#上下文
#server.servlet.context-path=
# 在構建URL時預先查看名稱的前綴 （默認就是這個）
spring.thymeleaf.prefix=classpath:/templates/
# 構建URL時附加查看名稱的後綴.（默認就是 html的結尾的）
spring.thymeleaf.suffix=.html

2.5 靜態資源

文末會貼源碼地址，可以直接去獲取

三、實現功能

3.1 創建基礎類和表格數據類

讓Student類繼承這個BaseEntity

public class BaseEntity implements Serializable {
    private static final long serialVersionUID = -4862029741755518291L;
    /** 頁碼 */
    private Integer pageNumber;

    /** 每頁條數 */
    private Integer pageSize;

    public Integer getPageNumber() {
        return pageNumber;
    }

    public void setPageNumber(Integer pageNumber) {
        this.pageNumber = pageNumber;
    }

    public Integer getPageSize() {
        return pageSize;
    }

    public void setPageSize(Integer pageSize) {
        this.pageSize = pageSize;
    }
}

public class TableDataInfo implements Serializable {

    private static final long serialVersionUID = -6586058291723195495L;
    /** 總記錄數 */
    private long total;

    /** 列表數據 */
    private List<?> rows;

    /** 消息狀態碼 */
    private int code;

    /** 消息內容 */
    private int msg;

    public long getTotal() {
        return total;
    }

    public void setTotal(long total) {
        this.total = total;
    }

    public List<?> getRows() {
        return rows;
    }

    public void setRows(List<?> rows) {
        this.rows = rows;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public int getMsg() {
        return msg;
    }

    public void setMsg(int msg) {
        this.msg = msg;
    }
}

3.2 BaseController

讓StudentController繼承BaseController

public class BaseController {
    protected TableDataInfo getDataTable(List<?> list)
    {
        TableDataInfo rspData = new TableDataInfo();
        rspData.setCode(0);
        rspData.setRows(list);
        rspData.setTotal(new PageInfo(list).getTotal());
        return rspData;
    }
}

3.3 StudentController

@Controller
@RequestMapping("/studentManage")
public class StudentController extends BaseController {

    @Autowired
    StudentService studentService;

    @RequestMapping("/toStudentPage")
    public String toStudentPage(){
        return "student";
    }

    @RequestMapping("/studentAll")
    @ResponseBody
    public TableDataInfo studentAll(Student student){
    List<Student> students = studentService.studentAll(student);
    return  getDataTable(students);
    }
}

3.4 StudentServiceImpl

接口類就不貼了，沒啥意思

@Service("studentService")
public class StudentServiceImpl implements StudentService {
    @Autowired
    StudentMapper studentMapper;

    @Override
    public List<Student> studentAll(Student student) {
        int pageNum = student.getPageNumber();
        int pageSize = student.getPageSize();
        StudentExample example = new StudentExample();
        StudentExample.Criteria criteria = example.createCriteria();
        //有查詢條件在這裏寫
        PageHelper.startPage(pageNum,pageSize);
        return studentMapper.selectByExample(example);
    }
}

 3.5 重點戲  student.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>學生管理</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/style.min.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap-table/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div class="container-fluid p-t-15">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <header class="card-header">
                    <div class="callout callout-danger">
                        學生信息
                    </div>
                </header>
                <div class="card-body">
                    <div id="toolbar" class="toolbar-btn-action" style="margin-bottom: 3%">
                        <form class="form-inline">
                            <div class="form-group">
                                <label class="sr-only" for="sname">學生姓名</label>
                                <input class="form-control mb-2 mr-sm-2" type="text" id="sname" name="sname" placeholder="請輸入學生姓名">
                            </div>
                            <div class="form-group">
                                <a class="btn btn-success" style="margin-left:20px;margin-top:-3px" onclick="searchStudent()">
                                    <i class="fa fa-search"></i> 查詢
                                </a>
                            </div>
                        </form>
                    </div>
                    <table id="studentTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
$(document).ready(function() {
//1.初始化Table
 new TableInit();
});
//初始化表格
var TableInit = function () {
//先銷燬表格
$('#studentTable').bootstrapTable("destroy");
//初始化
$('#studentTable').bootstrapTable({
classes: 'table table-bordered table-hover table-striped',
url: '/studentManage/studentAll',
method: 'get',
dataType : 'json',        // 因爲本示例中是跨域的調用,所以涉及到ajax都採用jsonp,
uniqueId: 'id',
idField: 'id',             // 每行的唯一標識字段
toolbar: '#toolbar',       // 工具按鈕容器
clickToSelect: true,     // 是否啓用點擊選中行
showColumns: true,         // 是否顯示所有的列
showRefresh: true,         // 是否顯示刷新按鈕

//showToggle: true,        // 是否顯示詳細視圖和列表視圖的切換按鈕(clickToSelect同時設置爲true時點擊會報錯)

pagination: true,                    // 是否顯示分頁
sortOrder: "asc",                    // 排序方式
queryParams: queryParam,                                   // 傳遞參數
sidePagination: "server",            // 分頁方式：client客戶端分頁，server服務端分頁
pageNumber: 1,                       // 初始化加載第一頁，默認第一頁
pageSize: 6,                        // 每頁的記錄行數
pageList: [10, 25, 50, 100],         // 可供選擇的每頁的行數
//search: true,                      // 是否顯示錶格搜索，此搜索是客戶端搜索
//responseHandler:responseHand,//請求數據成功後，渲染表格前的方法
//showExport: true,        // 是否顯示導出按鈕, 導出功能需要導出插件支持(tableexport.min.js)
//exportDataType: "basic", // 導出數據類型, 'basic':當前頁, 'all':所有數據, 'selected':選中的數據

columns: [{
field: 'example',
checkbox: true    // 是否顯示覆選框
}, {
title: '序號',//標題  可不加
align: "center",
formatter: function (value, row, index) {
return index + 1;
},
align: "center",
width: 50
},
{
field: 'id',
title: 'ID',
align: "center",
width: 200
},
{
field: 'sname',
title: '學生姓名',
align: "center"
},
{
field: 'age',
title: '年齡',
align: "center"
}]
});
return TableInit;
}


//得到查詢的參數
function queryParam(params) {
var temp = {   //這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
pageNumber: Math.round((params.offset + params.limit) / params.limit),
pageSize: params.limit,
//賬號
sname: $("#sname").val()
};
return temp;
}

function  searchStudent() {
    new TableInit();
}
</script>
</body>
</html>

四、效果展示

五、擴展

其實沒啥技術含量，但是也是很重要的一部分，所以寫一篇博文吧，效果如果是你需要的，可以直接獲取源碼

代碼裏該有的註釋都有，看一看會使用就行

直通車 SpringBoot整合BootStrap實現數據表格