引入Layuimini后台管理模板。可以在百度搜索下载，这是一个开源免费的模板。
下载好之后一定要放在resources/static目录下，将其中的index.html拖拽到templates文件夹下。
对index.html进行修改，修改好代码如下：
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8"> <title>cvpr顶会热词统计</title> <link rel="icon" th:href="@{/layuimini/images/favicon.ico}"> <link rel="stylesheet" th:href="@{/layuimini/lib/layui-v2.5.5/css/layui.css}" media="all"> <link rel="stylesheet" th:href="@{/layuimini/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all"> <link rel="stylesheet" th:href="@{/layuimini/css/layuimini.css}" media="all"> <link rel="stylesheet" th:href="@{/layuimini/css/themes/default.css}" media="all"> <link rel="stylesheet" th:href="@{/layuimini/css/public.css}" media="all"> <!--[if lt IE 9]> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style id="layuimini-bg-color"> </style> </head> <body class="layui-layout-body layuimini-all"> <div class="layui-layout layui-layout-admin"> <div class="layui-header header"> <div class="layui-logo layuimini-logo layuimini-back-home"></div> <div class="layuimini-header-content"> <a> <div class="layuimini-tool"><i title="展开" class="fa fa-outdent" data-side-fold="1"></i></div> </a> <!--电脑端头部菜单--> <ul class="layui-nav layui-layout-left layuimini-header-menu layuimini-menu-header-pc layuimini-pc-show"> </ul> <!--手机端头部菜单--> <ul class="layui-nav layui-layout-left layuimini-header-menu layuimini-mobile-show"> <li class="layui-nav-item"> <a href="javascript:;"><i class="fa fa-list-ul"></i> 选择模块</a> <dl class="layui-nav-child layuimini-menu-header-mobile"> </dl> </li> </ul> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item" lay-unselect> <a href="javascript:;" data-refresh="刷新"><i class="fa fa-refresh"></i></a> </li> <li class="layui-nav-item" lay-unselect> <a href="javascript:;" data-clear="清理" class="layuimini-clear"><i class="fa fa-trash-o"></i></a> </li> <li class="layui-nav-item mobile layui-hide-xs" lay-unselect> <a href="javascript:;" data-check-screen="full"><i class="fa fa-arrows-alt"></i></a> </li> <li class="layui-nav-item layuimini-setting"> <a href="javascript:;">admin</a> <dl class="layui-nav-child"> <dd> <a href="javascript:;" layuimini-content-href="page/user-setting.html" data-title="基本资料" data-icon="fa fa-gears">基本资料<span class="layui-badge-dot"></span></a> </dd> <dd> <a href="javascript:;" layuimini-content-href="page/user-password.html" data-title="修改密码" data-icon="fa fa-gears">修改密码</a> </dd> <dd> <hr> </dd> <dd> <a href="javascript:;" class="login-out">退出登录</a> </dd> </dl> </li> <li class="layui-nav-item layuimini-select-bgcolor" lay-unselect> <a href="javascript:;" data-bgcolor="配色方案"><i class="fa fa-ellipsis-v"></i></a> </li> </ul> </div> </div> <!--无限极左侧菜单--> <div class="layui-side layui-bg-black layuimini-menu-left"> </div> <!--手机端遮罩层--> <div class="layuimini-make"></div> <!-- 移动导航 --> <div class="layuimini-site-mobile"><i class="layui-icon">�</i></div> <div class="layui-body"> <div class="layui-card layuimini-page-header layui-hide"> <div class="layui-breadcrumb layuimini-page-title"> <a lay-href="" href="/">主页</a><span lay-separator="">/</span> <a><cite>常规管理</cite></a><span lay-separator="">/</span> <a><cite>系统设置</cite></a> </div> </div> <div class="layuimini-content-page"> <div class="container" id="container" style=" 600px; height: 400px; border: 1px solid red"></div> </div> </div> </div> <script th:src="@{/layuimini/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script> <script th:src="@{/layuimini/js/lay-config.js}" charset="utf-8"></script> <script> layui.use(['jquery', 'layer', 'miniAdmin', 'miniTongji'], function () { var $ = layui.jquery, layer = layui.layer, miniAdmin = layui.miniAdmin, miniTongji = layui.miniTongji; var options = { iniUrl: "/layuimini/api/init.json", // 初始化接口 clearUrl: "/layuimini/api/clear.json", // 缓存清理接口 renderPageVersion: true, // 初始化页面是否加版本号 bgColorDefault: false, // 主题默认配置 multiModule: true, // 是否开启多模块 menuChildOpen: false, // 是否默认展开菜单 loadingTime: 0, // 初始化加载时间 pageAnim: true, // 切换菜单动画 }; miniAdmin.render(options); $('.login-out').on("click", function () { layer.msg('退出登录成功', function () { window.location = '../static/layuimini/page/login-3.html'; }); }); }); </script> </body> </html>
选择使用page中的table.html进行修改，修改后代码如下：
<div class="layuimini-container layuimini-page-anim"> <div class="layuimini-main"> <fieldset class="table-search-fieldset"> <legend>搜索信息</legend> <div style="margin: 10px 10px 10px 10px"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">论文编号</label> <div class="layui-input-inline"> <input type="text" name="id" id="id" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">论文题目</label> <div class="layui-input-inline"> <input type="text" name="title" id="title" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">论文作者</label> <div class="layui-input-inline"> <input type="text" name="author" id="author" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">发行日期</label> <div class="layui-input-inline"> <input type="text" name="date" id="date" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon">�</i> 搜 索</button> </div> </div> </div> </fieldset> <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button> </div> </script> <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table> <script type="text/html" id="currentTableBar"> <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a> </script> </div> </div> <script> layui.use(['form', 'table','miniPage','element', 'laydate', 'layer'], function () { var $ = layui.jquery, form = layui.form, table = layui.table, miniPage = layui.miniPage, laydate = layui.laydate, layer = layui.layer; laydate.render({ elem: '#date' }) var id = $('#id'); var title = $('#title'); var author = $('#author'); var date = $('#date'); table.render({ elem: '#currentTableId', url: '/getList', data: { id: id.val(), title: title.val(), author: author.val(), date: date.val() }, toolbar: '#toolbarDemo', defaultToolbar: ['filter', 'exports', 'print', { title: '提示', layEvent: 'LAYTABLE_TIPS', icon: 'layui-icon-tips' }], cols: [[ {field:'id', title:'ID', 80, unresize: true, sort: true}, {field:'date', title:'时间', 100, sort: true} ,{field:'name', title:'论文标题', 350, edit: 'text'} ,{field:'author', title:'作者', 280, edit: 'text', sort: true} ,{field:'booktitle', title:'出版书名', 205} ,{field:'pdf', title:'原文链接', templet: link, 110, sort: true} ,{fixed: 'right', title:'操作', toolbar: '#currentTableBar', 120} ]], limits: [10, 15, 20, 25, 50, 100], limit: 15, page: true, skin: 'line' }); function link(data) { var pdf = data.pdf; // console.log(pdf) var a = "<a href='https://openaccess.thecvf.com/"+ pdf +"' target='_blank'>原文链接</a>" return a; } // 监听搜索操作 form.on('submit(data-search-btn)', function (data) { var id = $('#id'); var title = $('#title'); var author = $('#author'); var date = $('#date'); //执行搜索重载 table.reload('currentTableId', { page: { curr: 1 } , where: { id: id.val(), title: title.val(), author: author.val(), date: date.val() } }, 'data'); }); /** * toolbar事件监听 */ table.on('toolbar(currentTableFilter)', function (obj) { if (obj.event === 'add') { // 监听添加操作 var content = miniPage.getHrefContent('layuimini/page/table/add.html'); var openWH = miniPage.getOpenWidthHeight(); var index = layer.open({ title: '添加论文', type: 1, shade: 0.2, maxmin:true, shadeClose: true, area: [openWH[0] + 'px', openWH[1] + 'px'], offset: [openWH[2] + 'px', openWH[3] + 'px'], content: content, }); $(window).on("resize", function () { layer.full(index); }); } }); table.on('tool(currentTableFilter)', function (obj) { var data = obj.data; if (obj.event === 'edit') { var content = miniPage.getHrefContent('/layuimini/page/table/edit.html'); var openWH = miniPage.getOpenWidthHeight(); var index = layer.open({ title: '编辑论文信息', type: 1, shade: 0.2, maxmin: true, shadeClose: true, area: [openWH[0] + 'px', openWH[1] + 'px'], offset: [openWH[2] + 'px', openWH[3] + 'px'], content: content, btn: ['修改', '取消'], success: function (index, layero) { console.log(data) document.getElementById("title_edit").value = data.name; document.getElementById("author_edit").value = data.author; document.getElementById("booktitle_edit").value = data.booktitle; document.getElementById("pdf_edit").value = data.pdf; document.getElementById("date_edit").value = data.date; }, yes: function (index, layero) { let id = data.id; let title = document.getElementById("title_edit").value; let author = document.getElementById("author_edit").value let booktitle = document.getElementById("booktitle_edit").value; let pdf = document.getElementById("pdf_edit").value; let date = document.getElementById("date_edit").value; $.ajax({ url: '/updateInfo', type: 'post', dataType: 'json', data: { id: id, title: title, author: author, booktitle: booktitle, pdf: pdf, date: date }, success: function (myData) { if (myData.status == 'success') { layer.msg('修改成功！'); layer.close(index); } else { layer.msg('修改失败，请稍后再试！'); } } }) } }); $(window).on("resize", function () { layer.full(index); }); return false; } else if (obj.event === 'delete') { layer.confirm('真的删除行么', function (index) { $.ajax ({ url: '/deleteInfo', type: 'post', data: { id: data.id }, dataType: 'json', success: function (myData) { if (myData.status == 'success') { layer.close(index); obj.del(); } else { layer.msg('删除失败，请稍后重试！'); } } }) }); } }); }); </script>
使用了ajax调用上一篇写到的后台接口。
具体界面如下，增删改查方法全部可以实现：
