ningning0917 / qadmin

基于layui的后台模板

QAdmin轻量级后台模板

基于layui框架与Vue.js构建

轻量不复杂 简洁不简单

• 演示
• 文档
• 常见问题

最新版本

V1.2 2019.06.28

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

• 更新日志
• 升级指导

快速开始

在head中引入所需资源

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

布局

<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之后

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

• 查看完整例子

配置

//位于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这前

• 遇到菜单不生效,请点击这里>

菜单配置格式

[{
    "name": "顶级菜单",
    "icon": "", //layui内置图标
    "url": "index.html", //地址
    "target": "_blank", //是否新窗口打开,非_blank或无此配置则本窗打开
    "hidden": false, 
    "list": []
}, {
    "name": "子级菜单",
    "icon": "",
    "url": "", //如果有二级菜单,地址留空
    "hidden": false, //是否展开
    "list": [{
        "name": "二级菜单",
        "url": "user_index.html"
    }, {
        "name": "二级菜单",
        "url": "user_add.html"
    }]
}]

使用php生成菜单api

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

?>

常用方法

delCache(); //清除前端缓存

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

联系我们

• QQ群: 324098841

• 博客: blog.php127.com

• 更多开源项目: github.com/aa24615