layuimini 后台模板介绍【未调整格式】

#layuimini后台模板
## 项目介绍
最简洁、清爽、易用的 layui 后台框架模板。 [官网地址](http://layuimini.99php.cn)
1. 代码仓库 (iframe 版 v2)
- 在线预览地址：http://layuimini.99php.cn/iframe/v2/
- GitHub 仓库地址：https://github.com/zhongshaofa/layuimini/
- Gitee 仓库地址：https://gitee.com/zhongshaofa/layuimini/

2. 代码仓库 (单页版 v2)
- 在线预览地址：http://layuimini.99php.cn/onepage/v2/
- GitHub 仓库地址：https://github.com/zhongshaofa/layuimini/.
- Gitee 仓库地址：https://gitee.com/zhongshaofa/layuimini/

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

## 基础参数一览表
以下参数是 miniAdmin.render(); 初始化时进行传入。

| 参数 | 说明 | 类型 | 默认值 | 备注 |
| --- | --- | --- | --- | --- |
| iniUrl | 初始化接口 | string | null | 实际使用，请对接后端接口动态生成，格式请参考文件：api/init.json|
| clearUrl | 缓存清理接口	string | null | 实际使用，请对接后端接口动态生成，格式请参考文件：api/init.json|
urlHashLocation | 是否打开 hash 定位 | bool | false | 开启后，会显示路由信息，刷新页面后将定位到当前页
bgColorDefault | 主题默认配置 | int | 0 | 如需添加更多主题信息，请在 js/lay-module/layuimini/miniTheme.js 文件内添加
multiModule | 是否开启多模块 | bool | false | 个人建议开启
menuChildOpen | 是否默认展开菜单 | bool	false | 个人建议关闭
loadingTime | 初始化加载时间 | 0 | 0 | 建议 0-2 之间
pageAnim | iframe 窗口动画 | bool | false | 添加 tab 或者切换时的过渡动漫
maxTabNum | 最大的 tab 打开数量 | int | 20 | 防止打开太多的 tab 窗口导致页面卡死

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

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

layuimini.init('api/init.json');
    });
```

### 初始化 api 接口返回的参数说明
* homeInfo 是首页信息
* logoInfo 是 logo 信息
* menuInfo 是头部模块和左侧菜单对应的信息
```js
{
	"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，表示清除缓存成功；)
```js
   {
     "code": 1,
     "msg": "清除服务端缓存成功"
   }
```

## 在页面中弹出新的 Tab 窗口
如需在页面中弹出新的 Tab 窗口，请参考下方代码。（备注：需要引入 miniTab.js 文件）

参数说明（layuimini-content-href=：页面链接，data-title：标题）
调用方法进行监听：miniTab.listen();

示例在 page/welcome-1.html 页面中有
```
<a href="javascript:;" layuimini-content-href="page/user-setting.html" data-title="基本资料" >基本资料</a>
layui.use(['form','miniTab'], function () {
    var form = layui.form,
        layer = layui.layer,
        miniTab = layui.miniTab;

miniTab.listen();

});
```

## 在 iframe 页面中关闭当前 Tab 窗口

如需在 iframe 页面中，请参考下方代码。（备注：miniTab.js 文件）

调用方法：miniTab.deleteCurrentByIframe();

示例在 user-password.html,user-setting.html 页面中都有
```js
layui.use(['form','miniTab'], function () {
    var form = layui.form,
        layer = layui.layer,
        miniTab = layui.miniTab;

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

});
```

## 后台主题方案配色
系统已内置 12 套主题配色，如果需要自定义皮肤配色，请在 miniTheme.bgColorConfig 方法内按相同格式添加。
```js
 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 格式文件
## 备注信息
菜单栏建议最多四级菜单，四级以后菜单显示并没有那么友好。