Springboot——restful实践前端（ajax）

向右看齐 2023-05-28 14:30 39阅读 0赞

### Springboot——restful实践前端 （ajax） ###

*   *   *  前言
         *  项目截图
         *  参考程序
         *  问题日志
         *  学习过程

### 前言 ###

*  前端代码参考github开源项目：  
    [springBoot-example-ui][]
 *  后端代码实践参考：  
    [Springboot——restful实践后端][Springboot_restful]
 *  参考博客:
    
     *  [SpringBoot重点详解–使用BootstrapTable进行分页展示][SpringBoot_BootstrapTable]
     *  [表格插件-bootstrap table的表内查看编辑删除][-bootstrap table]

### 项目截图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw_size_16_color_FFFFFF_t_70]

### 参考程序 ###

*  controller类

package com.antrain.restful.controller;
    
    import com.antrain.restful.entity.User;
    import com.antrain.restful.service.UserService;
    import com.antrain.restful.util.PageResult;
    import com.antrain.restful.util.PageUtil;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.*;
    
    import javax.annotation.Resource;
    import java.util.Map;
    
    @Controller
    @RequestMapping("/adminAjax")
    public class UserController2 { 
    
        @Resource
        private UserService userService2;
    
        @GetMapping("/userPage")
        public String list(){ 
            return "admin/userManager";
        }
    	//@ResponseBody 作用是将结果以json形式传送给前端
        @ResponseBody
        @GetMapping("/users")
        public PageResult userList(@RequestParam Map<String, Object> params){ 
            PageResult pageResult = userService2.queryUsers(new PageUtil(params));
            return pageResult;
        }
    
        public boolean valid(User user) { 
            return user==null||user.getId()==null||user.getUsername() == null ||
                    user.getPassword() == null || user.getBirth() == null || user.getSex() == null;
    
        }
    
        @ResponseBody
        @PostMapping("/user")
        public String add(@RequestBody User user){ 
        	// @RequestBody 从请求体拿数据，不加出错
           return String.valueOf(userService2.insert(user));
        }
    
        @ResponseBody
        @GetMapping("/user/{id}")
        public User toEdit(@PathVariable("id") Integer id){ 
            return userService2.queryById(id);
        }
    
        @ResponseBody
        @PutMapping("/user")
        public int update(@RequestBody User user){ 
            //System.out.println(user);
           return userService2.update(user);
        }
    
        @ResponseBody
        @DeleteMapping("/user/{id}")
        public int del(@PathVariable("id") Integer id){ 
            return userService2.del(id);
        }
    }

*  片段 bar.html

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head th:fragment="header-fragment">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Restful测试</title>
        <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet">
        <link th:href="@{/static/css/dashboard.css}" rel="stylesheet">
        <link th:href="@{/static/css/bootstrap-table.min.css}" rel="stylesheet">
        <link th:href="@{/static/css/font-awesome.min.css}" rel="stylesheet" th:if="${select!=null} and ${select=='Y'}">
        <link th:href="@{/static/css/animate.min.css}" rel="stylesheet" th:if="${select!=null} and ${select=='Y'}">
        <link th:href="@{/static/css/style.css}" rel="stylesheet" th:if="${select!=null} and ${select=='Y'}">
        <base target="_blank" th:if="${select!=null} and ${select=='Y'}">
    </head>
    <body>
    
    <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
        <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${session.loginUser}]]</a>
        <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
    </nav>
    
    
    <nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">
        <div class="sidebar-sticky">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link active" th:class="${activeUri=='index.html'?'nav-link active':'nav-link'}" th:href="@{/index.html}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
                            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                            <polyline points="9 22 9 12 15 12 15 22"></polyline>
                        </svg>
                        Dashboard <span class="sr-only">(current)</span>
                    </a>
                </li>
    
    
                <li class="nav-item">
                    <a class="nav-link active" href="#" th:href="@{/admin/users}" th:class="${activeUri=='users'?'nav-link active':'nav-link'}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">
                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                            <circle cx="9" cy="7" r="4"></circle>
                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                        </svg>
                        用户管理
                    </a>
                </li>
    
    
                <li class="nav-item">
                    <a class="nav-link active" th:href="@{/adminAjax/userPage}" th:class="${activeUri=='userss'?'nav-link active':'nav-link'}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">
                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                            <circle cx="9" cy="7" r="4"></circle>
                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                        </svg>
                        用户管理2
                    </a>
                </li>
    
            </ul>
    
        </div>
    </nav>
    <div th:fragment="footer-js">
        <script type="text/javascript" th:src="@{/static/js/jquery.min.js}"></script>
        <script type="text/javascript" th:src="@{/static/js/popper.min.js}" th:if="${select!=null} and ${select=='Y'}"></script>
       <script type="text/javascript" th:src="@{/static/js/bootstrap.min.js}"></script>
    
        <script type="text/javascript" th:src="@{/static/js/bootstrap-table.min.js}" th:if="${select!=null} and ${select=='Y'}"></script>
        <script type="text/javascript" th:src="@{/static/js/bootstrap-table-zh-CN.min.js}" th:if="${select!=null} and ${select=='Y'}"></script>
        <script type="text/javascript" th:src="@{/static/js/userManager.js}" th:if="${select!=null} and ${select=='Y'}"></script>
    </div>
    </body>
    </html>

