前端开发模板Pear Admin Layui

news2024/11/6 12:00:30

目录

  • 基本资料
  • 学习笔记
    • 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主的个人博客和入门练习网站

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。

  1. 关于LayUi中parseData中code的坑 ↩︎

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2234265.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[MySQL#10] 索引底层(1) | Page | 页目录

[MySQL#10] 索引底层(1) | Page | 页目录

目录 1. 初识索引 2. 认识磁盘 3. MySQL与磁盘交互基本单位 4. 索引的理解 1. 重谈Page 2. 为什么IO交互要用Page 3. 有主键的表插入数据时的排序 4. 单个Page与多个Page 4.1 单个Page 4.2 多个Page 目录 单Page目录 多Page目录 在看本文之前&#xff0c;可以回顾…
阅读更多...
.net c# 使用 MailKit库接收139邮箱邮件

.net c# 使用 MailKit库接收139邮箱邮件

开发工具 vs2022&#xff0c;新建-控制台应用。项目完整代码下载&#xff1a; 要安装MailKit库 using MailKit; using MailKit.Net.Imap; using MimeKit; using System.Text; namespace MailKit_mail {internal class Program{static void Main(string[] args){//需要使用 Ma…
阅读更多...
Centos开机自启动脚本示例

Centos开机自启动脚本示例

本文建议创建一个sh文件管理自启动的各项内容&#xff0c;再将sh文件设置开机启动 在/root/autoshell下创建一个autostart.sh&#xff0c;内容如下 #!/bin/bash # description:开机自启脚本# 启动mongodb sh /root/software/mongodb-linux-x86_64-rhel70-4.0.6/bin/mongod --c…
阅读更多...
虚拟现实和增强现实技术，如何打造沉浸式体验？

虚拟现实和增强现实技术，如何打造沉浸式体验？

内容概要 在这个科技飞速发展的时代&#xff0c;虚拟现实&#xff08;VR&#xff09;与增强现实&#xff08;AR&#xff09;技术的结合就像调皮的小精灵&#xff0c;一下子把我们的生活变得神奇又有趣。想象一下&#xff0c;你正在游戏中与精灵搏斗&#xff0c;突然间身边的客…
阅读更多...
计算机网络 TCP/IP体系 数据链路层

计算机网络 TCP/IP体系 数据链路层

一. 数据链路层的基本概念 数据链路层主要负责节点之间的通信&#xff0c;确保从物理层接收到的数据能够准确无误地传输到网络层。 数据链路层使用的信道主要有以下两种类型: 点对点信道: 这种信道使用一对一的点对点通信方式。广播信道: 这种信道使用一对多的广播通信方式,…
阅读更多...
数据结构————链表

数据结构————链表

一、引言 1. 中间/头部的插入删除&#xff0c;时间复杂度为O(N) 2. 增容需要申请新空间&#xff0c;拷贝数据&#xff0c;释放旧空间。会有不小的消耗。 3. 增容一般是呈2倍的增长&#xff0c;势必会有一定的空间浪费。例如当前容量为100&#xff0c;满了以后增容到200&#x…
阅读更多...
【网络原理】深入理解关于HTTP协议和报文的格式以及重要的属性

【网络原理】深入理解关于HTTP协议和报文的格式以及重要的属性

前言 &#x1f31f;&#x1f31f;本期讲解关于HTTP协议的重要的机制~~~ &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 &#x1f525; 你的点赞就是小编不断更新的最大动力 &#x1f386;那么废话不…
阅读更多...
【MyBatis源码】CacheKey缓存键的原理分析

【MyBatis源码】CacheKey缓存键的原理分析

文章目录 Mybatis缓存设计缓存KEY的设计CacheKey类主体CacheKey组成CacheKey如何保证缓存key的唯一性 Mybatis缓存设计 MyBatis 每秒过滤众多数据库查询操作&#xff0c;这对 MyBatis 缓存键的设计提出了很高的要求。MyBatis缓存键要满足以下几点。 无碰撞&#xff1a;必须保证…
阅读更多...
面试题：JVM（二）

面试题：JVM（二）

1. 面试题 简述 Java 类加载机制?&#xff08;百度&#xff09; JVM类加载机制 &#xff08;滴滴&#xff09; JVM中类加载机制&#xff0c;类加载过程&#xff0c;什么是双亲委派模型&#xff1f; &#xff08;腾讯&#xff09; JVM的类加载机制是什么&#xff1f; &#x…
阅读更多...
数据库的使用02:SQLServer的连接字符串、备份、还原、SQL监视相关设置

数据库的使用02:SQLServer的连接字符串、备份、还原、SQL监视相关设置

目录 一、连接字符串 【本地连接字符串】 【远程连接字符串】 二、备份 三、还原 &#xff08;1&#xff09;还原数据库-bak、btn文件 &#xff08;2&#xff09;附加数据库mdf文件 四、SQL监视器的使用 一、连接字符串 【本地连接字符串】 server DESKTOP-FTH2P3S; Da…
阅读更多...
【2024工业图像异常检测文献】UCAD: 使用对比学习提示的无监督连续异常检测方法

【2024工业图像异常检测文献】UCAD: 使用对比学习提示的无监督连续异常检测方法

Unsupervised Continual Anomaly Detection with Contrastively-learned Prompt 1、Background 无监督异常检测&#xff08;UAD&#xff09;专注于在没有先验知识或标记实例的情况下识别数据中的不寻常模式或异常值&#xff0c;仅依赖于“正常”数据的内在分布&#xff08;Cha…
阅读更多...
【算法】Floyd多源最短路径算法

【算法】Floyd多源最短路径算法

目录 一、概念 二、思路 三、代码 一、概念 在前面的学习中&#xff0c;我们已经接触了Dijkstra、Bellman-Ford等单源最短路径算法。但首先我们要知道何为单源最短路径&#xff0c;何为多源最短路径 单源最短路径&#xff1a;从图中选取一点&#xff0c;求这个点到图中其他…
阅读更多...
[C++]——哈希（附源码）

[C++]——哈希（附源码）

目录 ​编辑 ​编辑 一、前言 二、正文 2.1 unorder系列关联式容器 2.1.1 unordered_map 2.1.1.1 unorderer_map的介绍 ①unordered_map的构造 ②unordered_map的容量 ③unordered_map的迭代器 ④unordered_map的元素访问 ⑤unordered_map的查询 ⑥unordered_map的修改操…
阅读更多...
使用Ubuntu快速部署MinIO对象存储

使用Ubuntu快速部署MinIO对象存储

想拥有自己的私有云存储&#xff0c;安全可靠又高效&#xff1f;MinIO是你的理想选择&#xff01;这篇文章将手把手教你如何在Ubuntu 22.04服务器上部署MinIO&#xff0c;并使用Nginx反向代理和Let’s Encrypt证书进行安全加固。 即使你是新手&#xff0c;也能轻松完成&#xf…
阅读更多...
Maven 下载配置 详解 我的学习笔记

Maven 下载配置 详解 我的学习笔记

Maven 下载配置 详解 我的学习笔记 一、Maven 简介二、maven安装配置三、maven基本使用四、idea配置mavenidea配置maven环境maven坐标idea创建maven项目配置Maven-Helper插件 五、依赖管理 一、Maven 简介 Apache Maven 是一个项目管理和构建工具&#xff0c;它基于项目对象模型…
阅读更多...
一文带你了解，全国职业院校技能大赛老年护理与保健赛项如何备赛

一文带你了解，全国职业院校技能大赛老年护理与保健赛项如何备赛

老年护理与保健&#xff0c;作为2023年全国职业院校技能大赛的新增赛项&#xff0c;紧密贴合党的二十大精神&#xff0c;致力于加速健康与养老产业的蓬勃发展&#xff0c;并深化医养康养结合的服务模式。此赛项不仅承载着立德树人的教育使命&#xff0c;更通过竞赛的引领作用&a…
阅读更多...
STM32ZET6-USART使用

STM32ZET6-USART使用

一、原理说明 STM32自带通讯接口 通讯目的 通信方式&#xff1a; 全双工&#xff1a;通信时可以双方同时通信。 半双工&#xff1a;通信时同一时间只能一个设备发送数据&#xff0c;其他设备接收。 单工&#xff1a;只能一个设备发送到另一个设备&#xff0c;例如USART只有…
阅读更多...
电话语音机器人，是由哪些功能构成？

电话语音机器人，是由哪些功能构成？

电话语音机器人是自动电话销售、筛选意向客户的&#xff0c;只要录入好行业话术&#xff0c;导入要拨打的手机号&#xff0c;机器人就可以上岗工作了。 电话语音机器人组成部分&#xff1a; 1、语音识别器&#xff0c;主要作用&#xff1a;识别客户讲话内容&#xff0c;从而做…
阅读更多...
理解 WordPress | 第二篇：结构化分析

理解 WordPress | 第二篇：结构化分析

WordPress 专题致力于从 0 到 1 搞懂、用熟这种可视化建站工具。 第一阶段主要是理解。 第二阶段开始实践个人博客、企业官网、独立站的建设。 如果感兴趣&#xff0c;点个关注吧&#xff0c;防止迷路。 WordPress 的内容和功能结构可以按照层级来划分&#xff0c;这种层次化的…
阅读更多...
vue3项目history模式部署404处理，使用 historyApiFallback 中间件支持单页面应用路由

vue3项目history模式部署404处理，使用 historyApiFallback 中间件支持单页面应用路由

vue3项目history模式部署404处理&#xff0c;使用 historyApiFallback 中间件支持单页面应用路由 在现代的 web 开发中&#xff0c;单页面应用&#xff08;SPA&#xff09;变得越来越流行。这类应用通常依赖于客户端路由来提供流畅的用户体验&#xff0c;但在服务器端&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023