ThinkPHP5.0入门教程6之后台模板

by kingzcheung on August 29, 2016

登录页面我们已经做好了,但是登录后发现页面报了下以的错误:

控制器不存在 :index

注意:$this->redirect(url('index/index'));中的url()方法参数是模块/控制器/方法,如果只写控制器/方法,表示当前模块下的控制器/方法。在当前模板下我们并没有一个叫index.php的控制器,因此报以上的错误。

url('index/index')生成以下地址:

http://tp5.local/index.php/admin/index/index.html

后台模板视图

我们需要为这个页面添加控制器和视图模板。
按教程3的方式,在application/admin/controller下添加一个叫index.php的控制器,并添加一个叫index的方法:

<?php
/**
 * Created by PhpStorm.
 * User: kingzcheung
 * Date: 16/8/6
 * Time: 20:52
 */

namespace app\admin\controller;

use think\Controller;

class index extends Controller{

    public function index() {
        
        return $this->fetch('index/index');
    }
}

application/admin/view下添加index目录,并下载此模板:http://v3.bootcss.com/examples/dashboard/,我们需要为后台模板添加一个基础模板,让后台所有页面都继承自此模板,因此需要在view下再新建一个common目录,存放base.html,base.html代码如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://v3.bootcss.com/favicon.ico">

    <title>Dashboard Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/static/admin/css/dashboard.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

{block name="nav"}
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://v3.bootcss.com/examples/dashboard/#">博客后台</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Dashboard</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Settings</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Profile</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Help</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search...">
            </form>
        </div>
    </div>
</nav>
{/block}

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            {block name="menu"}
            <ul class="nav nav-sidebar">
                <li class="active"><a href="http://v3.bootcss.com/examples/dashboard/#">Overview <span class="sr-only">(current)</span></a>
                </li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Reports</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Analytics</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Export</a></li>
            </ul>
            <ul class="nav nav-sidebar">
                <li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item again</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/">One more nav</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/">Another nav item</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/">More navigation</a></li>
            </ul>
            <ul class="nav nav-sidebar">
                <li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item again</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/">One more nav</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/">Another nav item</a></li>
            </ul>
            {/block}
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            {block name="main"}{/block}
        </div>
    </div>
</div>



<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/static/admin/js/ie10-viewport-bug-workaround.js"></script>
{block name="script"}{/block}
</body>
</html>

index.html代码如下:

{extend name="common/base" /}

{block name="main"}
<h1 class="page-header">Dashboard</h1>

<div class="row placeholders">
    <div class="col-xs-6 col-sm-3 placeholder">
        <img data-src="holder.js/200x200/auto/sky" class="img-responsive"
             alt="Generic placeholder thumbnail">
        <h4>Label</h4>
        <span class="text-muted">Something else</span>
    </div>
    <div class="col-xs-6 col-sm-3 placeholder">
        <img data-src="holder.js/200x200/auto/vine" class="img-responsive"
             alt="Generic placeholder thumbnail">
        <h4>Label</h4>
        <span class="text-muted">Something else</span>
    </div>
    <div class="col-xs-6 col-sm-3 placeholder">
        <img data-src="holder.js/200x200/auto/sky" class="img-responsive"
             alt="Generic placeholder thumbnail">
        <h4>Label</h4>
        <span class="text-muted">Something else</span>
    </div>
    <div class="col-xs-6 col-sm-3 placeholder">
        <img data-src="holder.js/200x200/auto/vine" class="img-responsive"
             alt="Generic placeholder thumbnail">
        <h4>Label</h4>
        <span class="text-muted">Something else</span>
    </div>
</div>

<h2 class="sub-header">Section title</h2>

