thinkphp3使用layui自定义后台

文章描述:

thinkphp3使用layui自定义后台,thinkphp3自定义后台可以是用layout和使用引入模板两种方式,下面给大家讲到的是引入模板方式

后台首页

<!DOCTYPE html>
<html>
<head>
<include file="Public/meta" />
</head>
<body>
<div class="container">
    <include file="Public/left" />
    <div class="right_content">
        <include file="Public/top" />
        <div class="right_content_main">
            <div class="welcome padding_20">
                <blockquote class="layui-elem-quote">{$username}欢迎您!</blockquote>
            </div>
        </div>
    </div>
</div>
<include file="Public/foot" />
</body>
</html>

META

<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>后台管理</title>
<link rel="stylesheet" type="text/css" href="__BOOTSTRAP__/3.3.7/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="__LAYUI__/css/layui.css" />
<link rel="stylesheet" type="text/css" href="__ADMIN__/css/admin.css" />
<script src="__JS__/jquery-2.1.1.min.js"></script>
<script src="__BOOTSTRAP__/js/bootstrap.min.js"></script>
<script src="__LAYER__/layer.js"></script>
<script src="__LAYUI__/layui.js"></script>

左侧菜单

<div class="left_content">
    <div class="login text_center "> <a class="display_inline_block" href="{:U('/admin/index/index')}">后台管理系统</a> <span class="display_inline_block">V0.0.1</span> </div>
    <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px; margin-top: 10px">
        <li class="layui-nav-item {if condition="$left_menu eq 1"}layui-nav-itemed{/if}"> <a href="javascript:;"><i class="iconfont icon-neirong"></i> 栏目内容</a>
        <dl class="layui-nav-child">
            <dd><a href="{:U('category/index')}">栏目管理</a></dd>
            <dd><a href="{:U('content/index')}">文档管理</a></dd>
        </dl>
        </li>
        <li class="layui-nav-item {if condition="$left_menu eq 2"}layui-nav-itemed{/if}"> <a href="javascript:;"><i class="iconfont icon-tupian"></i> 权限管理</a>
        <dl class="layui-nav-child">
            <dd><a href="{:U('manage/index')}">用户管理</a></dd>
            <dd><a href="{:U('role/index')}">角色管理</a></dd>
            <dd><a href="{:U('auth/index')}">权限管理</a></dd>
        </dl>
        </li>
        <li class="layui-nav-item {if condition="$left_menu eq 3"}layui-nav-itemed{/if}"> <a href="javascript:;"><i class="iconfont icon-shezhi"></i> 系统管理</a>
        <dl class="layui-nav-child">
            <dd><a href="{:U('config/index')}">系统参数</a></dd>
            <dd><a href="{:U('flink/index')}">友情链接</a></dd>
            <dd><a href="{:U('config/del_cache')}">清空缓存</a></dd>
            <dd><a href="{:U('config/edit_password')}">修改密码</a></dd>
        </dl>
        </li>
    </ul>
</div>

顶部

<div class="right_content_top" style="display: none;">
    <a href="#">联系QQ:123456</a>
    <a href="/" target="_blank">网站首页</a>
    <a href="{:U('Login/logout')}">退出登录</a>
</div>
 
<div class="header">
    <div class="datetime"><span class="today_datetime" id="current-time"></span></div>
    <div class="logout"><span>admin<a href="{:U('Login/logout')}" class="loginout"><img src="__ADMIN__images/exit.png"></a></span></div>
</div>

尾部

<script>
    layui.use('element', function () {
        var element = layui.element; //导航的hover效果、二级菜单等功能,需要依赖element模
    });
 
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
                ,layer = layui.layer
                ,layedit = layui.layedit
                ,laydate = layui.laydate;
 
        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
<script>
    /*-删除时候确认*/
    function public_del(url) {
        layui.use('layer',
                function() {
                    var layer = layui.layer;
                    layer.confirm('确认要删除吗?',
                            function(index) {
                                window.location.href = url;
                            });
                });
    }
</script>
<script>
    //头部时间
    setInterval(function() {
        var now = (new Date()).toLocaleString();
        $('#current-time').text(now);
    }, 1000);
</script>

 

发布时间:2021/08/10

发表评论