*  html界面 userManager.html

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head th:replace="commons/bar::header-fragment(select='Y')"></head>
    <body>
    <div th:replace="commons/bar::topbar"></div>
    
    <div class="container-fluid">
        <div class="row">
            
            <div th:replace="commons/bar::#sidebar(activeUri='userss')"></div>
            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
                <div class="wrapper wrapper-content animated fadeInRight">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <p>专项管理</p>
                            <p>
                                <button class="btn btn-primary btn-add" type="button">
                                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增
                                </button>
                            </p>
                            <div class="bootstrap-table">
                                <table id="tb_users" data-mobile-responsive="true"></table>
                            </div>
    
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    <div class="content">
        
        <div class="modal fade" id="modalEdit" tabindex="-1" role="dialog" aria-labelledby="modalAddLabel">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title" id="modalTitle">新用户添加</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group" id="idDiv">
                                <label for="userName" class="control-label">用户ID:</label>
                                <input type="text" class="form-control" id="userOfId" autocomplete="off" name="id" >
                            </div>
                            <div class="form-group">
                                <label for="userName" class="control-label">用户名:</label>
                                <input type="text" class="form-control" id="username" autocomplete="off" name="username" value="antRain">
                            </div>
                            <div class="form-group">
                                <label for="password" class="control-label">密码:</label>
                                <input type="text" class="form-control" id="password" name="password" value="123456">
                            </div>
                            <div class="form-group">
                                <label>性别</label><br/>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="sex" value="M" id="sexM">
                                    <label for="sexM" class="form-check-label">男</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="sex" value="F" id="sexF">
                                    <label for="sexF" class="form-check-label">女</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="birth" class="form-check-label">出生日期</label>
                                <input name="birth" type="date" class="form-control" id="birth">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="saveButton">确认</button>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
    
    
    <div th:replace="commons/bar::footer-js(select='Y')"></div>
    </body>
    
    </html>

*  js: userManager.js

