ThinkPHP6.0 視圖
模板引擎支持普通標(biāo)簽和XML標(biāo)簽方式兩種標(biāo)簽定義,分別用于不同的目的.
ThinkPHP6 視圖
模板引擎支持
普通標(biāo)簽
和XML標(biāo)簽
方式兩種標(biāo)簽定義,分別用于不同的目的
標(biāo)簽類型 | 描述 |
普通標(biāo)簽 | 主要用于輸出變量、函數(shù)過濾和做一些基本的運算操作 |
XML標(biāo)簽 | 也稱為標(biāo)簽庫標(biāo)簽,主要完成一些邏輯判斷、控制和循環(huán)輸出,并且可擴展 |
一、運算符
運算符 | 示例 |
+ | {$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>
二、模版函數(shù)
方法 | 描述 |
date | 日期格式化(支持各種時間類型) |
format | 字符串格式化 |
upper | 轉(zhuǎn)換為大寫 |
lower | 轉(zhuǎn)換為小寫 |
first | 輸出數(shù)組的第一個元素 |
last | 輸出數(shù)組的最后一個元素 |
default | 默認(rèn)值 |
raw | 不使用(默認(rèn))轉(zhuǎn)義 |
md5 | md5加密 |
substr | 截取字符串 |
可以多函數(shù)調(diào)用
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>
三、循環(huán)標(biāo)簽
foreach
標(biāo)簽的用法和PHP語法非常接近,用于循環(huán)輸出數(shù)組或者對象的屬性
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 循環(huán)標(biāo)簽
二維數(shù)組的結(jié)果輸出
name 模板賦值的變量名稱
id 當(dāng)前的循環(huán)變量,可以隨意起名
key 下標(biāo),從1開始,默認(rèn)變量i
offset 開始行數(shù)
length 獲取行數(shù)
empty 如果數(shù)據(jù)為空,顯示此文字
view文件
{volist name="arr" id="v" key="k" offset="1" length="2"}
<div>
<span>ID:{$v['id']}</span>
<span>姓名:{$v['name']}</span>
<span>下標(biāo):{$k}</span>
</div>
{/volist}
五、if 判斷標(biāo)簽
if
標(biāo)簽的用法和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>關(guān)閉</div>
{else/}
<div>開啟</div>
{/if}
{if $order_status == 0}
<div>未支付</div>
{elseif $order_status == 1/}
<div>已支付 待發(fā)貨</div>
{elseif $order_status == 2/}
<div>已發(fā)貨 待收貨</div>
{elseif $order_status == 3/}
<div>已收貨 待評論</div>
{elseif $order_status == 4/}
<div>已完成</div>
{/if}
六、switch 判斷標(biāo)簽
switch
標(biāo)簽的用法和PHP語法非常接近,用于條件判斷
view文件
{switch $order_status}
{case 0 }<div>未支付</div>{/case}
{case 1 }<div>已支付 待發(fā)貨</div>{/case}
{case 2 }<div>已發(fā)貨 待收貨</div>{/case}
{case 3 }<div>已收貨 待評論</div>{/case}
{case 4 }<div>已完成</div>{/case}
{/switch}
七、包含文件
include
標(biāo)簽,引入模版文件load
標(biāo)簽,引入資源文件(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" /}
八、其他標(biāo)簽
1、條件標(biāo)簽
標(biāo)簽 | 描述 |
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已經(jīng)定義 {/present} {notpresent name="n"} n還沒有定義 {/notpresent} {empty name="string"} name為空值 {/empty} {notempty name="string"} name有值 {/notempty} {defined name="NAME"} NAME常量已經(jīng)定義 {/defined} {notdefined name="NAME"} NAME常量未定義 {/notdefined}
2、比較標(biāo)簽
標(biāo)簽 | 描述 |
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、循環(huán)標(biāo)簽
標(biāo)簽 | 描述 |
for | 計數(shù)循環(huán) |
start:開始值
end:結(jié)束值
step:步進(jìn)值,默認(rèn)1
name:循環(huán)變量名,默認(rèn)i
{for start="1" end="50" step="5" name="i"} {$i}<br/> {/for}
4、雜項標(biāo)簽
標(biāo)簽 | 描述 |
literal | 原樣輸出 |
php | 使用原生php代碼 |
{literal} {$name} 這里$name不會被當(dāng)作變量,而是普通字符 {/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' => '左側(cè)菜單列',
]
]
]
];
$right = [
[
'id' => 1,
'title' => '熙世界2019秋冬新款長袖杏色上衣連帽寬松刺繡文藝落肩袖加厚衛(wèi)衣BF風(fēng)',
'cat' => '女裝',
'price' => 189,
'discount' => 6,
'status' => 1,
// 'status' => '開啟',
'add_time' => '2019-12-12',
// 'add_time' => '1576080000'
],
[
'id' => 2,
'title' => '秋水伊人雙面呢冬裝2019年新款女裝氣質(zhì)西裝領(lǐng)撞色羊毛大衣外套女',
'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恤秋季圓領(lǐng)黑白體恤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}--后臺管理系統(tǒng)</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>--后臺管理系統(tǒng)</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();
});
// 重新設(shè)置菜單容器高度
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>商品標(biāo)題</th>
<th>分類</th>
<th>原價</th>
<th>折扣</th>
<th>現(xiàn)價</th>
<th>庫存</th>
<th>狀態(tài)</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/}關(guān)閉{/if}</td>
<td>{$right_v.add_time|date='Y-m-d'}</td>
</tr>
{/volist}
</tbody>
</table>
</div>
{include file="public/bottom" /}