<div class="table-responsive">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>#</th>
            <th>Header</th>
            <th>Header</th>
            <th>Header</th>
            <th>Header</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1,001</td>
            <td>Lorem</td>
            <td>ipsum</td>
            <td>dolor</td>
            <td>sit</td>
        </tr>
        <tr>
            <td>1,002</td>
            <td>amet</td>
            <td>consectetur</td>
            <td>adipiscing</td>
            <td>elit</td>
        </tr>
        <tr>
            <td>1,003</td>
            <td>Integer</td>
            <td>nec</td>
            <td>odio</td>
            <td>Praesent</td>
        </tr>
        <tr>
            <td>1,003</td>
            <td>libero</td>
            <td>Sed</td>
            <td>cursus</td>
            <td>ante</td>
        </tr>
        <tr>
            <td>1,004</td>
            <td>dapibus</td>
            <td>diam</td>
            <td>Sed</td>
            <td>nisi</td>
        </tr>
        <tr>
            <td>1,005</td>
            <td>Nulla</td>
            <td>quis</td>
            <td>sem</td>
            <td>at</td>
        </tr>
        <tr>
            <td>1,006</td>
            <td>nibh</td>
            <td>elementum</td>
            <td>imperdiet</td>
            <td>Duis</td>
        </tr>
        <tr>
            <td>1,007</td>
            <td>sagittis</td>
            <td>ipsum</td>
            <td>Praesent</td>
            <td>mauris</td>
        </tr>
        <tr>
            <td>1,008</td>
            <td>Fusce</td>
            <td>nec</td>
            <td>tellus</td>
            <td>sed</td>
        </tr>
        <tr>
            <td>1,009</td>
            <td>augue</td>
            <td>semper</td>
            <td>porta</td>
            <td>Mauris</td>
        </tr>
        <tr>
            <td>1,010</td>
            <td>massa</td>
            <td>Vestibulum</td>
            <td>lacinia</td>
            <td>arcu</td>
        </tr>
        <tr>
            <td>1,011</td>
            <td>eget</td>
            <td>nulla</td>
            <td>Class</td>
            <td>aptent</td>
        </tr>
        <tr>
            <td>1,012</td>
            <td>taciti</td>
            <td>sociosqu</td>
            <td>ad</td>
            <td>litora</td>
        </tr>
        <tr>
            <td>1,013</td>
            <td>torquent</td>
            <td>per</td>
            <td>conubia</td>
            <td>nostra</td>
        </tr>
        <tr>
            <td>1,014</td>
            <td>per</td>
            <td>inceptos</td>
            <td>himenaeos</td>
            <td>Curabitur</td>
        </tr>
        <tr>
            <td>1,015</td>
            <td>sodales</td>
            <td>ligula</td>
            <td>in</td>
            <td>libero</td>
        </tr>
        </tbody>
    </table>
</div>

{/block}

需要注意模板的一些资源引用,文件要放到对应的static/admin下。打开浏览器访问http://tp5.local/index.php/admin/index/index.html,如果页面访问正常,说明成功了。

限制后台访问

此时你应该发现,好像直接在浏览器上打http://tp5.local/index.php/admin/index/index.html就能访问我们后台页面了,根本不需要登录呀?下面我们需要对后台做一些调整,只有登录过的用户才能访问后台,如果没有登录过,直接访问后台强行跳转到登录页面。

首页我们为控制器里添加一个公有控制器common.php,让除了登录控制器以外的所有控制器都直接继承公有控制器。在公有控制器定义一个初始化方法_initialize,在这里我们判断用户登录行为。
在login.php中,保存了一个session:

session('username',$username);

我们通过判断username是否存在来判定用户是否登录过。
common.php

<?php
/**
 * Created by PhpStorm.
 * User: kingzcheung
 * Date: 16/8/6
 * Time: 21:20
 */

namespace app\admin\controller;


use think\Controller;
use think\Session;

class common extends Controller{

    public function _initialize() {

        //判断是否存在_SESSION['username']
        if(!Session::has('username')){
            $this->redirect('login/index');
        }
    }
}

让index.php 继承common.php:

<?php
/**
 * Created by PhpStorm.
 * User: kingzcheung
 * Date: 16/8/6
 * Time: 20:52
 */

namespace app\admin\controller;


class index extends Common{

    public function index() {

        return $this->fetch('index/index');
    }
}

清除浏览器cookie或者换一个浏览器访问http://tp5.local/index.php/admin/index/index.html,此时你会发现它跳转到了登录页面。