$('#tb_users').bootstrapTable({ 
        url: "http://localhost:8080/adminAjax/users", // 请求的后台URL（*）
        method: 'get', // 请求方式：get/post（*）
        toolbar: '#toolbar', // 工具按钮用哪个容器
        cache: false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        showRefresh: false, // 是否显示刷新按钮
        sortable: false, // 是否启用排序
        sortOrder: "asc", // 排序方式
        minimumCountColumns: 2, // 最少允许的列数
        showToggle: false, // 是否显示详细视图和列表视图的切换按钮
        showColumns: false, // 是否显示列操作按钮
        detailView: false, // 是否显示详细视图
        striped: true, // 设置为true会有隔行变色效果
        dataType: "json", // 服务器返回的数据类型
        pagination: true, // 设置为true会在底部显示分页条
        // queryParamsType : "limit",
        // 设置为limit则会发送符合RESTFull格式的参数
        singleSelect: true, // 设置为true将禁止多选
        clickToSelect: true, // 是否启用点击选中行
        cardView: false, // 是否显示详细视图
        paginationLoop: true,
        maintainSelected: true,
        // contentType : "application/x-www-form-urlencoded",
        // 发送到服务器的数据编码类型
        pageSize: 2, // 如果设置了分页，每页数据条数
        pageList: [2, 5, 10], // 可供选择的每页的行数（*）
    
        pageNumber: 1, // 如果设置了分布，首页页码
        search: false, // 是否显示搜索框
        uniqueId: "id", // 每一行的唯一标识，一般为主键列
        sidePagination: "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
    
        queryParams: function(params) { 
            return { 
                // 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                limit: params.limit,
                pageSize: params.pageSize,
                offset: params.offset,
            };
        },
        responseHandler: function(res) { 
            //console.log(res);
            return {  //return bootstrap-table能处理的数据格式
                "total": res.totalCount,
                "rows": res.list
            }
        },
        // 请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
        // queryParamsType = 'limit' ,返回参数必须包含
        // limit, offset, search, sort, order 否则, 需要包含:
        // pageSize, pageNumber, searchText, sortName,
        // sortOrder.
        // 返回false将会终止请求
        columns: [{ 
            title: '序号',
            field: 'id',
            align: 'left',
            valign: 'center',
            width: '10%',
            formatter: function(value, row, index) { 
                return index + 1;
            }
    
        }, { 
            title: '用户ID',
            field: 'id',
            align: 'left',
            valign: 'center',
    
        }, { 
            title: '用户姓名',
            field: 'username',
            align: 'center',
            valign: 'center',
            cellStyle: function(value, row, index) { 
                return { 
                    css: { 
                        "word-wrap": "break-word",
                        "word-break": "normal"
                    }
                };
            }
    
        },{ 
            title: '性别',
            field: 'sex',
            align: 'center',
            valign: 'center',
            formatter: function (value, row, index) { 
                return value=='M'?'男':'女';
            } //格式化日期
        },  { 
            title: '出生日期',
            field: 'birth',
            align: 'center',
            valign: 'center',
            // formatter: function (value, row, index) { 
            // return ;
            // } //格式化日期
        },{ 
            title: 'Item Operate',
            align: 'center',
            field: 'id',
            clickToSelect: false,
            formatter:  function operateFormatter(value, row, index) { 
                var btn = '<button type="button" id="delUser" class="btn btn-outline-danger" userId='
                    + value
                    + ' οnclick="delUser(this)">删除</button><button type="button" id="dupUser" class="btn btn-outline-info" ' +
                    ' οnclick="updUser('+value + ')">修改</button>'
                return btn;
            }
        }]
    });
    
    // 删除用户
    function delUser(dom) { 
        var message = confirm("确认删除嘛？");
        if (message == true) { 
            $.ajax({ 
                url : '/adminAjax/user/' + $(dom).attr("userId"),
                type : 'delete',
                success : function(data) { 
                    alert("删除成功");
                    $('#tb_users').bootstrapTable('refresh');//刷新表格
                },
                error : function(data){ 
                    alert("服务器繁忙")
                }
            });
        }
    }
    
    // 编辑用户
    function updUser(id) { 
        $("#modalTitle").text("编辑");
        $.ajax({ 
            url : '/adminAjax/user/' +id,
            type : 'get',
            success : function(data) { 
                $('#userOfId').show().attr('readonly',"readonly").val(data.id);
                $("#username").val(data.username);
                $('#password').attr('hidden','hidden').val(data.password);
                if(data.sex=='M'){ 
                    $('#sexM').attr("checked","checked");
                } else { 
                    $('#sexF').attr("checked","checked");
                }
                $('#birth').val(data.birth);
                $("#modalEdit").modal("show");
            },
            error : function(data){ 
                alert("服务器繁忙")
            }
        });
        //console.log("测试");
    }
    
    //"新增"按钮
    $(".btn-add").click(function() { 
        $("#modalTitle").text("添加新用户");
        $('#idDiv').hide();
        $("#username").val("antRain");
        $('#password').val("123456").removeAttr('hidden');
        $('#sexM').attr("checked","checked");
        $('#birth').val('1999-02-23');
        $("#modalEdit").modal("show"); //利用bootstrap 的model 
    });
    
    
    $("#saveButton").click(function () { 
        var modalTitle = $("#modalTitle").html();
        var method ="post";
        var username = $('#username').val();
        var password = $('#password').val();
        var id = $('#userOfId').val();
        var sex =$('input[name="sex"]:checked').val();
        var birth = $("#birth").val();
        var user ={ 
            "username":username,
            "password":password,
            "sex":sex,
            "birth":birth
        };
        if(modalTitle=="编辑"){ 
            method = 'put';
            user.id = id;
        }
        $.ajax({ 
            url : '/adminAjax/user',
            type : method,
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(user),//把 JavaScript 对象转换为字符串。
            success : function(data) { 
                $('#tb_users').bootstrapTable('refresh');//刷新表格
            },
            error : function(data){ 
                alert("服务器繁忙")
            }
        });
        $("#modalEdit").modal("hide");
    });

