LayuiMini使用时候初始化模板修改(下载源码)

 忘记加了 下载 地址 : layui-mini: layuimini,后台admin前端模板,基于 layui 编写的最简洁、易用的后台框架模板。只需提供一个接口就直接初始化整个框架,无需复杂操作。

LayuiMini使用时候初始化模板官网给的是:

    layui.use(['jquery', 'layer', 'miniAdmin'], function () {var $ = layui.jquery,layer = layui.layer,miniAdmin = layui.miniAdmin;var options = {iniUrl: "api/init.json",    // 初始化接口clearUrl: "api/clear.json", // 缓存清理接口urlHashLocation: true,      // 是否打开hash定位bgColorDefault: 0,          // 主题默认配置multiModule: true,          // 是否开启多模块menuChildOpen: false,       // 是否默认展开菜单};miniAdmin.render(options);});

可以看到 iniurl中 使用的是访问地址 如果直接传json就会报错 这是layuimini中写 不愿意修改源码 

那就只能从 init.json 文件路径中获取 或者  在数据库中 获取  自己写也行 官网得 拉过来 改改直接用也可以 

@Service
public class SysMenuServiceImpl implements SysMenuService {@Resourceprivate SysMenuRepository sysMenuRepository;@Overridepublic Map<String, Object> menu() {Map<String, Object> map = new HashMap<>(16);Map<String,Object> home = new HashMap<>(16);Map<String,Object> logo = new HashMap<>(16);List<SysMenu> menuList = sysMenuRepository.findAllByStatusOrderBySort(true);List<MenuVo> menuInfo = new ArrayList<>();for (SysMenu e : menuList) {MenuVo menuVO = new MenuVo();menuVO.setId(e.getKey().getId());menuVO.setPid(e.getPid());menuVO.setHref(e.getKey().getHref());menuVO.setTitle(e.getKey().getTitle());menuVO.setIcon(e.getIcon());menuVO.setTarget(e.getTarget());menuInfo.add(menuVO);}map.put("menuInfo", TreeUtil.toTree(menuInfo, 0L));home.put("title","首页");home.put("href","/page/welcome-1");//控制器路由,自行定义logo.put("title","后台管理系统");logo.put("image","/static/images/back.jpg");//静态资源文件路径,可使用默认的logo.png map.put("homeInfo", "{title: '首页',href: '/ruge-web-admin/page/welcome.html'}}");map.put("logoInfo", "{title: 'RUGE ADMIN',image: 'images/logo.png'}");return map;}
}

官网拉过来的 可以自己点击看

接口直接返回对应的json数据格式就ok了

但是如果不i想写后端 或者后端返回json数据格式嵌套得 可以换个想法:

嵌套的数据 处理后获取得json  或者 直接 把json数据放到js中得 

进行处理 办法 :

window.only  =  {//  模板json数据
}var blob  =  new Blob([JSON.stringify(window.only)], {type: 'application/json'})
var only = URL.createObjectURL(blob);var options = {iniUrl: only,    // 初始化接口clearUrl: "api/clear.json", // 缓存清理接口urlHashLocation: true,      // 是否打开hash定位bgColorDefault: 0,          // 主题默认配置multiModule: true,          // 是否开启多模块menuChildOpen: false,       // 是否默认展开菜单};

我是使用得其他js中存json 数据得 获取 把json 变成全局得 从需要调用得地方获取到需要得数据  window.only  当然如果使用 ES6 那就更加简单 用着也舒服 

我是使用的原始得 方法  (不是很推荐) 

遇到问题就是 访问的时候路径不好找 访问路径配置时候在 tomcat中 加入 名称 ‘http://localhost:8888/test’  不是 直接访问  http://localhost:8888/  这个地址 所以 遇到调用时候 怎么写路径都不会给加上 自己添加的 后缀 /test 所以需要自己手动添加上去 这个 路径问题 弄了 半天才找到问题所在 !!!

document.write('<script src="" type="text/javascript" charset="utf-8"></script>');

另外 如果使用 在其他js中存储json数据要注意  js 加载得顺序 不然获取不到数据 

document.addEventListener('DOMContentLoaded', (event) => {  // 在这里执行你的代码  // 此时 DOM 已经完全加载和解析,可以安全地访问和操作 DOM 元素  
});

 这个办法可以避免js得加载顺序 混乱  加载顺序可以在 开发者工具 (F12)中 网络里面看到 加载顺序

 

当然 后端直接获取是最简单的 这是 偷懒得办法  权限啥的都是 直接 js 走了  以后在修改 

如果权限会出现 那个不显示 那个显示得  最好是 是从后端判断 如果前端判断得话 稍微麻烦点 

但也不是不行 这个 可以 讨论交流交流得啊 

如果有什么问题 希望大佬们给提出来建议 !!!

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

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

相关文章

SpringBoot整合RabbitMQ direct交换机、fanout交换机、topic交换机

PS 常见错误 1、有匹配到交换机&#xff0c;但是没有匹配到绑定的队列。&#xff08;交换机没有绑定队列&#xff09;- not route 2、没有匹配到交换机。&#xff08;交换机名称错误&#xff0c;not found - exchange&#xff09; 3、交换机和队列都没有匹配&#xff08;和第二…

Vue 组件单元测试深度探索:组件交互与状态变更 专业解析和实践

在Vue组件单元测试中&#xff0c;验证组件之间的交互&#xff08;如父组件与子组件、兄弟组件之间的通信&#xff09;以及状态变更的正确性对于保证整个应用的协调运作至关重要。本文详细介绍了父组件向子组件传递props、子组件向父组件发送事件、兄弟组件通过共享状态&#xf…

自然语言处理 (NLP) 的技术演变史

一、简述 本文的目标是了解自然语言处理 (NLP) 的历史&#xff0c;包括 Transformer 体系结构如何彻底改变该领域并帮助我们创建大型语言模型 (LLM)。 基础模型&#xff08;如 GPT-4&#xff09;是最先进的自然语言处理模型&#xff0c;旨在理解、生成人类语言并与之交互。 要理…

鸿蒙小案例-搜索高亮

搜索高亮目前官方也没有可以现成的组件&#xff0c;但是需求来了&#xff0c;怎么办&#xff0c;只能摸索着自己写一个 目前官方API中最接近的应该是 richText组件了&#xff0c;富文本组件&#xff0c;当然可以实现&#xff0c;但是有不少问题 1.大小调整太麻烦&#xff0c;跟…

MySQL中截取字符串有哪些方法

文章目录 一、SUBSTRING() 或 SUBSTR() 函数二、LEFT() 函数三、RIGHT() 函数四、使用字符串连接和定位函数截取五、 正则表达式截取六、SUBSTRING_INDEX() 函数&#xff1a; 在MySQL中&#xff0c;你可以使用多种方法来截取字符串。以下是一些常用的方法&#xff1a; 一、SUB…

焊接机器人-常见焊接工艺参数

常见焊接工艺参数 常见焊缝平焊立焊 常见焊接工艺调试方法注意事项 常见焊缝 常见的焊缝一般见于不需要坡口焊的规则钢构件&#xff1a;如H型钢、H型牛角杠、T型梁、弧形梁等。 平焊 参数Value电流(安培)200A电压(伏特 )20V摆弧-振幅(毫米)4-6mm摆弧- 频率(Hz)1Hz摆弧- 两侧…

国产3D自研技术如何突围?眸瑞科技给3D建设、管理带来全新模式

眸瑞科技是全球领先的数字孪生引擎技术及服务提供商&#xff0c;它专注于让一切3D模型在全网多端轻量化处理与展示&#xff0c;为行业数字化转型升级与数字孪生应用提供成套的国产自研3D可视化技术、产品与服务。 引言 眸瑞科技是全球领先的数字孪生引擎技术及服务提供商&…

【MyBatisPlus】一、公共字段填充配置

目录 一、实体类配置 二、配置MyBatis Plus元对象处理器 三、接口字段自动填充 在使用mybatisplus项目中设置公共字段填充&#xff0c;可以按如下进行配置 一、实体类配置 TableField(value "create_time",fill FieldFill.INSERT)private LocalDateTime createTime…

【C++】哈希思想

目录 哈希介绍&#xff1a; 一&#xff0c;位图 1-1&#xff0c;位图的认识 1-2&#xff0c;位图的简单实现 1-3&#xff0c;位图的应用 二&#xff0c;布隆过滤器 2-1&#xff0c;布隆过滤器的认识 2-2&#xff0c;布隆过滤器的简单实现 2-3&#xff0c;布隆过滤器的…

Kafka 3.x.x 入门到精通(06)——Kafka进阶

Kafka 3.x.x 入门到精通&#xff08;06&#xff09;&#x1f449;&#x1f449;&#x1f449;&#x1f449; Kafka进阶 3. Kafka进阶3.1 Controller选举3.2 Broker上线下线3.3 数据偏移量定位3.4 Topic删除3.5 日志清理和压缩3.7 页缓存3.8 零拷贝3.9 顺写日志3.10 Linux集群部…

Debian12使用宝塔国际aaPanel无法安装Docker

宝塔国际aaPanel自带安装Docker&#xff0c;安装了几次都失败&#xff0c;最后仔细看了安装日志&#xff0c;才发现其中的问题。 复制 --2023-11-28 13:42:13-- https://node.aapanel.com/install/0/docker_install_en.sh Resolving node.aapanel.com (node.aapanel.com)...…

Dockerfile镜像构建实战

一、构建Apache镜像 cd /opt/ #建立工作目录 mkdir /opt/apache cd apache/vim Dockerfile #基于的基础镜像 FROM centos:7 #维护镜像的用户信息 MAINTAINER this is apache image <cyj> #镜像操作指令安装Apache软件 RUN yum install -y httpd #开启80端口 EXPOSE 80 #…

Java23种设计模式-行为型模式之解释器模式

解释器模式&#xff08;Interpreter Pattern&#xff09;&#xff1a;定义了一种文法&#xff0c;并且对于任何该文法的句子&#xff0c;都能够解释和执行。可以将复杂的问题分解成一系列简单的表达式&#xff0c;然后使用解释器来解释这些表达式。 涉及角色&#xff1a; 抽象…

从零开始利用MATLAB进行FPGA设计(五)详解双口RAM

创作于谱仪算法设计过程中的数字能谱生成模块设计。 往期回顾&#xff1a; 从零开始利用MATLAB进行FPGA设计&#xff08;四&#xff09;生成优化HDL代码 从零开始利用MATLAB进行FPGA设计&#xff08;三&#xff09;将Simulink模型转化为定点数据类型 目录 1.关于双口RAM …

php反序列化字符串逃逸

字符串逃逸 字符串逃逸是通过改变序列化字符串的长度造成的php反序列化漏洞 一般是因为替换函数使得字符串长度发生变化&#xff0c;不论变长还是变短&#xff0c;原理都大致相同 在学习之前&#xff0c;要先了解序列化字符串的结构&#xff0c;在了解结构的基础上才能更好理解…

JavaScript算法|前 K 个高频元素、寻找峰值和合并区间、 搜索二维矩阵 II和计算右侧小于当前元素的个数

文章目录 前 K 个高频元素方法一方法二代码 寻找峰值方法一 取最大值方法二 暴力法方法三 二分法 合并区间方法一 合并重叠方法二 合并重叠 搜索二维矩阵 II方法一 暴力法方法二 相邻比较法 计算右侧小于当前元素的个数方法一 暴力法方法二 排序法 前 K 个高频元素 给定一个非…

前端工程化详解

目录 开发前1.使用脚手架工具2.使用编译工具 开发中1.代码规范2.公共方法抽离3.公共组件抽离4.公共样式抽离5.icon 图片 国际化文案 常量等静态数据规划管理6.业务模块区分7.项目版本管理工具8.开发IDE以及代码检查工具 开发结束1.单元测试2.项目打包3.项目发布 开发前 1.使用…

低代码信创开发核心技术(四)动态元数据系统设计

一、概述 在当今快速发展的信息技术领域&#xff0c;动态元数据系统扮演着至关重要的角色。它不仅能够提供数据的描述信息&#xff0c;还能动态地适应业务需求的变化&#xff0c;从而提高系统的灵活性和可扩展性。构建一个动态元数据系统意味着我们可以在不重启系统的情况下&a…

【机器学习】机器学习学习笔记 - 监督学习 - KNN线性回归岭回归 - 02

监督学习 KNN (k-nearest neighbors) KNN 是用 k 个最近邻的训练数据集来寻找未知对象分类的一种算法 from sklearn import neighbors# 分类 # 创建KNN分类器模型并进行训练 classifier neighbors.KNeighborsClassifier(num_neighbors, weightsdistance) classifier.fit(X,…

前端面试题合集

1.对前端监控的理解&#xff1f; 异常监控&#xff08;监控前端页面的报错&#xff09;> try / catch 、window.onerror、window.addEventListener、Vue.config.errorHandle JS 代码运行错误、语法错误等&#xff1b;AJAX 请求错误&#xff1b;静态资源加载错误&#xff1…