目录
- 基本资料
- 学习笔记
- 04-Pear-Admin-Layui模板运行
- 05-Pear-Admin-Layui-GIT方式代...
- 06-Pear-Admin与Vue对比 & 07-Pear-Admin与Vue对比补充
- 09-Pear-Admin-CRUD练习-数据库表创建
- 12-Pear-Admin-CRUD练习-引入其它依赖 & 13-Pear-Admin-CRUD练习-三层架构以及常见配置 & 20-Pear-Admin-CRUD练习-在线文档生成工具Knife4j使用
- 14-Pear-Admin-CRUD练习-映射数据库表的实体类
- 16-Pear-Admin-CRUD练习-角色mapper单元测试
- 32-Pear-Admin-CRUD练习-菜单mapper查询完成
- 34-Pear-Admin-CRUD练习-菜单service增删查完成
- 38-Pear-Admin-前端-左侧菜单修改
- 40-Pear-Admin-前端-角色列表展示
基本资料
Layui 是免费开源的 UI 组件，而官方出品的 Layui Admin 一直是付费产品，今天介绍的 Pear Admin Layui 就是 Pear 开源团队基于 Layui 打造的免费开源 admin ui 框架，无论是外观还是代码风格完全遵循 Layui 的规范。非常适合缺少前端牛人的团队或者仍然喜欢纯粹原生 HTML/CSS/JS 开发者使用，可以在不需要搞懂前端工程化的一系列新知识的情况下快速启动一个项目。gitee地址
最近官网打不开。但是可以把 Pear Admin Site 的资源下载到本地，部署到iis或者其他web服务上面，运行之后是这样的：
以及Layui官网
学习笔记
在b站找了一个教程，目前看起来还行：
Layui 潮流模板 Pear-Admin-Layui 快速入门 — b站
up主的个人博客和入门练习网站
Layui_18">04-Pear-Admin-Layui模板运行
Visual Studio Code使用Live Server插件来启动一个前端项目（我注：直接放java web项目的static目录应该也会行）
LayuiGIT_20">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的坑 ↩︎
