529-ThinkPHP5.1之视图模版

• 模板渲染：是控制器类在继承系统控制器基类（ \think\Controller ）后调用 fetch 方法

fetch 模板表达式：模块@控制器/操作方法        fetch('模板表达式',[模板变量数组],[模板配置数组])

模板默认根目录是:模块/view/控制器名/模板文件名

模板文件的后缀可自定义config/template.php,默认为html

模板参数我们一般不在控制器动态配置,而是在config/template.php中统一配置

视图文件：tp51/application/index/view/demo1~3.html

我的姓名是：<span style="color: red;font-size: 30px;">{$name}</span><br>
{$name}的年龄是：<span style="color: green;font-size: 30px;">{$age} 岁</span><br>
{$name}的工资是：<span style="color: blue;font-size: 30px;">{$salary} 元</span>

<?php
namespace app\index\controller;
use think\facade\View; //视图类静态代理：将内部方法全部看作静态进行调用
use think\Controller;

class Index extends Controller
{
	public function index()
	{
		return '<h2 style="color:red;text-align:center">测试页面：测试成功</h2>';
	}
}

1. 使用视图方法:display()不通过模板,直接渲染内容,支持HTML标签

public function demo1()
    {
        // $name = '齐天大圣';
        //直接输出变量
        // return View::display('我的姓名是：<span style="color:red">'.$name.'</span>');
    }

2. 使用fetch(),加载指定模板文件输出

public function demo1()
    {
        //直接导入View门面类进行调用
        // return View::fetch('demo1',['name'=>'孙悟空']);

        // 控制器类中有一个属性view,保存着视图类的实例对象
        // return $this->view->fetch('demo1',['name'=>'孙悟空']);

        //控制类Controler.php中对常用视图方法做了简化
        // return $this->fetch('demo1',['name'=>'孙悟空']);
    }

3. 框架也内置了一个助手函数提供大家使用view()，在任何情况下都可以使用助手函数,不依赖外部是否导入了某个类

public function demo1()
    {
        // 框架也内置了一个助手函数提供大家使用view()
        return view('demo1',['name'=>'孙悟空','age'=>5000,'salary'=>10000]);
    }

• 模板赋值

除了系统变量和配置参数输出无需赋值外，其他变量如果需要在模板中输出必须首先进行模板赋值操作，

否则会抛出异常，传递数据到模板输出有下面几种方式：

• 1. 使用assign()必须要调用View类,以后我们统一使用Controller来调用

public function demo2()
    {
        // $name = '猪八戒';
        // $age = 8000;
        // $salary = 5000;
        
        $this->view->assign('name', '猪八戒');
        $this->view->assign('age', 8000);
        $this->view->assign('salary', 5000);
        
        return $this->fetch('demo2');
     }

•  2. 传参方式: fetch()或view()

public function demo2()
    {
        return view('demo2',['name'=>'猪八戒','age'=>8000,'salary'=>5000]);
     }

•  3. 对象方式: 就是通过Controller中的二个魔术方法来实现视图类的数据注入的

public function demo2()
    {
        $this->view->name = '猪八戒';
        $this->view->age = 8000;
        $this->view->salary = 5000;

        //如果是按默认规则创建的模板文件,则模板文件名可以省略
        return $this->view->fetch();    
    }

• 模板过滤与替换

tp51也之前版本相比,直接删除了模板字符串替换功能,而改为模板配置参数来实现

 config/template.php: 'tpl_replace_str' => [''=>''],

• 不过,建议大家在控制器使用filter()直接进行过滤替换,更简洁

public function demo3()
    {
        //将模板中的猪八戒  换成:  猪悟能        
        $this->view->assign('name', '猪八戒');
        $this->view->assign('age', 8000);
        $this->view->assign('salary', 5000);

        return $this->filter(function($content) {
            return str_replace('猪八戒', '猪悟能', $content);
        })
        ->fetch();

        //替换内容每次只能替换一个属性值
        return $this->filter(function($content) {
            return str_replace('8000', '5000', $content);
        })
        ->fetch();
    }

• 模板布局

• 一、全局配置,先开启模板布局功能

1. config/template.php

2.'layout_on' => true,          'layout_name' = 'layout',      'layout_item'=>'{__REP__}'

• 二、模板标签的方式

1. 不需要在config/template.php中开启和配置布局模板

2. 直接在需要使用布局模板的模板文件顶部指定布局模板文件即可: {layout name="布局模板名" /}

3. 关闭布局：{_ _NOLAYOUT_ _}

•  三、在控制器动态配置

 1.不需要在模板配置文件做任何配置,也不需要在当前模板中添加任何标签

 2.当然,布局模板,还是要事先制作好的

 3.直接调用:$this->view-engine->layout(true)开启

控制器文件：tp51/application/index/controller/index.php

