# qadmin

**Repository Path**: yikcms/qadmin

## Basic Information

- **Project Name**: qadmin
- **Description**: No description available
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-12-06
- **Last Updated**: 2021-10-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# QAdmin轻量级后台模板

基于layui框架与Vue.js构建

轻量不复杂 简洁不简单

- [演示](http://demo.qadmin.net)
- [文档](http://docs.qadmin.net)
- [常见问题](http://docs.qadmin.net/1114310)

## 最新版本

####  **V1.2** `2019.06.28`

1. 【新增】调试模式,开启动左侧菜单前端不缓存
2. 【新增】提示框全局配置
3. 【新增】layui组件/模块等说明
4. 【优化】登录页快速进入后台演示
5. 【优化】左侧菜单支持新窗打开

- [更新日志](http://docs.qadmin.net/1104757)
- [升级指导](http://docs.qadmin.net/1141852)

## 快速开始


在head中引入所需资源

```html
<link rel="stylesheet" href="./static/common/layui/css/layui.css">
<link rel="stylesheet" href="./static/admin/css/style.css">
<script src="./static/common/layui/layui.js"></script>
<script src="./static/common/jquery-3.3.1.min.js"></script>
<script src="./static/common/vue.min.js"></script>
```

布局

```html
<div id="app">
    <!--顶栏-->
    <header>
        <h1 v-text="webname"></h1>
        <div class="breadcrumb">
            <i class="layui-icon">&#xe715;</i>
            <ul>
                <li v-for="vo in address">
                    <a  v-text="vo.name" :href="vo.url" ></a> <span>/</span>
                </li>
            </ul>
        </div>
    </header>

   <div class="main" id="app">
        <!--左栏-->
        <div class="left">
            <ul class="cl" >
                <!--顶级分类-->
                <li v-for="vo,index in menu" :class="{hidden:vo.hidden}">
                    <a href="javascript:;" :class="{active:vo.active}" @click="onActive(index)">
                        <i class="layui-icon" v-html="vo.icon"></i>
                        <span v-text="vo.name"></span>
                        <i class="layui-icon arrow" v-show="vo.url.length==0">&#xe61a;</i>
                        <i v-show="vo.active" class="layui-icon active">&#xe623;</i>
                    </a>
                    <!--子级分类-->
                    <div v-for="vo2,index2 in vo.list">
                        <a href="javascript:;" :class="{active:vo2.active}" @click="onActive(index,index2)" v-text="vo2.name"></a>
                        <i v-show="vo2.active" class="layui-icon active">&#xe623;</i>
                    </div>
                </li>
            </ul>
        </div>
        <!--右侧-->
        <div class="right">
            <!--你的页面内容写在这-->
            <!--在这里使用layui基本组件-->
            <!--请详情了解layui基础 https://www.layui.com/doc/ --> 
            <!--你的页面内容写在这-->
        </div>
   </div>
</div>
```


页脚引入配置与脚本 因为vue需要写在DOM之后


```haml
<script src="./static/admin/js/config.js"></script>
<script src="./static/admin/js/script.js"></script>
```

- [查看完整例子](base.html)

配置

```javascript
//位于js目录 /static/admin/js/config.js

var config = {

    //调试模式 (开启后左侧菜单不缓存,菜单收展失效,打开渲染速度会变慢)
    debug: true,

    //网站名称 (左上角显示的文字LOGO)
    webname: 'QAdmin',

    //菜单列表路径 (可以是本地json,也可以是api接口)
    menuUrl: 'data/menu.json',

    //layer全局提示层
    layerMsg: {
        offset: 't', //坐标 (详细说明 https://www.layui.com/doc/modules/layer.html#offset)
        shade: [0.4, '#000'] //遮罩 (详细说明 https://www.layui.com/doc/modules/layer.html#shade)
    }
}

//当然你也可以不写在config.js中
//你可以把 <script src="./static/admin/js/config.js"></script>
//把以上代码在script.js这前
```
- [遇到菜单不生效,请点击这里>](http://docs.qadmin.net/1114311)

菜单配置格式

```javascript
[{
    "name": "顶级菜单",
    "icon": "&#xe68e;", //layui内置图标
    "url": "index.html", //地址
    "target": "_blank", //是否新窗口打开,非_blank或无此配置则本窗打开
    "hidden": false, 
    "list": []
}, {
    "name": "子级菜单",
    "icon": "&#xe612;",
    "url": "", //如果有二级菜单,地址留空
    "hidden": false, //是否展开
    "list": [{
        "name": "二级菜单",
        "url": "user_index.html"
    }, {
        "name": "二级菜单",
        "url": "user_add.html"
    }]
}]
```
使用php生成菜单api
```php
<?php
$menu = [
    [
        'name'=>'顶级菜单',
        'icon'=>'&#xe68e;',
        'url'=>'/index.html',
        'hidden'=>false,
        'list'=>[]
    ],
    [
        'name'=>'子级菜单',
        'icon'=>'&#xe68e;',
        'url'=>'',
        'hidden'=>false,
        'list'=>[
            [
                'name'=>'二级菜单',
                'url'=>'/user_index.html',
            ],
            [
                'name'=>'二级菜单',
                'url'=>'/user_add.html',
            ]           
        ]
    ]
];
header('Content-Type:application/json; charset=utf-8');
echo json_encode($menu);

?>
```

### 常用方法
```javascript
delCache(); //清除前端缓存

//提示框
msg({code:1,msg:'成功'}); //以对象传入
msg(1,'成功','/index.html',2); //传入跳转地址与跳转秒数
```


### 联系我们

- QQ群: [324098841](http://shang.qq.com/wpa/qunwpa?idkey=6f5462146888da75feaaa1fe1ab3addfcea63f6454548238033c6a91fa610e4e)

- 博客: [blog.php127.com](http://blog.php127.com)

- 更多开源项目: [github.com/aa24615](https://github.com/aa24615)