![]()
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’} |
这里我们新建
控制器 app\controller\Test.php
视图app\view\Test\index.html
app\controller\Test.php 文件
<?php namespace app\controller;use think\facade\View;class Test{ public function index() { View::assign('a',100); View::assign('b',21); return View::fetch(); }}?>app\view\Test\index.html文件
<!DOCTYPE html><html><head> <title>运算符</title></head><body> <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></body></html>预览地址：http://zhang.com/index.php/Test/index
![]()
二、模版函数
| 方法 | 描述 |
|---|---|
| date | 日期格式化（支持各种时间类型） |
| format | 字符串格式化 |
| upper | 转换为大写 |
| lower | 转换为小写 |
| first | 输出数组的第一个元素 |
| last | 输出数组的最后一个元素 |
| default | 默认值 |
| raw | 不使用（默认）转义 |
| md5 | md5加密 |
| substr | 截取字符串 |
可以多函数调用
controller文件
<?php namespace app\controller;use think\facade\View;class Test{ public function index(){ View::assign('time',1576048640); View::assign('num',10.0032); View::assign('str','OUyangKE'); View::assign('arr',['皮特朱','咩咩','欧阳克']); return View::fetch(); }}?>view文件
<!DOCTYPE html><html><head> <title>模版函数 </title></head><body> <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>md5散列处理{$str|md5}</div> <div>调用多个函数{$str|lower|substr=0,3}</div></body></html>
![]()
三、foreach循环标签
foreach标签的用法和PHP语法非常接近，用于循环输出数组或者对象的属性
controller文件
<?php namespace app\controller;use think\facade\View;class Test{ public function index(){ $arr = [ ['id'=>1,'name'=>'皮特朱'], ['id'=>2,'name'=>'咩咩'], ['id'=>3,'name'=>'欧阳克'] ]; View::assign('arr',$arr); return View::fetch(); }}?>view文件
<!DOCTYPE html><html><head> <title>循环标签</title></head><body> {foreach $arr as $k=>$v} <span>索引：{$k}--</span> <span>ID：{$v['id']}--</span> <span>姓名：{$v['name']}</span> <br> {/foreach}</body></html>![]()
四、volist 循环标签
二维数组的结果输出
name 模板赋值的变量名称
id 当前的循环变量，可以随意起名
key 下标，从1开始，默认变量i
offset 开始行数
length 获取行数
empty 如果数据为空，显示此文字
view文件
<!DOCTYPE html><html><head> <title>循环标签</title></head><body> {foreach $arr as $k=>$v} <span>索引：{$k}--</span> <span>ID：{$v['id']}--</span> <span>姓名：{$v['name']}</span> <br> {/foreach} <hr> {volist name="arr" id="v" key="k" offset="0" length="3"} <span>索引：{$k}</span> <span>ID：{$v['id']}</span> <span>姓名：{$v['name']}</span> <br> {/volist}</body></html>
![]()
五、if 判断标签
if标签的用法和PHP语法非常接近，用于条件判断
controller文件
<?php namespace app\controller;use think\facade\View;class Test{ public function index(){ View::assign('status',1); View::assign('order_status',4); return View::fetch(); }}?>view文件
<!DOCTYPE html><html><head> <title>if 判断标签</title></head><body> {if $status == 1} <span>请求成功</span> {/if} {if $status == 0} <span>请求失败</span> {else/} <span>数据异常</span> {/if} {if $order_status == 0} <span>未支付</span> {elseif $order_status == 1/} <span>已支付</span> {elseif $order_status == 2/} <span>已发货</span> {elseif $order_status == 3/} <span>已收货</span> {elseif $order_status == 4/} <span>已评论</span> {/if}</body></html>![]()
六、switch 判断标签
switch标签的用法和PHP语法非常接近，用于条件判断
view文件
<!DOCTYPE html><html><head> <title>switch 判断标签</title></head><body> {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}</body></html>![]()
七、包含文件
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}![]()
九、示例演示
app\controller\Index.php代码
<?php namespace app\controller; use think\facade\View; class Index{ public function index(){ $title = '商城'; $login = 'zhang'; $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, 'stock' => 66, 'status' => 1, // 'status' => '开启', // 'add_time' => '2019-12-12', 'add_time' => '1576080000' ], [ 'id' => 2, 'title' => '秋水伊人双面呢冬装2019年新款女装气质西装领撞色羊毛大衣外套女', 'cat' => '女装', 'price' => 699, 'discount' => 7, 'stock' => 66, 'status' => 1, // 'status' => '开启', //'add_time' => '2019-12-12', 'add_time' => '1576080000' ], [ 'id' => 3, 'title' => '微弹中高腰直脚牛仔裤男', 'cat' => '男装', 'price' => 179, 'discount' => 8, 'stock' => 66, 'status' => 0, // 'status' => '开启', // 'add_time' => '2019-12-12', 'add_time' => '1576080000' ], [ 'id' => 1, 'title' => '男士长袖t恤秋季圆领黑白体恤T 纯色上衣服打底衫', 'cat' => '男装', 'price' => 99, 'discount' => 9, 'stock' => 66, '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代码：app\view\public\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代码：app\view\public\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代码：app\view\public\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代码：app\view\Index\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" /}
