【永久开源】layuimini,一款基于 layui 华丽免费的 admin 管理后台模板。

layuimini后台模板

项目介绍

最简洁、清爽、易用的layui后台框架模板。

项目会不定时进行更新,建议star和watch一份。

技术交流QQ群:561838086 加群请备注来源:如gitee、github、官网等

代码仓库(iframe 多tab版)

代码仓库(onepage 单页版)

主要特性

  • 界面足够简洁清爽,响应式且适配手机端。
  • 一个接口几行代码而已直接初始化整个框架,无需复杂操作。
  • 页面支持多配色方案,可自行选择喜欢的配色。
  • 支持多tab,可以打开多窗口。
  • 支持无限级菜单和对font-awesome图标库的完美支持。
  • 失效以及报错菜单无法直接打开,并给出弹出层提示完美的线上用户体验
  • url地址hash定位,可以清楚看到当前tab的地址信息。
  • 刷新页面会保留当前的窗口,并且会定位当前窗口对应左侧菜单栏。
  • 支持font-awesome图标选择插件

效果预览

总体预览

Image text

使用说明

一、默认配置说明

  • 默认配置在layuimini.config方法内,请自行修改
  • urlHashLocation:是否开启URL地址hash定位,默认开启。关闭后,刷新页面后将定位不到当前页,只显示主页
  • urlSuffixDefault:是否开启URL后缀,默认开启。
  • BgColorDefault:系统默认皮肤,从0开始。
       var config = {
             urlHashLocation: true,   // URL地址hash定位
             urlSuffixDefault: true, // URL后缀
             BgColorDefault: 0       // 默认皮肤(0开始)
          };

二、后台模板初始化

  • index.html文件内进行初始化

  • 引入lay-config.js文件,请根据实际情况修改里面扩展的路径。

  • layuimini.init(); 方法内的参数请填写动态api地址。(实际应用中建议后端api做缓存)

  • 初始化api地址返回的参数可以参考api目录下的init.json文件或者查看使用说明的第二点的参数说明

    
    layui.use(['element', 'layer', 'layuimini'], function () {
        var $ = layui.jquery,
            element = layui.element,
            layer = layui.layer;
    
        layuimini.init('api/init.json');
    });
    

    三、初始化api地址返回的参数说明

  • clearInfo是服务端清理缓存信息(clearInfo.clearUrl:服务端清理缓存接口地址,为空则不请求;)

    返回参数对应的事例(code:0,清除缓存失败;code:1,表示清除缓存成功;)
    
    {
    "code": 1,
    "msg": "清除服务端缓存成功"
    }
  • homeInfo 是首页信息

  • logoInfo 是logo信息

  • menuInfo 是头部模块和左侧菜单对应的信息

  • menuModule id必须唯一,例如 menuInfo.currency、menuInfo.other对应的currency和other就是模块id,他们的值必须唯一,否则模块切换会有冲突。

    {
    "homeInfo": {
    "title": "首页",
    "icon": "fa fa-home",
    "href": "page/welcome-2.html?mpi=m-p-i-0"
    },
    "logoInfo": {
    "title": "LayuiMini",
    "image": "images/logo.png",
    "href": ""
    },
    "clearInfo": {
    "clearUrl": "api/clear.json"
    },
    "menuInfo": {
      "currency": {
        "title": "常规管理",
        "icon": "fa fa-address-book",
        "child": [
            .......
        ],
      "other": {
        "title": "其它管理",
        "icon": "fa fa-slideshare",
        "child": [
            .......
        ]
    }
    }
    }

四、在页面中弹出新的Tab窗口

  • 如需在页面中弹出新的Tab窗口,请参考下方代码。(备注:需要引入layuimini.js文件)
  • 参数说明(data-iframe-tab:页面链接,data-title:标题,data-icon:图标)

    
    <a href="javascript:;" data-iframe-tab="page/user-setting.html" data-title="基本资料" data-icon="fa fa-gears">基本资料</a>
    
    <script>
        layui.config({
            base: "js/",
            version: true
        }).extend({
            layuimini: "layuimini"
        }).use(['layuimini'], function () {
        });
     </script>

    五、后台主题方案配色

    • 系统已内置12套主题配色,如果需要自定义皮肤配色,请在layuimini.bgColorConfig方法内按相同格式添加。
      var bgColorConfig = [
      {
          headerRight: '#1aa094',
          headerRightThis: '#197971',
          headerLogo: '#243346',
          menuLeft: '#2f4056',
          menuLeftThis: '#1aa094',
          menuLeftHover: '#3b3f4b',
      },
      {
          headerRight: '#23262e',
          headerRightThis: '#0c0c0c',
          headerLogo: '#0c0c0c',
          menuLeft: '#23262e',
          menuLeftThis: '#1aa094',
          menuLeftHover: '#3b3f4b',
      }
      ];

    常见问题

  • 修改js后刷新页面未生效,请尝试清除浏览器缓存。

    备注信息

  • 菜单栏建议最多四级菜单,四级以后菜单显示并没有那么友好。
本帖由系统于 4个月前 自动加精
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 21

会有VUE版本不 😁

4个月前 评论
Mr_Chung (楼主) 4个月前

666

4个月前 评论
Mr_Chung (楼主) 4个月前

花了不少心思吧,挺不错的

4个月前 评论
Mr_Chung (楼主) 4个月前
Violet_Ice紫冰

tag 和 menu 没有联动切换,食之无味啊。说真的不是很喜欢 iframe 版的后台框架。

4个月前 评论
Mr_Chung (楼主) 4个月前
_Daniel 4个月前
Violet_Ice紫冰 (作者) 4个月前
Mr_Chung (楼主) 4个月前
744107092

可以

4个月前 评论
Mr_Chung (楼主) 4个月前

你是专业是前端,还是后端?博主

3个月前 评论
Mr_Chung (楼主) 3个月前
lufeijun1234

挺不错的,赞一个

3个月前 评论
Mr_Chung (楼主) 3个月前

挺不错的,花了多长时间?

3个月前 评论
Mr_Chung (楼主) 3个月前

这个目录放在public 里面吗

3个月前 评论
Mr_Chung (楼主) 3个月前
wanghan

iframe和单页版,有什么区别吗?----来自一个前端小白

3个月前 评论
Violet_Ice紫冰 3个月前

有权限管理吗????就想要有个权限管理的功能

3个月前 评论
Mr_Chung (楼主) 2个月前
VeryCool

之前看见过这个!!1

2个月前 评论
Mr_Chung (楼主) 2个月前

一直想 基于Passport的API做个纯基于接口的后台,前端不精。。。。。

2个月前 评论
Mr_Chung (楼主) 2个月前
Larva (作者) 2个月前
Mr_Chung (楼主) 2个月前
haobing

layui 这个坑太深,怕爬不出来 :joy:

2个月前 评论
Mr_Chung (楼主) 2个月前
haobing (作者) 2个月前

用了layui之后,需要自己写的样式多吗?css完全搞不懂啊

2个月前 评论
Mr_Chung (楼主) 2个月前

makdown都没有

2个月前 评论
Mr_Chung (楼主) 2个月前

很喜欢,一直都想给自己也开发一个类似的后台管理系统

1个月前 评论

确实不错! 正需要。谢谢

10小时前 评论

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!