前端开发模板Pear Admin Layui

目录

  • 基本资料
  • 学习笔记
    • 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.mzph.cn/web/58392.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

新世联科技:NG2-A-7在DAC空气捕集提取CO2的应用

一、DAC空气捕集提取CO2的介绍 直接空气碳捕获&#xff08;Direct Air Capture&#xff0c;简称DAC&#xff09;是一种直接从大气中提取二氧化碳的技术。 二、DAC空气捕集提取CO2的前景 从大气中提取的这种二氧化碳可以作为循环经济的一部分以各种不同方式使用。未来&#xf…

uni-app 封装图表功能

文章目录 需求分析1. 秋云 uchars2. Echarts 需求 在 uni-app 中使用图表功能&#xff0c;两种推荐的图表工具 分析 在 Dcloud市场 搜索Echarts关键词&#xff0c;会出现几款图表工具&#xff0c;通过大家的下载量&#xff0c;可以看到秋云这个库是比较受欢迎的&#xff0c;其…

详细解读个性化定制大杀器IP-Adapter代码

Diffusion models代码解读&#xff1a;入门与实战 前言&#xff1a;IP-Adapter作为Diffusion Models最成功的技术之一&#xff0c;已经在诸多互联网应用中落地。介绍IP-Adapter原理和应用的博客有很多&#xff0c;但是逐行详细解读代码的博客很少。这篇博客从细节出发&#xff…

数据采集之scrapy框架2

本博文使用自动化爬虫框架完成微信开放社区文档信息的爬取&#xff08;重点理解 scrapy 框架自动化爬 虫构建过程&#xff0c;能够分析 LinkExtractor 和 Rule 规则的基本用法&#xff09; 包结构目录如下图所示&#xff1a; 主要代码&#xff1a; &#xff08; items.p…

深⼊理解指针(2)

目录 1. const修饰指针及变量 2. 野指针 3. assert断⾔ 4. 指针的传址调⽤ 一 const修饰指针及变量&#xff08;const是场属性——不能改变的属性&#xff09; 1 const修饰变量 那怎么证明被const修饰的变量本质还是变量呢&#xff1f; 上面我们绕过n&#xff0c;使…

每日科技资讯:2024年11月06日【龙】农历十月初六 ---文末送书

目录 1.OpenAI因算力瓶颈暂缓GPT-5发布 合作芯片开发寻求突破2.现在&#xff0c;&#x1d54f; 允许被你屏蔽的人继续查看你的帖子3.硬刚Intel与AMD&#xff01;NVIDIA明年推出PC芯片4.苹果停止签署 iOS 18.0.1&#xff0c;不再允许从 18.1 降级5.Nvidia 加入道琼斯指数成份股 …

swoole扩展安装--入门篇

对于php来说&#xff0c;swoole是个强大的补充扩展。这是我第3次写swoole扩展安装&#xff0c;这次基于opencloudos8系统&#xff0c;php使用8.2。 安装swoole扩展首先想到的是用宝塔来安装&#xff0c;毕竟安装方便&#xff0c;还能统一管理。虽然获得swoole版本不是最新的&am…

【大模型开发指南】llamaindex配置deepseek、jina embedding及chromadb实现本地RAG及知识库(win系统、CPU适配)

说一些坑&#xff0c;本来之前准备用milvus&#xff0c;但是发现win搞不了&#xff08;docker都配好了&#xff09;。然后转头搞chromadb。这里面还有就是embedding一般都是本地部署&#xff0c;但我电脑是cpu的没法玩&#xff0c;我就选了jina的embedding性能较优&#xff08;…

pyspark基础准备

1.前言介绍 学习目标&#xff1a;了解什么是Speak、PySpark&#xff0c;了解为什么学习PySpark&#xff0c;了解课程是如何和大数据开发方向进行衔接 使用pyspark库所写出来的代码&#xff0c;既可以在电脑上简单运行&#xff0c;进行数据分析处理&#xff0c;又可以把代码无缝…

数据库基础(4) . 数据库结构

2.基础结构 2.1.结构及名称 数据库 database 表空间 tablespaces(Oracle) 表格 table 字段 column 记录 record 值 value 2.2.数据库 database 在配置文件中指定存放位置 # 设置mysql数据库的数据的存放目录 datadirD:\MySQL\mysql-8.0.16-winx64\data每个数据库对应…

