ThinkPHP6 视图

模板引擎支持普通标签和XML标签方式两种标签定义，分别用于不同的目的

标签类型	描述
普通标签	主要用于输出变量、函数过滤和做一些基本的运算操作
XML标签	也称为标签库标签，主要完成一些逻辑判断、控制和循环输出，并且可扩展

一、运算符 (自学)

运算符	示例
+	{$a+$b}
-	{$a-$b}
*	{$a*$b}
/	{$a/$b}
%	{$a%$b}
++	{$a++} 或 {++$a}
--	{$a--} 或{--$a}
综合运算	{$a+$b*10+$c}
三元运算符	{$a==$b ? 'yes' : 'no'}

controller文件

public function index(){
    View::assign('a',100);
    View::assign('b',21);
    return View::fetch();
}

view文件

<div>{$a+$b}</div>
<div>{$a-$b}</div>
<div>{$a*$b}</div>
<div>{$a/$b}</div>
<div>{$a%$b}</div>
<div>{$a++}</div>
<div>{++$a}</div>
<div>{$a--}</div>
<div>{--$a}</div>
<div>{$c ? '存在' : '不存在'}</div>

二、模版函数 (自学)

方法	描述
date	日期格式化（支持各种时间类型）
format	字符串格式化
upper	转换为大写
lower	转换为小写
first	输出数组的第一个元素
last	输出数组的最后一个元素
default	默认值
raw	不使用（默认）转义
md5	md5加密
substr	截取字符串

可以多函数调用

controller文件

public function index(){
    View::assign('time',1576048640);
    View::assign('num',10.0032);
    View::assign('str','OUyangKE');
    View::assign('arr',[
        '朱老师',
        '欧阳克',
        '西门大官人'
    ]);
    return View::fetch();
}

view文件

<div>{$time|date='Y-m-d H:i:s'}</div>
<div>{$num|format='%02d'}</div>
<div>{$str|upper}</div>
<div>{$str|lower}</div>
<div>{$arr|first}</div>
<div>{$arr|last}</div>
<div>{$default|default="欧阳克"}</div>
<div>{$str|substr=0,3}</div>
<div>{$str|md5}</div>
<div>{$str|lower|substr=0,3}</div>

三、循环标签

foreach 标签的用法和PHP语法非常接近，用于循环输出数组或者对象的属性

controller文件

public function index(){
    $arr = [
        [
            'id' => 1,
            'name' => '欧阳克'
        ],
        [
            'id' => 2,
            'name' => '朱老师'
        ],
        [
            'id' => 3,
            'name' => '西门大官人'
        ]
    ];
    View::assign('arr',$arr);
    return View::fetch();
}

view文件

{foreach $arr as $v}
    <div>
        <span>ID：{$v['id']}</span>
        <span>姓名：{$v['name']}</span>
    </div>
{/foreach}

四、`volist` 循环标签

二维数组的结果输出
name 模板赋值的变量名称
id 当前的循环变量，可以随意起名
key 下标，从1开始，默认变量i
offset 开始行数
length 获取行数
empty 如果数据为空，显示此文字

view文件

{volist name="arr" id="v" key="k"  offset="1" length="2"}
    <div>
        <span>ID：{$v['id']}</span>
        <span>姓名：{$v['name']}</span>
        <span>下标：{$k}</span>
    </div>
{/volist}

五、`if` 判断标签

if 标签的用法和PHP语法非常接近，用于条件判断

controller文件

public function index(){
    View::assign('status',1);
    View::assign('order_status',4);
    return View::fetch();
}

view文件

{if $status == 1}
    <div>开启</div>
{/if}

{if $status == 0}
    <div>关闭</div>
{else/}
    <div>开启</div>
{/if}

{if $order_status == 0}
    <div>未支付</div>
{elseif $order_status == 1/}
    <div>已支付 待发货</div>
{elseif $order_status == 2/}
    <div>已发货 待收货</div>
{elseif $order_status == 3/}
    <div>已收货 待评论</div>
{elseif $order_status == 4/}
    <div>已完成</div>
{/if}

