ThinkPHP6.0 视图



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不使用(默认)转义
md5md5加密
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" /}

八、其他标签

1、条件标签

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

 

public function index(){
    View::assign('number',100);
    View::assign('string','');
    return View::fetch();
}
{in name="number" value="99,100,101"}
    number等于99,100,101任意一个值
{/in}
{notin name="number" value="99,100,101"}
    number不等于99,100,101任意一个值
{/notin}
{between name="number" value="1,10"}
    number等于1 到 10 之间的任意一个值
{/between}
{notbetween name="number" value="1,10"}
    number不等于1 到 10 之间的任意一个值
{/notbetween}
{present name="number"}
    number已经定义
{/present}
{notpresent name="n"}
    n还没有定义
{/notpresent}
{empty name="string"}
    name为空值
{/empty}
{notempty name="string"}
    name有值
{/notempty}
{defined name="NAME"}
    NAME常量已经定义
{/defined}
{notdefined name="NAME"}
    NAME常量未定义
{/notdefined}

2、比较标签

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

 

public function index(){
    View::assign("number",100);
    View::assign("string","欧阳克");
    return View::fetch();
}
{eq name="number" value="100"}
    number 等于 100
{/eq}
{neq name="number" value="101"}
    number 不等于 101
{/neq}
{gt name="number" value="33"}
    number 大于 33
{/gt}
{egt name="number" value="100"}
    number 大于等于 100
{/egt}
{lt name="number" value="200"}
    number 小于 200
{/lt}
{elt name="number" value="100"}
    number 小于等于 100
{/elt}
{heq name="string" value="欧阳克"}
    string 恒等于 欧阳克
{/heq}
{heq name="string" value="朱老师"}
    string 恒不等于 朱老师
{/heq}

3、循环标签

标签描述
for计数循环
  • start:开始值

  • end:结束值

  • step:步进值,默认1

  • name:循环变量名,默认i

{for start="1" end="50" step="5" name="i"}
    {$i}<br/>
{/for}

4、杂项标签

标签描述
literal原样输出
php 使用原生php代码
{literal}
    {$name} 这里$name不会被当作变量,而是普通字符
    {/literal}
    {php}
    echo '欧阳克';
    {/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" /}