导入数据库信息

Bootstrap Table

package com.zpark.neimin.first.common;

import java.util.List;

public class BootstrapTable{
    private int total;
    private List<?> rows;

    public BootstrapTable (int total ,List<?>rows) {
        this.total = total;
        this.rows = rows;
    }

    public int getTotal() {
        return total;
    }

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

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

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

    @Override
    public String toString() {
        return "BootstrapTable{" +
                "total=" + total +
                ", rows=" + rows +
                '}';
    }
}

LoginController

package com.zpark.neimin.first.controller;

import com.zpark.neimin.first.common.BaseResult;
import com.zpark.neimin.first.common.BootstrapTable;
import com.zpark.neimin.first.model.School;
import com.zpark.neimin.first.model.User;
import com.zpark.neimin.first.service.SchoolService;
import com.zpark.neimin.first.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

@Controller
public class LoginController {
    @Autowired
    private UserService userService;

    @Autowired
    private SchoolService schoolService;
    @RequestMapping("/")
    public String Login(){
        return "login";
    }

    @RequestMapping("/login.json")
    @ResponseBody
    public BaseResult recieveDate(@RequestBody Map<String, Object> loginData) {
//        Map<String, Object> map = new HashMap<>();
//        String loginName = loginData.get("loginName").toString();
//        System.out.println(".......controller");
//        return map;

        BaseResult baseResult = new BaseResult();
        String loginName = loginData.get("loginName").toString();
        String loginPwd = loginData.get("loginPwd").toString();
        if (loginName != null) {

            User user = userService.selByName(loginName);
            System.out.println("....from mysql....." + user);
            if(user.getPassWord().equals(loginPwd)) {
                baseResult.setSuccess(true);
            } else {
                baseResult.setSuccess(false);
            }
        }
        return baseResult;
    }

    @RequestMapping(value = "/index.html")
    public String test() {
        System.out.println("......index");
        return "index";
    }
    @RequestMapping("/table.html")
    public String table(){return "table";}


    @RequestMapping("/getData")
    @ResponseBody
    public BootstrapTable getData(){
//        从数据库查询数据
//        找Service service这个服务会提供从数据库查询的功能
        List<School>schoolData = schoolService.getSchoolData();
        System.out.println("..+ schoolData.size()");
        return new BootstrapTable(30, schoolData);

    }
}

SchoolMapper

package com.zpark.neimin.first.dao;

import com.zpark.neimin.first.model.School;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository
public interface SchoolMapper {
    List<School>getSchoolData();

}

School

package com.zpark.neimin.first.model;

import org.w3c.dom.Text;

public class School {
    private int id;
    private String seq;
    private String score;
    private String name;
    private String level;
    private String  remark;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getSeq() {
        return seq;
    }

    public void setSeq(String seq) {
        this.seq = seq;
    }

    public String getScore() {
        return score;
    }

