项目介绍

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

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

技术交流QQ群：716235988、1165301500🈵、667813249🈵、561838086🈵 加群请备注来源：如gitee、github、官网等。

主要特性

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

代码仓库(iframe 多tab版)

v2版

在线预览地址：http://layuimini.99php.cn/iframe/v2/index.html
GitHub仓库地址：https://github.com/zhongshaofa/layuimini/tree/v2
Gitee仓库地址：https://gitee.com/zhongshaofa/layuimini/tree/v2

v1版

在线预览地址：http://layuimini.99php.cn/iframe/v1/index.html
GitHub仓库地址：https://github.com/zhongshaofa/layuimini/tree/master
Gitee仓库地址：https://gitee.com/zhongshaofa/layuimini/tree/master

代码仓库(onepage 单页版)

v2版

在线预览地址：http://layuimini.99php.cn/onepage/v2/index.html
GitHub仓库地址：https://github.com/zhongshaofa/layuimini/tree/v2-onepage
Gitee仓库地址：https://gitee.com/zhongshaofa/layuimini/tree/v2-onepage

v1版

在线预览地址：http://layuimini.99php.cn/onepage/v1/index.html
GitHub仓库地址：https://github.com/zhongshaofa/layuimini/tree/onepage
Gitee仓库地址：https://gitee.com/zhongshaofa/layuimini/tree/onepage

下载方式

iframe v2版

GitHub下载命令：git clone https://github.com/zhongshaofa/layuimini -b v2
Gitee下载命令：git clone https://gitee.com/zhongshaofa/layuimini -b v2

iframe v1版

GitHub下载命令：git clone https://github.com/zhongshaofa/layuimini -b master
Gitee下载命令：git clone https://gitee.com/zhongshaofa/layuimini -b master

单页版 v2版

GitHub下载命令：git clone https://github.com/zhongshaofa/layuimini -b v2-onepage
Gitee下载命令：git clone https://gitee.com/zhongshaofa/layuimini -b v2-onepage

单页版 v1版

GitHub下载命令：git clone https://github.com/zhongshaofa/layuimini -b onepage
Gitee下载命令：git clone https://gitee.com/zhongshaofa/layuimini -b onepage

发行版地址

GitHub发版地址：https://github.com/zhongshaofa/layuimini/releases
Gitee发版地址：https://gitee.com/zhongshaofa/layuimini/releases

效果预览

总体预览

捐赠支持

开源项目不易，若此项目能得到你的青睐，可以捐赠支持作者持续开发与维护，感谢所有支持开源的朋友。

js模块的拆分，代码更加规范化。
配置项移出到外部的初始化配置里面。
单页封装进行重构，视觉和操作体验上更加良好。
新增菜单在初始化的时候可以展开子菜单。
新增初始化时一个配置项完成多模块和单模块之间的切换，接口的初始化数据还是一样的。
优化手机端初始化时的自适应，不会出现闪动的问题。
重构手机端左侧菜单，弹出菜单时不会挤压内容内面。
优化初始化时的接口返回的数据格式api/init.json，以适配单模块的切换。
新增初始化加载层，更好的视觉体验
新增初始化页面是否加版本号
优化返回主页按钮以及页面导航栏的实现
优化主题配色方案

基础参数一览表

以下参数是miniAdmin.render();初始化时进行传入。

参数	说明	类型	默认值	备注
iniUrl	初始化接口	string	null	实际使用，请对接后端接口动态生成，格式请参考文件：`api/init.json`
clearUrl	缓存清理接口	string	null	实际使用，请对接后端接口动态生成，格式请参考文件：`api/init.json`
renderPageVersion	初始化页面是否加版本号	bool	false	开启后，页面不会有缓存问题
bgColorDefault	主题默认配置	int	0	如需添加更多主题信息，请在`js/lay-module/layuimini/miniTheme.js`文件内添加
multiModule	是否开启多模块	bool	false	个人建议开启
menuChildOpen	是否默认展开菜单	bool	false	个人建议关闭
loadingTime	初始化加载时间	0	0	建议0-2之间

示例说明

        var options = {
            iniUrl: "api/init.json",    // 初始化接口
            clearUrl: "api/clear.json", // 缓存清理接口
            urlHashLocation: true,      // 是否打开hash定位
            bgColorDefault: 0,          // 主题默认配置
            multiModule: true,          // 是否开启多模块
            menuChildOpen: false,       // 是否默认展开菜单
            loadingTime: 0,             // 初始化加载时间
        };
        miniAdmin.render(options);

