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 走了 以后在修改

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

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

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

相关推荐
JerryXZR8 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香10 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
Jacob程序员11 分钟前
java导出word文件(手绘)
java·开发语言·word
ZHOUPUYU12 分钟前
IntelliJ IDEA超详细下载安装教程(附安装包)
java·ide·intellij-idea
stewie615 分钟前
在IDEA中使用Git
java·git
problc23 分钟前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_91527 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
Elaine20239130 分钟前
06 网络编程基础
java·网络
G丶AEOM32 分钟前
分布式——BASE理论
java·分布式·八股
落落鱼201333 分钟前
tp接口 入口文件 500 错误原因
java·开发语言