# SpringBoot系列文章目录
SpringBoot知识范围-学习步骤–【思维导图知识范围】
文章目录
先上效果图
先讲一下，为什么要选择layui 做为springBoot 的页面框架？
Thymeleaf和老牌的jsp属于非前后分离的思路来开发的
springBoot 自带的页面是Thymeleaf。
Thymeleaf 是一种现代服务器端Java模板引擎，主要用于Web和独立环境中的应用开发。它主要用于处理HTML，XML，JavaScript，CSS等标记语言。因此，从技术角度来看，Thymeleaf 更偏向于后端技术栈的一部分。下面是一些解释为何Thymeleaf被认为是后端技术的关键点：
模板渲染：Thymeleaf的主要作用是在服务器端将数据模型（通常是Java对象）渲染到HTML模板中。这意味着在用户请求页面之前，服务器已经处理了模板和数据的结合，生成最终的HTML页面发送给客户端。
与Java的集成：Thymeleaf与Java紧密集成，特别是在Spring框架中广泛使用。它通过使用Java对象作为数据模型来简化Web开发，这使得在服务器端处理逻辑和渲染模板变得非常自然。
而国情就是，一旦出现了前后端分离，就没有公司再去理会非前后分离的前端怎么发展了。
那为什么不是VUE？
这就是大学里教学任务的尴尬问题了。因为VUE的学习也得一个学期（4-6个月时间掌握）左右，springBoot 的知识点也比较多，甚至还超过了VUE。
含最少的前后端分离的知识点来把springBoot 的页面实现出来的，就只能是jquery 原生的， 或者是jquery 轻量级的框架，而layui 刚好就是国产的jquery 轻量级的框架。而且layUI 目前也有一定的市场。
当然也有人用纯的bootstrap来写页面的。但是这个列表写的太痛苦了。
所以一些要求灵活的客户端的网页仍然会使用layui 做为前端框架。这样可以使用大量的互联网上的网页模板
参考：
SpringBoot+layui民宿管理系统前台-毕业设计-【JSB项目实战】
所以，要用VUE的项目都是重量级的。(尤其是对于学生来说)
可以参考《SpringBoot+VUE民宿管理系统后台-毕业设计-【JSB项目实战】》
MVC模型
MVC的数据传输包括两个方面。
- 浏览器给服务器的信息
- 服务器给浏览器的信息
layui
layui用了几年，这个框架十分适合我们后台人员开发。简单易用，用的较多的模块肯定是table模块和form模块了。但是在一个开发团队中，不同的人开发水平的差异，如果没有调用统一的公共方法，那就会造成很多样式的不同和公共的bug出现到不同的页面 从而出现耗费过多的精力修改bug。所以我们需要做的是统一样式和方法的调用，将其二次封装以便于开发人员的调用。另一方面也能减少代码的冗余量。
也可以这么说，
UI框架，如果没有table 没有菜单，那这个UI就真的只是一堆皮肤了。
一般在页面的table的构成如下： 搜索区 头部工具栏 和table主体【包含对行和列 事件的处理】
首先分析layui 的输入(给页面什么样的json)
当然了，你得自己会一些layui ,不然的话，就以现在的网络，搬运工太多，而90%的搬运工事实上并没有啥精力帮你复盘。
也就是说，你看到的90%的代码不是不正确，而是，2023年的搬运工，搬了秦始皇的“兵马俑”。然后，你以为是2023年的新框架，套到项目里，那可想而知。
事实上，现在的学习新的知识，能找到合适的一个起步的代码真的就算是成功了一半。比如说充分利用deepseek 。
layui 参数接入
layui.use('table', function () {
var table = layui.table;
/*第一种原始写法*/
table.render({
id: 'laydictsList',
elem: '#test',
url: areasURL + "/base_dics/LayuigetPageList",
cellMinWidth: 80,//全局定义常规单元格的最小宽度，layui 2.2.1 新增
where: { txtFullName: null },
page: true,
//toolbar:'barDemo',
limit: 10,
limits: [2, 5, 10, 20, 30],
text: {
none: '暂无相关数据！'//默认无数据
},
cols: [[
{ type: 'checkbox', LAY_CHECKED: false },
{ field: 'dicsid', width: 80, title: 'ID', sort: true, hide: true },
{ field: 'code', width: 80, title: '编号' },
{ field: 'sortnum', width: 80, title: '序号', sort: true },
{ field: 'fullname', width: 80, title: '名称' },
{ field: 'diccategoryname', title: '所属类别', width: '30%', minWidth: 100 }, //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
{ field: 'experience', title: '操作' }
]]
});
});
接口JSON格式
要求后台返回数据格式必须为:
至于json的工具，我一般是用json编辑器JSONedit.exe ，后面资源上提供下载吧。这名字太常见了，怕是百度的话，得百度很久。你说你起一个“彪哥JSON编辑器”这样的名字也好找呀,所以用在线的json工具也是不错的选择。
{
"code" : "0",
"msg" : "查询成功",
"data" : [
{
"teacherNo" : 123456578,
"teacherName" : "123456578",
"teacherSex" : "男"
},
{
"teacherNo" : 456546547,
"teacherName" : "456546547",
"teacherSex" : "男"
},
{
"teacherNo" : 1234565767,
"teacherName" : "456546546",
"teacherSex" : "男"
}
],
"count" : 98
}
源项目的地址：https://gitee.com/dearmite_admin/sb-layui-stuscore
视频的讲解：
springBoot项目加其它功能
步骤1 起后台，构建 controller
中间过程略了。详细看的话还是看视频里的操作吧。
先写controller 的好处是这个类写完之后，可以用浏览器直接来验证。
那么这个字符串要怎么验证呢？
我是使用JSONedit.exe
可以对这个串进行格式化。看上去非常的清爽
也可以展开成树的样子。（格式如果错了，就不能展开树的形式）
还有列表的形式
真的是程序员必备的好工具。
步骤2 串页面，让 controller与页面之间丝滑
有的人可能喜欢把后台一气写完，不过，如果是我初学的话，可能我会先来写html 页面。因为给我的感觉就是，页面跳转能找到地方，这一步很关键。
先加菜单
然后就是按着学生的列表，来改教师的列表。
要注意的是，因为后台并没有完全改成学生的，所以，这些页面，最关注的是跳转的是否正确。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>网站后台管理模版</title>
<link rel="stylesheet" type="text/css"
href="assets/admin/layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="assets/admin/css/admin.css" />
</head>
<body>
<div class="page-content-wrap" id="studentSearch">
<h5 style="text-align:center;font-size: 20px;line-height: 25px;color:#666">教师信息管理界面</h5>
<hr>
<div class="layui-form-item">
<div class="layui-inline tool-btn">
<button class="layui-btn layui-btn-small site-demo-active"
data-type="tabAdd">
<i class="layui-icon"></i>
</button>
<!-- <button
class="layui-btn layui-btn-small layui-btn-warm listOrderBtn hidden-xs"
data-url="/admin/category/listorderall.html">
<i class="iconfont"></i>
</button> -->
</div>
<div class="layui-inline">
<input type="text" id="studentNameSearch" placeholder="请输入师姓名"
autocomplete="off" class="layui-input">
</div>
<button class="layui-btn layui-btn-normal site-demo-active"
data-type="search" id="searchStudent">搜索</button>
<table class="layui-table"
lay-data="{ url:'/teacher/getAllTeacher', page:true, id:'idTest'}"
lay-filter="demo">
<thead>
<tr>
<th lay-data="{type:'checkbox', }"></th>
<th lay-data="{field:'teacherNo',sort: true}">师号</th>
<th lay-data="{field:'teacherName'}">姓名</th>
<th lay-data="{field:'teacherSex'}">性别</th>
<th
lay-data="{fixed: 'right', width:220, align:'left', toolbar: '#barDemo'}"></th>
</tr>
</thead>
</table>
</div>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
</script>
<hr></hr>
<h5 style="text-align: center;">@2018.学生单科成绩管理系统</h5>
</div>
<script src="assets/admin/layui/layui.all.js" type="text/javascript"
charset="utf-8"></script>
<script>
layui.use('table', function() {
var $ = layui.jquery
var table = layui.table;
//监听表格复选框选择
table.on('checkbox(demo)', function(obj) {
console.log(obj)
});
//监听工具条
table.on('tool(demo)', function(obj) {
var data = obj.data;
if (obj.event === 'detail') {
var detailFrom = layui.layer.open({
title : "查看学生信息",
type : 2,
content : "/studentDetail.html",//弹出层页面
area: ['500px', '200px'],
success : function(layero, index){
var body = layui.layer.getChildFrame('body', index);
body.find("#studentNo").text(data.studentNo);
body.find("#studentName").text(data.studentName);
body.find("#studentSex").text(data.studentSex);
}});
}
if (obj.event === 'del') {
layer.confirm('真的删除该学生吗？', function(index) {
var data = obj.data;
$.ajax({
//几个参数需要注意一下
type: "POST",//方法类型
dataType: "json",//预期服务器返回的数据类型
url: "/teacher/deleteTeacher",//url
data: data,
success: function (result) {
if (result.code == "0") {
layer.close(index);
layer.msg('删除教师成功');
layui.table.reload('idTest',{page:{curr:1}});
}else{
layer.msg('删除教师失败', {
icon: 5
});
}
},
error : function() {
layer.msg('服务器错误', {
icon: 5
});
}
});
});
}
if (obj.event === 'edit') {
var editFrom = layui.layer.open({
title : "编辑学生信息",
type : 2,
content : "/studentEdit.html",//弹出层页面
area: ['800px', '400px'],
success : function(layero, index){
var body = layui.layer.getChildFrame('body', index);
//获取窗口对象
var iframeWindow = layero.find('iframe')[0].contentWindow;
body.find("#studentNo").val(data.studentNo);
body.find("#studentName").val(data.studentName);
body.find(".studentSex option[value="+data.studentSex+"]").attr("selected","selected");
iframeWindow.layui.form.render();
iframeWindow.layui.form.render('select');
}});
}
});
//触发事件
var active = {
tabAdd : function() {
layer.open({
type: 2,
title: '添加教师信息',
shadeClose: true,
shade: false,
/* maxmin: true, *///开启最大化最小化按钮
area: ['800px', '400px'],
content: '/teacherAdd.html'
});
},search:function(){
var name=$("#studentNameSearch").val();
table.reload('idTest',{
method: 'POST'
, where: {"studentName":name},page: {
curr: 1 //重新从第 1 页开始
}
})
}
};
$('#studentSearch .layui-btn').on('click', function() {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
</body>
</html>
步骤3 写mapper，service等后台代码
因为是抄学生的表的相关类的，所以也不用把原理搞的门清。
在这中间，你可能碰到多次的 badmapping … 白页，后台报错，启动不成功。MAVEN编译报错。访问地址404…
每当碰到这种情况的时候，你就这么想，你说这么多的错误，这么多的问题，这么难的环境，一通操作猛如虎，怎么工资才2500呢？
所以，2500的工资，跟25000的工资差的其实就是你会调多少错。不管你信不信，10年前也有2500的工资，现在入职1-2年的，也有25000的工资。
当然了，本例还是要提供一下全套的代码的。
据说，用猫的鼠标指针会带来好运？
资源下载
SpringBoot项目新加一个表（程序猿式操作）–【JSB系列之012】配套资源
原项目（未加教师表，未加教师类）
https://download.youkuaiyun.com/download/dearmite/90895450
加了教师表，添加了教师的相关代码
https://download.youkuaiyun.com/download/dearmite/90895453
也可以看GITEE上的开源项目
https://gitee.com/dearmite_admin/sb-layui-stuscore/tree/master
POP猫鼠标指针方案资源下载
https://download.youkuaiyun.com/download/dearmite/88230629
附：怎样安装自己喜欢的鼠标指针方案 如何安装鼠标指针
下载并安装指针方案：
01
下载自己喜欢的鼠标指针方案，解压：
02
解压后我们会看到文件夹下有很多 ani动态光标文件 中有一个 ini文件，右键单击 ini文件（安装文件.ini），执行【安装】命令：
03
等待安装结束后打开【控制面板】→【鼠标】（Win XP 与 Win 7 操作均相同）：
04
打开【鼠标属性】窗口，选择【指针】选项卡，在方案中找到刚才安装的指针方案【Crystal Clear】，然后单击窗口又下脚的【应用】→【确定】完成安装！
第二种方案
扫一扫
2301
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