六、`switch` 判断标签

switch 标签的用法和PHP语法非常接近，用于条件判断

view文件

{switch $order_status}
    {case 0 }<div>未支付</div>{/case}
    {case 1 }<div>已支付 待发货</div>{/case}
    {case 2 }<div>已发货 待收货</div>{/case}
    {case 3 }<div>已收货 待评论</div>{/case}
    {case 4 }<div>已完成</div>{/case}
{/switch}

七、包含文件

include 标签，引入模版文件
load 标签，引入资源文件(css、js)

view文件，把头部和尾部分文件

{include file="public/header" /}
{include file="public/left" /}

{load href="/static/layui/css/layui.css" /}
{load href="/static/layui/layui.js" /}

{include file="public/tail" /}

八、其他标签（自学）

条件标签

标签	描述
in	判断变量是否存在某些值
notin	判断变量是否不存在某些值
between	判断变量是否存在某些值
notbetween	判断变量是否不存在某些范围值
present	判断某个变量是否已定义
notpresent	判断某个变量是否未定义
empty	判断某个变量是否为空
notempty	判断某个变量是否不为空
defined	判断某个常量是否已定义
notdefined	判断某个常量是否未定义

比较标签

标签	描述
eq	等于
neq	不等于
gt	大于
egt	大于等于
lt	小于
elt	小于等于
heq	恒等于
nheq	不恒等于

循环标签

标签	描述
for	计数循环

杂项标签

标签	描述
literal	原样输出
php	使用原生php代码

九、示例

controller代码

namespace app\controller;
use think\facade\View;
class Index{
    public function index(){
        $title = '商城';
        $login = '欧阳克';
        $left = [
            [
                'title' => '商品管理',
                'lists' => [
                    [
                        'id' => 1,
                        'title' => '商品列表',
                    ],
                    [
                        'id' => 2,
                        'title' => '商品分类',
                    ]
                ]
            ],
            [
                'title' => '用户管理',
                'lists' => [
                    [
                        'id' => 3,
                        'title' => '用户列表',
                    ],
                    [
                        'id' => 4,
                        'title' => '购物车',
                    ],
                    [
                        'id' => 5,
                        'title' => '用户地址',
                    ],
                    [
                        'id' => 6,
                        'title' => '订单管理',
                    ]
                ]
            ],
            [
                'title' => '后台管理',
                'lists' => [
                    [
                        'id' => 7,
                        'title' => '管理员列表',
                    ],
                    [
                        'id' => 8,
                        'title' => '个人中心',
                    ],
                    [
                        'id' => 9,
                        'title' => '左侧菜单列',
                    ]
                ]
            ]
        ];
        $right = [
            [
                'id' => 1,
                'title' => '熙世界2019秋冬新款长袖杏色上衣连帽宽松刺绣文艺落肩袖加厚卫衣BF风',
                'cat' => '女装',
                'price' => 189,
                'discount' => 6,
                'status' => 1,
                // 'status' => '开启',
                'add_time' => '2019-12-12',
                // 'add_time' => '1576080000'
            ],
            [
                'id' => 2,
                'title' => '秋水伊人双面呢冬装2019年新款女装气质西装领撞色羊毛大衣外套女',
                'cat' => '女装',
                'price' => 699,
                'discount' => 7,
                'status' => 1,
                // 'status' => '开启',
                'add_time' => '2019-12-12',
                // 'add_time' => '1576080000'
            ],
            [
                'id' => 3,
                'title' => '微弹中高腰直脚牛仔裤男',
                'cat' => '男装',
                'price' => 179,
                'discount' => 8,
                'status' => 0,
                // 'status' => '开启',
                'add_time' => '2019-12-12',
                // 'add_time' => '1576080000'
            ],
            [
                'id' => 1,
                'title' => '男士长袖t恤秋季圆领黑白体恤T 纯色上衣服打底衫',
                'cat' => '男装',
                'price' => 99,
                'discount' => 9,
                'status' => 1,
                // 'status' => '开启',
                'add_time' => '2019-12-12',
                // 'add_time' => '1576080000'
            ],
        ];
        View::assign([
            'title'  => $title,
            'login' => $login,
            'left' => $left,
            'right' => $right
        ]);
        return View::fetch();
    }
}

