- 模板引擎支持普通标签和 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" /}正文完
