您当前的位置: 首页 >  ui

dawn

暂无认证

  • 5浏览

    0关注

    204博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

LayUI的后台管理模板

dawn 发布时间:2022-03-08 14:47:57 ,浏览量:5

  以前没有做网页开发不知道的内容太多了,现在开始做了这一块,发现内容真多。

  星期五接到一个资产核查的任务,时间紧,我对网页这一块的内容还不是很熟练,有些着急,在网上一搜,LayUI的模板,有很多好评和讲解,拿来一用,感觉很不错。

  这个后台系统可以很快上手,界面部分不用操心太多,很多页面有实例,略微改动就可以直接使用。

  写程序界面是个大问题,这下省事多了,虽然后期项目使用LayUI比较少,但做一些中小型的项目真的是很好的选择,最主要的就是快。

  1、修改标题和菜单。

  在api目录下的init.json文件中;

  2、修改主页面的欢迎页;

  可以随便选择welcome-1.html或者自己建,内容使用从数据库中提取的动态数据即可。

  3、去掉配色方案中的其他内容。

  找到miniTheme.js文件,查找配色方案,注释调相应内容即可(也可以自己添加内容)。

        /**
         * 监听
         * @param options
         */
        listen: function (options) {
            $('body').on('click', '[data-bgcolor]', function () {
                var loading = layer.load(0, {shade: false, time: 2 * 1000});
                var clientHeight = (document.documentElement.clientHeight) - 60;
                var bgColorHtml = miniTheme.buildBgColorHtml(options);
                var html = '
\n' + '
\n' + '配色方案\n' + '
\n' + '
\n' + '
    \n' + bgColorHtml + '
\n' + '
\n' + // '
\n' + // ' 开发文档\n' + // ' 开源地址\n' + // ' 官方网站\n' + // '
' + '
';

  4、快速菜单实现

        var options = {
            iniUrl: "api/init.json",    // 初始化接口
            clearUrl: "api/clear.json", // 缓存清理接口
            urlHashLocation: true,      // 是否打开hash定位
            bgColorDefault: false,      // 主题默认配置
            multiModule: true,          // 是否开启多模块
            menuChildOpen: false,       // 是否默认展开菜单
            loadingTime: 0,             // 初始化加载时间
            pageAnim: true,             // iframe窗口动画
            maxTabNum: 20,              // 最大的tab打开数量
        };

  只要改变options.iniUrl的值就可以快速实现各种菜单,更复杂的可以后期处理了。

  总的来说,这套后台管理系统还存在一些问题,比如缓存的处理,但作为对付一些小应用还是可以很快上手,值得拥有。

关注
打赏
1664252102
查看更多评论
立即登录/注册

微信扫码登录

0.2563s