[proceso de aprendizaje de thinkphp6] Vista de ThinkPHP6

Vista de ThinkPHP6

• El motor de plantillas admite dos tipos de definiciones de etiquetas: etiquetas ordinarias y etiquetas XML, que se utilizan para diferentes propósitos.

tipo de etiqueta	describir
etiqueta normal	Se utiliza principalmente para variables de salida, filtrado de funciones y para realizar algunas operaciones básicas.
Etiquetas XML	También conocido como etiquetas de biblioteca de etiquetas, principalmente completa algunos juicios lógicos, control y salida de bucle, y se puede expandir

1. Operadores (autoaprendizaje)

operador	ejemplo
+	{ un + un + $a+$ b}
-	{ un − un- $a-$ b}
*	{ un ∗ un* $a\ast$ b}
/	{ un / un / $un/$ b}
%	{ aa% $un$ b}
++	{ $a++} o {++$a}
–	{$ a–} o {–$a}
Cálculo compuesto	{ un + un + $a+$ b*10+$c}
operador ternario	{ un = = un == $a==$ segundo? 'sí No'}

archivo del controlador

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

<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>

2. Función de plantilla (autoaprendizaje)

método	describir
fecha	Formato de fecha (admite varios tipos de hora)
formato	formato de cadena
superior	convertir a mayúsculas
más bajo	convertir a minúsculas
primero	salida el primer elemento de la matriz
último	salida el último elemento de la matriz
por defecto	valores predeterminados
crudo	No se utiliza ningún escape (predeterminado)
md5	cifrado md5
substr	interceptar cadena

• Son posibles múltiples llamadas de función

archivo del controlador

public function index(){
    
    
    View::assign('time',1576048640);
    View::assign('num',10.0032);
    View::assign('str','OUyangKE');
    View::assign('arr',[
        '雪碧',
        '可口可乐',
        '红酒 '
    ]);
    return View::fetch();
}

ver archivo

<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="cafe"}</div>
<div>{$str|substr=0,3}</div>
<div>{$str|md5}</div>
<div>{$str|lower|substr=0,3}</div>

3. Etiqueta de ciclo

• El uso de la etiqueta foreach está muy cerca de la sintaxis de PHP, que se usa para recorrer las propiedades de matrices u objetos.

archivo del controlador

public function index(){
    
    
    $arr = [
        [
            'id' => 1,
            'name' => '可口可乐'
        ],
        [
            'id' => 2,
            'name' => '叶大牛'
        ],
        [
            'id' => 3,
            'name' => '官人快来'
        ]
    ];
    View::assign('arr',$arr);
    return View::fetch();
}

ver archivo

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

4. etiqueta ciclo volist

• La salida del resultado de la matriz bidimensional.
• asignación de plantilla de nombre de variable de nombre
• id La variable de bucle actual, puede nombrarla a voluntad
• subíndice clave, a partir de 1, variable predeterminada i
• número de línea de inicio compensado
• longitud Obtener el número de filas
• vacío Si los datos están vacíos, mostrar este texto

ver archivo

{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}

Cinco, si etiqueta de juicio

• El uso de la etiqueta if está muy cerca de la sintaxis de PHP y se usa para el juicio condicional.

archivo del controlador

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

ver archivo

{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}

6. Cambiar etiqueta de juicio

• El uso de la etiqueta de cambio está muy cerca de la sintaxis de PHP y se usa para el juicio condicional.

ver archivo

{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}

7. Incluir archivos

• incluir etiqueta, importar archivos de plantilla
• cargar etiqueta, importar archivos de recursos (css, js)

Ver archivo, la parte de encabezado y cola del archivo

{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" /}

8. Otras etiquetas (autoestudio)

1. Etiqueta de condición

Etiqueta	describir
en	Comprobar si una variable tiene algún valor
nadar	Determinar si una variable no tiene algún valor
entre	Comprobar si una variable tiene algún valor
no entre	Determinar si una variable no tiene ciertos valores de rango
presente	Comprobar si una variable está definida
no presente	Comprobar si una variable no está definida
vacío	Comprobar si una variable está vacía
no vacío	Comprobar si una variable no está vacía
definido	Comprobar si se define una constante
no definida	Comprobar si una constante no está definida

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}

• Etiquetas condicionales, puede agregar otras etiquetas

{
    
    in name="number" value="99,100,101"}
    number等于99，100，101任意一个值
{
    
    else/}
    number不等于99，100，101任意一个值
{
    
    /in}

2. Compara etiquetas

Etiqueta	describir
equivalente	igual
neq	no igual a
gt	más que el
por ejemplo	mayor o igual a
es	menos que
elt	Menos que o igual a
ELIMINA	igual a
nheq	constante no es igual a

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. Etiqueta de ciclo

Etiqueta	describir
para	bucle de conteo

• inicio: valor inicial
• final: valor final
• paso: valor de paso, predeterminado 1
• nombre: nombre de la variable de bucle, por defecto i

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

4. Pestaña Varios

Etiqueta	describir
literal	Salida tal cual, evitando que se analicen las etiquetas de plantilla
php	Usando el código php nativo, puede escribir cualquier código de declaración PHP en el archivo de plantilla

{literal}
    {$name} 这里$name不会被当作变量，而是普通字符
{/literal}

{php}
    echo '可口可乐搬代码';
{/php}

9. Ejemplos

código del controlador

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();
    }
}

Ver código: 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>

Ver código: izquierda.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>

Ver código: 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>

Ver código: 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" /}