• 动态开启模板布局,一切使用默认的布局参数:layout_name=layout,{__CONTENT__}

    public function demo4()
    {
        //动态开启模板布局,一切使用默认的布局参数:layout_name=layout,{__替换符__}
        //$this->view->engine->layout(true);
        
        $this->view->engine->layout('layout','{__REPLACE__}');
        return $this->view->fetch();
        
        简化链式调用 1
        return $this->view //调用视图对象
               ->engine    //模板引擎对象
               ->layout(true)  //开启模板布局
               ->fetch('index/demo4');  //渲染模板
       
       简化链式调用 2
       return $this->view
                    ->engine
                    ->layout('layout','{__REPLACE__}')
                    ->fetch('index/demo4');       
       
       //关闭模板布局
      // return $this->view->engine->layout(false)->fetch('index/demo4'); 
    }

• 自定义模板布局参数,layout可以是任意的布局文件,被替换的内容标识符也可以自定义

头部文件：tp51/application/index/view/hebox/header.html

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style type="text/css">
		.muin {
			width: 100%;
			height: 50px;
			background:#E09600;
			line-height: 50px;
		}
		.muin ul {
			width: 800px;
			margin: auto;
		}
		.muin ul li{
			list-style: none;
			float: left;
			text-align: center;
			margin-right: 50px;
		}
		.muin a{
			text-decoration: none;
			color: #fff;
			font-size:18px;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<div class="muin">
		<ul>
			<li><a href="">首页</a></li>
			<li><a href="">日记</a></li>
			<li><a href="">相册</a></li>
			<li><a href="">说说</a></li>
			<li><a href="">留言</a></li>
			<li><a href="">应用</a></li>
			<li><a href="">游戏</a></li>
			<li><a href="">动态</a></li>
			<li><a href="">资料</a></li>
		</ul>
	</div>
</body>
</html>

底部文件：tp51/application/index/view/hebox/footer.html

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style type="text/css">
	    .footer{
	    	width: 100%;
	    	height: 80px;
	    	background: #F8DB4F;
	    	padding: 20px 0;
	    }
		.link {
			text-align: center;
		}
        .link a {
        	text-decoration: none;
        	color: #403e39;
        	margin: 10px 3px;
        }
        .link a:hover{
        	color: #cc8f14;
        }
        p {margin-top: 5px;}
	</style>
</head>
<body>
	<div class="footer">
		<div class="link">
			<a href="">空间手机版</a><span> | </span>
			<a href=""> 黄钻贵族</a><span> | </span>
			<a href="">官方Qzone</a><span> | </span>
			<a href="">QQ互联</a><span> | </span>
			<a href="">认证服务</a><span> | </span>
			<a href="">腾讯博客</a><span> | </span>
			<a href="">腾讯客服</a><span> | </span>
			<a href="">QQ空间服务协议</a><span> | </span>
			<a href="">Complaint Guidelines</a><span> | </span>
			<a href="">粤网文[2017]6138-1456号</a>
			<p>Copyright © 2005 - 2018 Tencent.<a href="">All Rights Reserved.</a></p>
			<p>腾讯公司 <a href="">版权所有</a></p>	
		</div>
	</div>
</body>
</html>

布局文件：tp51/application/index/view/layout.html

{include file="hebox/header" /}
{__REPLACE__}
{include file="hebox/footer" /}

• 模板继承

一. 在view/base.html: 做为被其它模板继承的基础模板文件,也可以叫父模板

1. 基础模板中,应该只有block标签,而不应该有其它的标签;

2. 基础模板中,写在block标签之外内容,会原样输出到子模板中 

二. base.html中,需要被子模板重写的内容全部用{block name=""}进行定义

{block name="beader"}
{include file="hebox/header" /}
{/block}

三. 子模板中直接用{extend name="" /}继承即可

{extend name="base" /}

清除基础模板中name区块的内容

{block name="name"}{/block}

1.子模板中,只能对基础模板中的区块block进行重写;

2.子模板中不能写其它内容,否则会直接忽略掉;

4.子模块中未重写的区块内容,将原样显示

3.子模拟中的区块顺序无所谓;

4.如果子模块中的区块内容为空,则是清除区块中的原内容

基础文件（父模块）：tp51/application/index/view/base.html

{block name="header"}
{include file="hebox/header" /}
{/block}

{block name="main"}主体部分{/block}

{block name="text"}新主体你们喜欢吗？{/block} <br>

{block name="footer"}
{include file="hebox/footer" /}
{/block}

继承文件（子模块）：tp51/application/index/view/demo5.html

{extend name="base" /}

{//修改头部}
{block name="header"}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.muin {
width: 100%;
height: 50px;
background:#000;
line-height: 50px;
color:#fff;
text-align: center;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div>我是导航条</div>
</body>
</html>
{/block}

{//更新主体部分}
{block name="main"}
<div style="height:300px;background: red;line-height: 300px;">
<h1 style="font-size: 50px;text-align: center;margin: 0;color:#fff;">我是新的主体部份</h1>
</div>
{/block}

{//继承父模块的内容 {__block__}}
{block name="text"}{__block__}<span style="font-size: 50px;text-align: center;margin: 0;color:red;">很喜欢!!</span>{/block}

{//清除底部}
{block name="footer"}{/block}