Meme 币生态全景图分析:如何获得超额收益?

近期&#xff0c;BTC 再次突破 7 万美元大关&#xff0c;市场上贪婪指数再次达到 80&#xff0c;而 Meme 币往往是每次牛市冲锋的号角&#xff0c;比如 $GOAT 5 天内价格一度上涨超 1 万倍。通过对当前市场 TOP 25 Meme 币的交易数据分析&#xff0c;我们发现了几个值得关注的市…

数据结构之二叉树——堆 详解(含代码实现)

1.堆 如果有一个关键码的集合 K { &#xff0c; &#xff0c; &#xff0c; … &#xff0c;}&#xff0c;把它的所有元素按完全二叉树的顺序存储方式存储 在一个一维数组中&#xff0c;则称为小堆( 或大堆 ) 。将根节点最大的堆叫做最大堆或大根堆&#xff0c;根节点最小的…

高级 <HarmonyOS主题课>构建华为支付服务的课后习题

五色令人目盲&#xff1b; 五音令人耳聋&#xff1b; 五味令人口爽&#xff1b; 驰骋畋猎&#xff0c;令人心发狂&#xff1b; 难得之货&#xff0c;令人行妨&#xff1b; 是以圣人为腹不为目&#xff0c;故去彼取此。 本篇内容主要来自&#xff1a;<HarmonyOS主题课>构建…

酒店民宿小程序,探索行业数字化管理发展

在数字化发展时代&#xff0c;各行各业都开始向数字化转型发展&#xff0c;酒店民宿作为热门行业也逐渐趋向数字、智能化发展。 对于酒店民宿来说&#xff0c;如何将酒店特色服务优势等更加快速运营推广是重中之重。酒店民宿小程序作为一款集结预约、房源管理、客户订单管理等…

猎板PCB2到10层数的科技进阶与应用解析

1. 单层板&#xff08;Single-sided PCB&#xff09; 定义&#xff1a;单层板是最基本的PCB类型&#xff0c;导线只出现在其中一面&#xff0c;因此被称为单面板。限制&#xff1a;由于只有一面可以布线&#xff0c;设计线路上有许多限制&#xff0c;不适合复杂电路。应用&…

Python网络爬虫入门篇!

预备知识 学习者需要预先掌握Python的数字类型、字符串类型、分支、循环、函数、列表类型、字典类型、文件和第三方库使用等概念和编程方法。 2. Python爬虫基本流程 a. 发送请求 使用http库向目标站点发起请求&#xff0c;即发送一个Request&#xff0c;Request包含&#xf…

gerrit 搭建遇到的问题

1、启动Apache&#xff0c;端口被占用 : AH00072: make sock: could not bind to address (0S 10048)通常每个套接字地址(协议/网络地址/端口)只允许使用一次。: AH00072: make sock: could not bind to address 0.0.0.:443 a AH00451: no listening sockets available, shutti…

提升安全上网体验:Windows 11 启用 DOH(阿里公共DNS)

文章目录 阿里公共 DNS 介绍免费开通云解析 DNS 服务Windows 编辑 DNS 设置配置 IPv4配置 IPv6 路由器配置 DNS 阿里公共 DNS 介绍 https://alidns.com/ 免费开通云解析 DNS 服务 https://dnsnext.console.aliyun.com/pubDNS 开通服务后&#xff0c;获取 DOH 模板&#xff0…

项目实战使用gitee

1.创建本地仓库 2.进行提交到本地仓库 创建仓库后在idea中会显示图标&#xff0c;点击绿色的√进行快速提交 3.绑定远程仓库 4.番外篇-创建gitee仓库 注意不要勾选其他

【大模型LLM面试合集】大语言模型架构_chatglm系列模型

chatglm系列模型 1.ChatGLM 1.1 背景 主流的预训练框架主要有三种&#xff1a; autoregressive自回归模型&#xff08;AR模型&#xff09;&#xff1a;代表作GPT。本质上是一个left-to-right的语言模型。通常用于生成式任务&#xff0c;在长文本生成方面取得了巨大的成功&a…