后台模板初始化

在index.html文件内进行初始化
引入lay-config.js文件，请根据实际情况修改里面扩展的路径。
引入miniAdmin模块，根据需要传入初始化参数，执行miniAdmin.render(options); 方法。
初始化api接口返回的参数可以参考api目录下的init.json文件或者查看使用说明的第二点的参数说明

示例说明

    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);

    });

初始化api接口返回的参数说明

homeInfo 是首页信息
logoInfo 是logo信息
menuInfo 是头部模块和左侧菜单对应的信息

示例说明

{
  "homeInfo": {
    "title": "首页",
    "href": "page/welcome-1.html?t=1"
  },
  "logoInfo": {
    "title": "LAYUI MINI",
    "image": "images/logo.png",
    "href": ""
  },
  "menuInfo": [
    {
      "title": "常规管理",
      "icon": "fa fa-address-book",
      "href": "",
      "target": "_self",
      "child":[...]
    },
    {
      "title": "组件管理",
      "icon": "fa fa-lemon-o",
      "href": "",
      "target": "_self",
      "child":[...]
    },
    {
      "title": "其它管理",
      "icon": "fa fa-slideshare",
      "href": "",
      "target": "_self",
      "child":[...]
    }
  ]
}

缓存清理接口返回的参数说明

返回参数对应的事例(code：0，清除缓存失败；code：1，表示清除缓存成功；)

   {
     "code": 1,
     "msg": "清除服务端缓存成功"
   }

在页面中打开新的页面

在页面中打开新的页面，请参考下方代码。（备注：需要引入miniPage.js文件）
参数说明（layuimini-content-href=：页面链接，data-title：标题）
调用方法进行监听：miniPage.listen();(备注：框架初始化时已经进行监听，一般情况下不需要再次操作)
示例在page/welcome-1.html页面中有


    <a href="javascript:;" layuimini-content-href="page/user-setting.html" data-title="基本资料" >基本资料</a>

在内容页面中返回主页

方法一：添加class样式layuimini-back-home<a lay-href="" href="javascript:;" class="layuimini-back-home">首页</a>
方法二：miniPage.hashHome();，示例在user-password.html,user-setting.html页面中都有

示例说明

    layui.use(['form','miniPage'], function () {
        var form = layui.form,
            layer = layui.layer,
            miniPage = layui.miniPage;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {
                layer.close(index);
                miniPage.hashHome();
            });
            return false;
        });

    });

后台主题方案配色

系统已内置12套主题配色，如果需要自定义皮肤配色，请在miniTheme.bgColorConfig方法内按相同格式添加。

示例说明

    var bgColorConfig = [
                {
                    headerRight: '#1aa094',
                    headerRightThis: '#197971',
                    headerLogo: '#243346',
                    menuLeft: '#2f4056',
                    menuLeftThis: '#1aa094',
                    menuLeftHover: '#3b3f4b',
                    tabActive: '#1aa094',
                },
                {
                    headerRight: '#23262e',
                    headerRightThis: '#0c0c0c',
                    headerLogo: '#0c0c0c',
                    menuLeft: '#23262e',
                    menuLeftThis: '#737373',
                    menuLeftHover: '#3b3f4b',
                    tabActive: '#23262e',
                }
    ];

常见问题

修改js后刷新页面未生效，请尝试清除浏览器缓存。
IIS环境下请配置支持解析.json格式文件

备注信息

菜单栏建议最多四级菜单，四级以后菜单显示并没有那么友好。

Golang动态生成初始化数据（Beego框架）

<code class="lang-sql">CREATE TABLE `system_menu` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `pid` int(11) unsigned NOT NULL DEFAULT '0' COMMENT '父ID',
  `title` varchar(100) NOT NULL DEFAULT '' COMMENT '名称',
  `icon` varchar(100) NOT NULL DEFAULT '' COMMENT '菜单图标',
  `href` varchar(100) NOT NULL DEFAULT '' COMMENT '链接',
  `target` varchar(20) NOT NULL DEFAULT '_self' COMMENT '链接打开方式',
  `sort` int(11) DEFAULT '0' COMMENT '菜单排序',
  `status` tinyint(1) unsigned NOT NULL DEFAULT '1' COMMENT '状态(0:禁用,1:启用)',
  `remark` varchar(255) DEFAULT NULL COMMENT '备注信息',
  `create_at` timestamp NULL DEFAULT NULL COMMENT '创建时间',
  `update_at` timestamp NULL DEFAULT NULL COMMENT '更新时间',
  `delete_at` timestamp NULL DEFAULT NULL COMMENT '删除时间',
  PRIMARY KEY (`id`),
  KEY `title` (`title`),
  KEY `href` (`href`)
) ENGINE=InnoDB AUTO_INCREMENT=250 DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT COMMENT='系统菜单表';
对应控制器 controllers/IndexController.go