### 问题日志 ###

*  Malformed markup: Attribute “class” appears more than once in element

<input id="zxName" name="zxName" class="form-control " type="text" aria-required="true" aria-invalid="false" class="valid">
    在thymeleaf 标签不能有两个class

*  片段选取

<head th:replace="commons/bar::#header-fragment(select='Y')"></head>
    <head th:fragment="header-fragment">
    :: 后面可以通过css选择器选取

*  a.ajax is not a function  
    版本不对
 *  bootstraptable json数据加载不出来  
    json格式

{ 
        "totalCount": 13,
        "pageSize": 10,
        "totalPage": 2,
        "currPage": 0,
        "list": [{ 
            "id": 1,
            "username": "cogles0",
            "password": "g9saZ4BJ9Xn",
            "sex": "M",
            "birth": "2009-06-11"
        }, { 
            "id": 2,
            "username": "kboor1",
            "password": "QxTltEzxz",
            "sex": "F",
            "birth": "2005-06-23"
        }]
    }

解决：添加方法

responseHandler: function(res) { 
                        console.log(res);
                        return {  //return bootstrap-table能处理的数据格式
                            "total": res.totalCount,
                            "rows": res.list
                        }
                    },

或者最好在服务端传送数据格式

return Json("{\"total\":数据条数,\"rows\":显示的数据}")

*  bootstrap.min.js:6 Uncaught TypeError: n is not a constructor  
    at a.l.toggle (bootstrap.min.js:6)  
    [解决参考博客][Link 1]

### 学习过程 ###

*  input:radio 利用jQuery选中

<body>
        <input type="radio" name="sex" id="sexM">
        <input type="radio" name="sex" id="sexF">
        <script src="plugins/jquery/jquery.min.js"></script>
        <script> console.log("before"); $("#sexM").attr("checked", "checked"); //$("#sexM").attr("checked");不行 //<input type="radio" name="sex" id="sexM" checked> 这个是可以，有默认值 console.log("after"); </script>
    </body>

*  bootstraptable 学习调试代码

