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 {
    @Resource
    private SysMenuRepository sysMenuRepository;
    @Override
    public 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 走了 以后在修改

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

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

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

相关推荐
pianmian117 分钟前
Spring 项目骨架
java·后端·spring
麦兜*21 分钟前
Docker 部署 MongoDB:单节点与副本集的最佳实践
java·spring boot·mongodb·spring cloud·docker·容器·maven
一直在学习的小白~24 分钟前
node_modules 明明写进 .gitignore,却还是被 push/commit 的情况
前端·javascript·vue.js
小小怪KO24 分钟前
分布式锁解决集群下一人一单超卖问题
java·分布式·tomcat·后端开发·实习·黑马点评
智码看视界39 分钟前
老梁聊全栈系列:(阶段一)从单体到云原生的演进脉络
java·云原生·c5全栈
nightunderblackcat1 小时前
新手向:从零理解LTP中文文本处理
前端·javascript·easyui
望获linux1 小时前
【实时Linux实战系列】规避缺页中断:mlock/hugetlb 与页面预热
java·linux·服务器·数据库·chrome·算法
User:你的影子1 小时前
WPF ItemsControl 绑定
开发语言·前端·javascript
失散131 小时前
分布式专题——9 Redis7底层数据结构解析
java·数据结构·redis·分布式·缓存·架构
馨谙1 小时前
设计模式之单例模式大全---java实现
java·单例模式·设计模式