虚拟点餐系统(8) 后台首页

创建后台首页

# 项目根目录下使用命令行操作
# 创建普通控制器
php think make:controller admin
/Index --plain
<?php
// 后台控制器
// application/admin/controller/Index.php namespace app\admin\controller;
use think\Controller; class Index extends Controller {
  // 后台首页
public function index(){ return $this->fetch(); }   // 欢迎页 public function welcome(){ return $this->fetch(); } }
// route/route.php
// 后台路由分组
Route::group('admin',function(){
    Route::get('/','admin/index/index');
    Route::get('welcome','admin/index/welcome');
});

查看已定义的路由列表

php think route:list

 

 拷贝layui前端框架到 public/static目录下

设置模板输出替换 

// config/template.php
    // 模板输出替换
    'tpl_replace_string' => [
        '__LAYUI__' => '/static/layui',

公共模板文件 : 主要用于统一引入css文件和js文件

// application/admin/view/public/head.html
<link rel="stylesheet" href="__LAYUI__/css/layui.css" />
// application/admin/view/public/foot.html
<script src="__LAYUI__/layui.js"></script>

后台首页模板文件

<!--application/admin/view/index/index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>虚拟餐厅后台管理</title>
    {include file='public/head' /}
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">虚拟餐厅后台管理</div>
        <!-- 头部区域(可配合layui已有的水平导航) -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    管理员
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">商品管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">商品分类</a></dd>
                        <dd><a href="javascript:;">商品列表</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">订单管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">订单列表</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <iframe id="external-frame" scrolling="no" frameborder="0" src="{:url('/admin/welcome')}" name="right" width="100%" height="100%" onload="reinitIframe()"></iframe>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © restaurant.com - {:date('Y-m-d H:i:s')}
    </div>
</div>
{include file='public/foot'}
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;

    });

    function reinitIframe(){
        var iframe = document.getElementById("external-frame");
        try{
            var bHeight = iframe.contentWindow.document.body.scrollHeight;
            var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
            var height = Math.max(bHeight, dHeight);
            iframe.height =  height + 200;
        }catch (ex){}
    }
</script>
</body>
</html>

欢迎页模板文件

<!--application/admin/view/index/welcome.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎</title>
</head>
<body>
    <h1>欢迎使用虚拟餐厅管理后台系统</h1>
</body>
</html>

首页效果图

posted on 2020-05-21 14:33  TabPHP  阅读(119)  评论(0)    收藏  举报