<!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width" />
        <title>BootstrapTable分页</title>
        <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://unpkg.com/@fortawesome/fontawesome-free@5.12.1/css/all.min.css">
        <link href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css" rel="stylesheet">
    </head>
    
    <body>
    
        <style> .like { margin-right: 10px; } </style>
    
    
    
        <div id="toolbar">
            <button id="remove" class="btn btn-danger" disabled>
              <i class="glyphicon glyphicon-remove"></i> Delete
            </button>
        </div>
        <table id="table" data-toolbar="#toolbar" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-fullscreen="true" data-show-columns="true" data-show-columns-toggle-all="true" data-detail-view="true" data-show-export="true" data-click-to-select="true" data-detail-formatter="detailFormatter" data-minimum-count-columns="2" data-show-pagination-switch="true" data-pagination="true" data-id-field="id" data-page-list="[10, 25, 50, 100, all]" data-show-footer="true" data-side-pagination="server" data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data" data-response-handler="responseHandler">
        </table>
        <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/tableexport.jquery.plugin/tableExport.min.js"></script>
        <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
        <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/locale/bootstrap-table-zh-CN.min.js"></script>
        <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/extensions/export/bootstrap-table-export.min.js"></script>
        <script> var $table = $('#table') var $remove = $('#remove') var selections = [] function getIdSelections() { return $.map($table.bootstrapTable('getSelections'), function(row) { return row.id }) } function responseHandler(res) { $.each(res.rows, function(i, row) { row.state = $.inArray(row.id, selections) !== -1 }) return res } function detailFormatter(index, row) { var html = [] $.each(row, function(key, value) { html.push('<p><b>' + key + ':</b> ' + value + '</p>') }) return html.join('') } function operateFormatter(value, row, index) { return [ '<a class="like" href="javascript:void(0)" title="Like">', '<i class="fa fa-heart"></i>', '</a> ', '<a class="remove" href="javascript:void(0)" title="Remove">', '<i class="fa fa-trash"></i>', '</a>' ].join('') } window.operateEvents = { 'click .like': function(e, value, row, index) { alert('You click like action, row: ' + JSON.stringify(row)) }, 'click .remove': function(e, value, row, index) { $table.bootstrapTable('remove', { field: 'id', values: [row.id] }) } } function totalTextFormatter(data) { return 'Total' } function totalNameFormatter(data) { return data.length } function totalPriceFormatter(data) { var field = this.field return '$' + data.map(function(row) { return +row[field].substring(1) }).reduce(function(sum, i) { return sum + i }, 0) } function initTable() { $table.bootstrapTable('destroy').bootstrapTable({ height: 550, locale: $('#locale').val(), columns: [ [{ field: 'state', checkbox: true, rowspan: 2, align: 'center', valign: 'middle' }, { title: 'Item ID', field: 'id', rowspan: 2, align: 'center', valign: 'middle', sortable: true, footerFormatter: totalTextFormatter }, { title: 'Item Detail', colspan: 3, align: 'center' }], [{ field: 'name', title: 'Item Name', sortable: true, footerFormatter: totalNameFormatter, align: 'center' }, { field: 'price', title: 'Item Price', sortable: true, align: 'center', footerFormatter: totalPriceFormatter }, { field: 'operate', title: 'Item Operate', align: 'center', clickToSelect: false, events: window.operateEvents, formatter: operateFormatter }] ] }) $table.on('check.bs.table uncheck.bs.table ' + 'check-all.bs.table uncheck-all.bs.table', function() { $remove.prop('disabled', !$table.bootstrapTable('getSelections').length) // save your data, here just save the current page selections = getIdSelections() // push or splice the selections if you want to save all data selections }) $table.on('all.bs.table', function(e, name, args) { console.log(name, args) }) $remove.click(function() { var ids = getIdSelections() $table.bootstrapTable('remove', { field: 'id', values: ids }) $remove.prop('disabled', true) }) } $(function() { initTable() }) </script>
    
    
    </body>
    
    </html>

[springBoot-example-ui]: https://github.com/jiangcaijun/springBoot-example-ui
[Springboot_restful]: https://blog.csdn.net/qq_41146650/article/details/104975498
[SpringBoot_BootstrapTable]: https://blog.csdn.net/pengjunlee/article/details/85257391
[-bootstrap table]: https://www.jianshu.com/p/4d0109fdcd49
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw_size_16_color_FFFFFF_t_70]: /images/20230528/608af62daf3c4d0cb9f23f17e77dc68f.png
[Link 1]: https://blog.csdn.net/qq_41146650/article/details/105023215