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

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

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

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

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

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

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