当前博客:[WebUI系列]12.layuimini框架本地化

159 次浏览

博客作者:【汨酴】

个性签名:增强知识,努力学习

1.通过前面的章节,相信大家都对layuimini框架有了一定的了解,今天我们就开始联合火山PC开始制作漂亮的程序.

2.开始常规操作:新建火山项目,附加框架,引入cef模块

    为照顾新手,请注意以下细节问题

3.程序跑起来

咦,vscode上面跑得好好,怎么到火山就水土不服了?

4.两种解决方案:a.如提示信息,将项目部署至服务器,包含本地服务器;b.框架本地化.第一种方案其实就是简单的套壳了,不是这个系列的初衷,所以只讲方案b的实现.

5.解决方案:

因为js并不能直接读取本地数据,所以我们可以火山配合读取并返回给网页不就解决这个问题了.故进入\js\lay-module\layuimini\miniAdmin.js

注释这段

if (!/http(s*):\/\//.test(location.href)) {
        var tips = "请先将项目部署至web容器(Apache/Tomcat/Nginx/IIS/等),否则部分数据将无法显示";
        return layer.alert(tips);
    }

发现这个请求,改!

  a.火山端绑定函数,函数名随意

  b.Web端修改为:

 var ret = action("getMenu");
            if (ret == "") {
                miniAdmin.error('暂无菜单信息')
            } else {
                data = JSON.parse(ret);
                miniAdmin.renderLogo(data.logoInfo);
                miniAdmin.renderClear(options.clearUrl);
                miniAdmin.renderHome(data.homeInfo);
                miniAdmin.renderAnim(options.pageAnim);
                miniAdmin.listen();
                miniMenu.render({
                    menuList: data.menuInfo,
                    multiModule: options.multiModule,
                    menuChildOpen: options.menuChildOpen
                });
                miniTab.render({
                    filter: 'layuiminiTab',
                    urlHashLocation: options.urlHashLocation,
                    multiModule: options.multiModule,
                    menuChildOpen: options.menuChildOpen,
                    maxTabNum: options.maxTabNum,
                    menuList: data.menuInfo,
                    homeInfo: data.homeInfo,
                    listenSwichCallback: function () {
                        miniAdmin.renderDevice();
                    }
                });
                miniTheme.render({
                    bgColorDefault: options.bgColorDefault,
                    listen: true,
                });
                miniAdmin.deleteLoader(options.loadingTime);
            }

说明一点:函数你可以直接"getMenu()",我喜欢就一个函数然后传参区分,看个人使用习惯.

6.火山数据返回

7.再次运行,顺利进入

8.是不是很简单,下一节我们开始制作"图标列表"

 

Generic placeholder image
手可摘星辰 Time: 2021-10-15 13:06:34

虽然看不大懂;还是要赞一下


[WebUI系列]12.layuimini框架本地化