视图模板

视图功能由\think\View类配合视图驱动（也即模板引擎驱动）类一起完成，新版仅内置了PHP原生模板引擎（主要用于内置的异常页面输出），如果需要使用其它的模板引擎需要单独安装相应的模板引擎扩展。

如果你需要使用think-template模板引擎，只需要安装think-view 模板引擎驱动。

composer require topthink/think-view

视图相关的配置在配置目录的config/view.php配置文件中进行定义。

<?php
// +----------------------------------------------------------------------
// | 模板设置
// +----------------------------------------------------------------------

return [
    // 模板引擎类型使用Think
    'type'          => 'Think',
    // 默认模板渲染规则 1 解析为小写+下划线 2 全部转换小写 3 保持操作方法
    'auto_rule'     => 1,
    // 模板目录名
    'view_dir_name' => 'view',
    // 模板后缀
    'view_suffix'   => 'html',
    // 模板文件名分隔符
    'view_depr'     => DIRECTORY_SEPARATOR,
    // 模板引擎普通标签开始标记
    'tpl_begin'     => '{',
    // 模板引擎普通标签结束标记
    'tpl_end'       => '}',
    // 标签库标签开始标记
    'taglib_begin'  => '{',
    // 标签库标签结束标记
    'taglib_end'    => '}',
];

通常可以直接使用think\facade\View来操作视图。

模板变量

模板赋值

模板中的变量（除了一些系统变量外）必须先进行模板赋值后才能使用，可以使用assign方法进行全局模板变量赋值

namespace app\controller;

// 引用视图
use think\facade\View;

class Index
{
    public function index()
    {
        // 模板变量赋值
        View::assign('name','ThinkPHP');
        View::assign('email','thinkphp@qq.com');
        // 或者批量赋值
        View::assign([
            'name'  => 'ThinkPHP',
            'email' => 'thinkphp@qq.com'
        ]);
        // 模板输出
        return View::fetch('index');
    }
}

assign方法赋值属于全局变量赋值，如果你需要单次赋值的话，可以直接在fetch方法中传入

namespace app\controller;

use think\facade\View;

class Index
{
    public function index()
    {
        // 模板输出并变量赋值
        return View::fetch('index', [
            'name'  => 'ThinkPHP',
            'email' => 'thinkphp@qq.com'
        ]);
    }
}

助手函数

如果使用view助手函数渲染输出的话，可以使用下面的方法进行模板变量赋值

return view('index', [
    'name'  => 'ThinkPHP',
    'email' => 'thinkphp@qq.com'
]);

系统变量输出

{$Request.server.script_name} // 输出$_SERVER['SCRIPT_NAME']变量
{$Request.session.user_id} // 输出$_SESSION['user_id']变量
{$Request.get.page} // 输出$_GET['page']变量
{$Request.cookie.name}  // 输出$_COOKIE['name']变量

在模板使用函数

app\index\controller\Index.php

<?php

declare(strict_types=1);

namespace app\index\controller;

use app\BaseController;
use think\facade\View;

class Index extends BaseController
{
    public function index()
    {
        // 模拟数据
        $data = [
            'id' => 1,
            'username' => 'Admin',
            'nickname' => '管理员',
            'sex' => '1',
            'createtime' => '1647519544'
        ];

        // 输出视图并且赋值
        return View::fetch('',['data' => $data]);
    }
}

app\index\view\index\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用函数</title>
</head>
<body>
    <!-- 转换大写 -->
    {$data.username|upper}

    <!-- 转换小写 -->
    {$data.username|lower}

    <!-- 日期格式化 -->
    {$data.createtime|date="Y-m-d"}

    <!-- 截取字符串 -->
    {$data.createtime|substr=0,3}

    <!-- 三元运算符 -->
    {$data.sex == 1 ? '男' : '女'}

    <!-- 原样输出 -->
    {literal}
        Hello,{$data.username}！
    {/literal}
</body>
</html>

模板注释

