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

  星期五接到一个资产核查的任务,时间紧,我对网页这一块的内容还不是很熟练,有些着急,在网上一搜,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 = '<div class="layuimini-color">\n' +
                    '<div class="color-title">\n' +
                    '<span>配色方案</span>\n' +
                    '</div>\n' +
                    '<div class="color-content">\n' +
                    '<ul>\n' + bgColorHtml + '</ul>\n' +
                    '</div>\n' +
                    // '<div class="more-menu-list">\n' +
                    // '<a class="more-menu-item" href="http://layuimini.99php.cn/docs/index.html" target="_blank"><i class="layui-icon layui-icon-read" style="font-size: 19px;"></i> 开发文档</a>\n' +
                    // '<a class="more-menu-item" href="https://github.com/zhongshaofa/layuimini" target="_blank"><i class="layui-icon layui-icon-tabs" style="font-size: 16px;"></i> 开源地址</a>\n' +
                    // '<a class="more-menu-item" href="http://layuimini.99php.cn" target="_blank"><i class="layui-icon layui-icon-theme"></i> 官方网站</a>\n' +
                    // '</div>' +
                    '</div>';

  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的值就可以快速实现各种菜单,更复杂的可以后期处理了。

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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