在b站找了一个教程，目前看起来还行：
Layui 潮流模板 Pear-Admin-Layui 快速入门 — b站
up主的个人博客和入门练习网站
04-Pear-Admin-Layui模板运行
Visual Studio Code使用Live Server插件来启动一个前端项目（我注：直接放java web项目的static目录应该也会行）
05-Pear-Admin-Layui-GIT方式代…
如上图，在VS Code的这个位置可切换git分支，切换后可马上看到已经在Live Server中跑的前端项目的表现变化。
06-Pear-Admin与Vue对比 & 07-Pear-Admin与Vue对比补充
简单来说就是Pear Admin Layui更简单易上手，会HTML/CSS/JS就行，而基于Vue的功能更强大更灵活更适合产品化，但是需要学很多其它知识。
09-Pear-Admin-CRUD练习-数据库表创建
详见本博—典型的用户/角色/菜单表设计
12-Pear-Admin-CRUD练习-引入其它依赖 & 13-Pear-Admin-CRUD练习-三层架构以及常见配置 & 20-Pear-Admin-CRUD练习-在线文档生成工具Knife4j使用
Knife4j是一个集Swagger2和OpenAPI3为一体的增强解决方案
14-Pear-Admin-CRUD练习-映射数据库表的实体类
Intellij里连数据库，和用表自动生成实体类
16-Pear-Admin-CRUD练习-角色mapper单元测试
快速生成测试等
32-Pear-Admin-CRUD练习-菜单mapper查询完成
mapper递归查询，比如可用于菜单（嵌套子菜单）
34-Pear-Admin-CRUD练习-菜单service增删查完成
- 偏末尾：
对于已检查异常（Exception及其非运行时子类），Spring默认不会回滚事务。这意味着，如果你抛出了一个如IOException、SQLException等已检查异常，事务将不会回滚，除非你明确配置Spring来回滚这些异常。所以通常应该配置抛出RuntimeException或其子类。
可以通过在@Transactional注解中使用rollbackFor属性来指定哪些已检查异常应该触发事务回滚。例如：@Transactional(rollbackFor = Exception.class)。
38-Pear-Admin-前端-左侧菜单修改
版本3.50.0:
左侧菜单在admin/data/menu.json
40-Pear-Admin-前端-角色列表展示
Layui官网有很多可参考和复用的代码和组件，比如表格的异步属性，就适用在表单里请求数据和渲染的场景。下面是我的可运行代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>角色管理</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
<link rel="stylesheet" href="../../admin/css/other/result.css" />
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-body">
<table class="layui-hide" id="test" lay-filter="test"></table>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(function(){
let table = layui.table;
//表格渲染
table.render({
elem: '#test',
url: 'http://127.0.0.1:8083/aiButton/logs/generatedButtons?clientId=client_a_pro',
// page: true,
parseData: function(res){ // res 即为原始返回的数据
// alert( "res:" + res[0].outputUrl);
return {
"code": 0, // 解析接口状态 layui定义：如果是code为0才解析数据，不是的话就在表格显示msg?
"msg": "暂无数据",
// "count": 2, // 解析数据长度
"data": res // 解析数据列表
};
},
cols: [[
{type: 'checkbox', fixed: 'left'},
{field:'clientId', title: 'clientId'},
{field:'outputUrl', title: '图片链接'},
{title: 'tags',
templet: function(row){
return row.clientId=='client_a_pro' ? '<span class="layui-badge layui-bg-orange">是的</span>':
'<span class="layui-badge layui-bg-green">不是</span>';
}
},
{
title: '操作',
templet: function(row){
let s = '<button type="button" class="layui-btn layui-bg-red">红色删除</button>';
s += '<button class="layui-btn layui-btn-primary layui-border-blue">蓝色按钮</button>';
return s;
}
}
]]
});
});
</script>
</body>
</html>
其中调用后端url返回的数据为：
[
{
“clientId”: “client_a_pro”,
“outputUrl”: “http://36.26.47.210:25337/NiukouToCloth/view?filename=img_00544_.png&type=output&subfolder=buttonx”,
“createdAt”: “2024-10-23T16:53:34”
},
{
“clientId”: “client_a_pro”,
“outputUrl”: “http://36.26.47.210:25337/NiukouToCloth/view?filename=img_00543_.png&type=output&subfolder=buttonx”,
“createdAt”: “2024-10-23T16:53:34”
},
{
“clientId”: “client_a_pro”,
“outputUrl”: “http://36.26.47.210:25337/NiukouToCloth/view?filename=img_00542_.png&type=output&subfolder=buttonx”,
“createdAt”: “2024-10-23T16:53:34”
},
{
“clientId”: “client_a_pro”,
“outputUrl”: “http://36.26.47.210:25337/NiukouToCloth/view?filename=img_00541_.png&type=output&subfolder=buttonx”,
“createdAt”: “2024-10-23T16:53:34”
}
]
呈现的页面效果：
这里关于parseData算是有个坑1：返回code为0才解析数据，否则就在表格显示msg。
-
关于LayUi中parseData中code的坑 ↩︎