<!-- 单行注释 -->
{/\* 注释内容 \*/ } 或 {// 注释内容 }

<!-- 多行注释 -->
{/* 这是模板
注释内容*/ }

包含文件

// 注意：包含的模板文件中不能再使用模板布局或者模板继承
{include file='模版文件1,模版文件2,...' /}

// 使用模版表达式
{include file="public/header" /} // 包含头部模版header
{include file="public/menu" /} // 包含菜单模版menu
{include file="blue/public/menu" /} // 包含blue主题下面的menu模版

模板输出替换

'tpl_replace_string'  =>  [
    '__STATIC__'=>'/static',
 '__JS__' => '/static/js',
]

内置标签

变量输出使用普通标签就足够了，但是要完成其他的控制、循环和判断功能，就需要借助模板引擎的标签库功能了，系统内置标签库的所有标签无需引入标签库即可直接使用

内置标签

标签名 作用 包含属性
include 包含外部模板文件（闭合） file
load 导入资源文件（闭合 包括js css import别名） file,href,type,value,basepath
volist 循环数组数据输出 name,id,offset,length,key,mod
foreach 数组或对象遍历输出 name,item,key
for For循环数据输出 name,from,to,before,step
switch 分支判断输出 name
case 分支判断输出（必须和switch配套使用） value,break
default 默认情况输出（闭合 必须和switch配套使用） 无
compare 比较输出（包括eq neq lt gt egt elt heq nheq等别名） name,value,type
range 范围判断输出（包括in notin between notbetween别名） name,value,type
present 判断是否赋值 name
notpresent 判断是否尚未赋值 name
empty 判断数据是否为空 name
notempty 判断数据是否不为空 name
defined 判断常量是否定义 name
notdefined 判断常量是否未定义 name
define 常量定义（闭合） name,value
assign 变量赋值（闭合） name,value
if 条件判断输出 condition
elseif 条件判断输出（闭合 必须和if标签配套使用） condition
else 条件不成立输出（闭合 可用于其他标签） 无
php 使用php代码 无

用法示例

app\index\controller\Index.php

<?php

declare(strict_types=1);

namespace app\index\controller;

use app\BaseController;
use think\facade\View;
use app\index\model\User;

class Index extends BaseController
{
    public function index()
    {
        // 查询数据
        $user = User::select();

        // 输出视图并且赋值
        return View::fetch('',['user' => $user]);
    }
}

app\index\view\index\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内置标签</title>
</head>
<body>
    <!-- 条件判断 -->
    {if($user)}
        <table>
            <tr>
                <th>id</th>
                <th>用户名</th>
                <th>昵称</th>
                <th>状态</th>
            </tr>
            <!-- foreach -->
            {foreach $user as $key => $item}
                <tr>
                    <td>{$item.id}</td>
                    <td>{$item.username}</td>
                    <td>{$item.nickname}</td>
                    <td>
                        <!-- 比较标签 -->
                        {eq name="$item.state" value="1"}
                            启用
                        {else/}
                            禁用
                        {/eq}
                    </td>
                </tr>
            {/foreach}
        </table>
    {else /}
        <p>暂无数据</p>
    {/if}
</body>
</html>

模板布局

hinkPHP的模板引擎内置了布局模板功能支持，可以方便的实现模板布局以及布局嵌套功能

全局配置

config\view.php

return  [
    ···
    'layout_on'     =>  true,
    'layout_name'   =>  'layout',
]

应用配置

app\index\config\view.php

<?php
return  [
    'layout_on'     =>  true,
    'layout_name'   =>  'layout',
];

用法示例

开启模板布局

app\index\config\view.php

<?php
return  [
    'layout_on'     =>  true,
    'layout_name'   =>  'layout',
];

定义layout.html

app\index\view\layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板布局</title>
</head>
<body>
    {include file="common/header" /}
        {__CONTENT__}
    {include file="common/footer" /}
</body>
</html>

公共内容

app\index\view\common\header.html

<div>
    这是头部内容
</div>

app\index\view\common\footer.html

<div>
    这是底部内容
</div>

主体内容

app\index\view\index\index.html

<!-- 条件判断 -->
{if($user)}
    <table>
        <tr>
            <th>id</th>
            <th>用户名</th>
            <th>昵称</th>
            <th>状态</th>
        </tr>
        <!-- foreach -->
        {foreach $user as $key => $item}
            <tr>
                <td>{$item.id}</td>
                <td>{$item.username}</td>
                <td>{$item.nickname}</td>
                <td>
                    <!-- 比较标签 -->
                    {eq name="$item.state" value="1"}
                        启用
                    {else/}
                        禁用
                    {/eq}
                </td>
            </tr>
        {/foreach}
    </table>
{else /}
    <p>暂无数据</p>
{/if}

控制器

app\index\controller\Index.php

<?php

namespace app\index\controller;

use app\BaseController;
use think\facade\View;
use app\index\model\User;

class Index extends BaseController
{
    public function index()
    {
        // 查询数据
        $user = User::select();

        // 输出视图并且赋值
        return View::fetch('',['user' => $user]);
    }

    public function add()
    {
        // 临时关闭当前模板的布局功能
        View::config(['layout_on' => false]);

        return View::fetch();
    }
}

在不开启layout_on布局模板之前，会直接渲染app\index\view\index\index.html模板文件,开启之后，首先会渲染app\index\view\layout.html模板

更改模板布局配置

如果有需要更改模板布局配置，可以参考下面

return [
    'layout_on'     =>  true,
    // 指定其他位置的布局模板
    'layout_name'   =>  'layout/layoutname',
    // 更改输出变量
    'layout_item'   =>  '{__REPLACE__}'
]
powered by GitbookEdit Time： 2023-04-08 10:28:32