package controllers

import (
    "BeegoAdmin/models"
    "github.com/astaxie/beego"
)

type IndexController struct {
    beego.Controller
}

// 初始化后台框架接口
func (c *IndexController) SystemInit() {
    systemInit := new(models.SystemMenu).GetSystemInit()
    c.Data["json"] = systemInit
    c.ServeJSON()
}
对应Model models/SystemMenu.go

package models

import (
    "github.com/astaxie/beego/orm"
    "time"
)

// 菜单
type SystemMenu struct {
    Id       int       `json:"id"`
    Pid      int       `json:"pid"`
    Title    string    `json:"title"`
    Icon     string    `json:"icon"`
    Href     string    `json:"href"`
    Sort     string    `json:"sort"`
    Target   string    `json:"target"`
    Remark   string    `json:"remark"`
    Status   int       `json:"status"`
    CreateAt time.Time `json:"create_at";orm:"auto_now;type(datetime)"`
}

func (m *SystemMenu) TableName() string {
    return TableName("system_menu")
}

// 初始化结构体
type SystemInit struct {
    HomeInfo struct {
        Title string `json:"title"`
        Href  string `json:"href"`
    } `json:"homeInfo"`
    LogoInfo struct {
        Title string `json:"title"`
        Image string `json:"image"`
    } `json:"logoInfo"`
    MenuInfo []*MenuTreeList `json:"menuInfo"`
}

// 菜单结构体
type MenuTreeList struct {
    Id     int             `json:"id"`
    Pid    int             `json:"pid"`
    Title  string          `json:"title"`
    Icon   string          `json:"icon"`
    Href   string          `json:"href"`
    Target string          `json:"target"`
    Remark string          `json:"remark"`
    Child  []*MenuTreeList `json:"child"`
}

// 获取初始化数据
func (m *SystemMenu) GetSystemInit() SystemInit {
    var systemInit SystemInit

    // 首页
    systemInit.HomeInfo.Title = "首页"
    systemInit.HomeInfo.Href = "page/welcome-1.html?t=1"

    // logo
    systemInit.LogoInfo.Title = "LAYUI MINI"
    systemInit.LogoInfo.Image = "images/logo.png"

    // 菜单
    systemInit.MenuInfo = m.GetMenuList()

    return systemInit
}

// 获取菜单列表
func (m *SystemMenu) GetMenuList() []*MenuTreeList {
    o := orm.NewOrm()
    var menuList []SystemMenu
    _, _ = o.QueryTable(m.TableName()).Filter("status",1).OrderBy("-sort").All(&menuList)
    return m.buildMenuChild(0, menuList)
}

//递归获取子菜单
func (m *SystemMenu) buildMenuChild(pid int, menuList []SystemMenu) []*MenuTreeList {
    var treeList []*MenuTreeList
    for _, v := range menuList {
        if pid == v.Pid {
            node := &MenuTreeList{
                Id:     v.Id,
                Title:  v.Title,
                Icon:   v.Icon,
                Href:   v.Href,
                Target: v.Target,
                Pid:    v.Pid,
            }
            child := v.buildMenuChild(v.Id, menuList)
            if len(child) != 0 {
                node.Child = child
            }
            // todo 后续此处加上用户的权限判断
            treeList = append(treeList, node)
        }
    }
    return treeList
}

layuimini后台模板

layuimini后台模板

项目介绍

主要特性

代码仓库(iframe 多tab版)

v2版

v1版

代码仓库(onepage 单页版)

v2版

v1版

下载方式

iframe v2版

iframe v1版

单页版 v2版

单页版 v1版

发行版地址

效果预览

捐赠支持

基础参数一览表

后台模板初始化

初始化api接口返回的参数说明

缓存清理接口返回的参数说明

在页面中打开新的页面

在内容页面中返回主页

后台主题方案配色

常见问题

备注信息