view代码：head.html

<!DOCTYPE html>
<html>
<head>
    <title>{$title}--后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
    <script type="text/javascript" src="/static/layui/layui.js"></script>
    <style type="text/css">
        .header{width:100%;height: 50px;line-height: 50px;background: #2e6da4;color:#ffffff;}
        .title{margin-left: 20px;font-size: 20px;}
        .userinfo{float: right;margin-right: 10px;}
        .userinfo a{color:#ffffff;}
        .menu{width: 200px;background:#333744;position:absolute;}
        .main{position: absolute;left:200px;right:0px;}

        .layui-collapse{border: none;}
        .layui-colla-item{border-top:none;}
        .layui-colla-title{background:#42485b;color:#ffffff;}
        .layui-colla-content{border-top:none;padding:0px;}

        .content span{background: #009688;margin-left: 30px;padding: 10px;color:#ffffff;}
        .content div{border-bottom: solid 2px #009688;margin-top: 8px;}
        .content button{float: right;margin-top: -5px;}
    </style>
</head>
<body>
    <div class="header">
        <span class="title"><span style="font-size: 20px;">{$title}</span>--后台管理系统</span>
        <span class="userinfo">【{$login}】<span><a href="javascript:;">退出</a></span></span>
    </div>

view代码：left.html

<div class="menu" id="menu">
    <div class="layui-collapse" lay-accordion>
        {foreach $left as $k=>$left_v}
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">{$left_v.title}</h2>
                <div class="layui-colla-content {if $k==0}layui-show{/if}">
                    <ul class="layui-nav layui-nav-tree">
                        {foreach $left_v['lists'] as $lists_v}
                            <li class="layui-nav-item"><a href="index.html">{$lists_v.title}</a></li>
                        {/foreach}
                    </ul>
                </div>
            </div>
        {/foreach}
    </div>
</div>

view代码：bottom.html

</body>
</html>
<script>
    layui.use(['element','layer','laypage'], function(){
        var element = layui.element;
        var laypage = layui.laypage;
        $ = layui.jquery;
        layer = layui.layer;
        resetMenuHeight();
    });
    // 重新设置菜单容器高度
    function resetMenuHeight(){
        var height = document.documentElement.clientHeight - 50;
        $('#menu').height(height);
    }
</script>

view代码：index.html

{include file="public/head" /}
{include file="public/left" /}
<div class="main" style="padding:10px;">
    <div class="content">
        <span>商品列表</span>
        <div></div>
    </div>
    <table class="layui-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>商品标题</th>
                <th>分类</th>
                <th>原价</th>
                <th>折扣</th>
                <th>现价</th>
                <th>库存</th>
                <th>状态</th>
                <th>添加时间</th>
            </tr>
        </thead>
        <tbody>
            {volist name="right" id="right_v"}
                <tr>
                    <td>{$right_v.id}</td>
                    <td>{$right_v.title}</td>
                    <td>{$right_v.cat}</td>
                    <td>{$right_v.price}</td>
                    <td>{$right_v.discount}</td>
                    <td>
                        {if $right_v.discount!=0}
                            {$right_v.price*($right_v.discount/10)}
                        {else/}
                            {$right_v.price}
                        {/if}
                    </td>
                    <td>{$right_v.stock}</td>
                    <td>{if $right_v['status']==1}开启{else/}关闭{/if}</td>
                    <td>{$right_v.add_time|date='Y-m-d'}</td>
                </tr>
            {/volist}
        </tbody>
    </table>
</div>
{include file="public/bottom" /}

ThinkPHP6 视图

一、运算符 (自学)

二、模版函数 (自学)

三、循环标签

四、volist 循环标签

五、if 判断标签

六、switch 判断标签

七、包含文件

八、其他标签（自学）

九、示例

四、`volist` 循环标签

五、`if` 判断标签

六、`switch` 判断标签