    public void setScore(String score) {
        this.score = score;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getLevel() {
        return level;
    }

    public void setLevel(String level) {
        this.level = level;
    }

    public String getRemark() {
        return remark;
    }

    public void setRemark(String remark) {
        this.remark = remark;
    }
}

SchoolService

package com.zpark.neimin.first.service;

import com.zpark.neimin.first.dao.SchoolMapper;
import com.zpark.neimin.first.model.School;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class SchoolService {
    @Autowired
    SchoolMapper schoolMapper;
//    在service服务中，需要做两件事
//    1、声明方法（提供给客户（controller)调用）
    public List<School> getSchoolData(){
//        2、让。。。。真正去数据库查询
        return schoolMapper.getSchoolData();
    }

}

SchoolMapping

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zpark.neimin.first.dao.SchoolMapper">
    <select id="getSchoolData" resultType="com.zpark.neimin.first.model.School">
        select * from school;
    </select>

</mapper>

footer.html

<footer style="display: none">
    <span>&copy; 2017 - Angle</span>
</footer>

include.html

<!--jquery-->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!--bootstrap-->
<script src="vendor/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>

link.html

<link rel="stylesheet" type="text/css" href="/vendor/sweetalert/dist/sweetalert.css">
<link rel="stylesheet" type="text/css" href="/vendor/bootstrap-4.3.1-dist/css/bootstrap.css">

login.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script src="/vendor/sweetalert/dist/sweetalert.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/vendor/sweetalert/dist/sweetalert.css">



<body style="text-align: center">
<form id="newForm" onsubmit="return false">
    <div>
   <input id ="loginName" name="loginName" type="text">
    </div>
    <div>
        <input id="loginPwd" name="loginPwd" type="password">
    </div>
    <div>
        <button type="submit" id="btnLogin">登录</button>
    </div>
</form>
<script>
    $('#btnLogin').click(function () {
        sweetAlert("hello");

    });
</script>

<th:block th:replace="js/login_js"/></th:block>
</body>
</html>

table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.js"></script>

<body>
<table id ="ArbetTable"></table>
    <script>
        $(function () {
            //1.初始化Table
            var oTable = new TableInit();
            oTable.Init();
        });


        var TableInit = function () {
            var oTableInit = new Object();
            //初始化Table
            oTableInit.Init = function () {
                $('#ArbetTable').bootstrapTable({
                    url: '/getData',         //请求后台的URL（*）
                    method: 'get',                      //请求方式（*）
                    toolbar: '#toolbar',                //工具按钮用哪个容器
                    striped: true,                      //是否显示行间隔色
                    cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                    pagination: true,                   //是否显示分页（*）
                    sortable: false,                     //是否启用排序
                    sortOrder: "asc",                   //排序方式
                    queryParams: oTableInit.queryParams,//传递参数（*）
                    sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                    pageNumber: 1,                       //初始化加载第一页，默认第一页
                    pageSize: 10,                       //每页的记录行数（*）
                    pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                    search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                    contentType: "application/x-www-form-urlencoded",
                    strictSearch: true,
                    showColumns: true,                  //是否显示所有的列
                    showRefresh: true,                  //是否显示刷新按钮
                    minimumCountColumns: 2,             //最少允许的列数
                    clickToSelect: true,                //是否启用点击选中行
                    height: 700,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                    uniqueId: "no",                     //每一行的唯一标识，一般为主键列
                    showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                    cardView: false,                    //是否显示详细视图
                    detailView: false,                   //是否显示父子表
                    columns: [
                        {
                            field: 'id',
                            title: 'ID'
                        },
                        {
                            field: 'seq',
                            title: '排名'
                        },
                        {
                            field: 'score',
                            title: '分数'
                        },
                        {
                            field: 'name',
                            title: '名字'
                        }, {
                            field: 'level',
                            title: '级别'
                        },
                        {
                            field: 'remark',
                            title: '备注',
                            formatter: operateFormatter //自定义方法，添加操作按钮
                        },
                    ],
                    rowStyle: function (row, index) {
                        var classesArr = ['success', 'info'];
                        var strclass = "";
                        if (index % 2 === 0) {//偶数行
                            strclass = classesArr[0];
                        } else {//奇数行
                            strclass = classesArr[1];
                        }
                        return { classes: strclass };
                    },//隔行变色
                });

            };


            //得到查询的参数
            oTableInit.queryParams = function (params) {
                var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    limit: params.limit,   //页面大小
                    offset:params.offset
                };
                return temp;
            };
            return oTableInit;
        };


        function operateFormatter(value, row, index) {//赋予的参数
            return [
                '<a class="btn active disabled" href="#">编辑</a>',
                '<a class="btn active" href="#">档案</a>',
                '<a class="btn btn-default" href="#">记录</a>',
                '<a class="btn active" href="#">准入</a>'
            ].join('');
        }
    </script>

</body>
</html>