《Php笔记3.3》ThinkPHP视图——基本结构,视图变量赋值,视图渲染

视图作为 MVC 中的 V，是应用展示数据的窗口，直接关系到与用户的交互，良好的数据展示可以极大地提升用户体验。

ThinkPHP 视图（一）：基本结构

本课时讲解 ThinkPHP 视图的基本结构和如何通过配置参数来自定义视图结构。

新建Views模块，/index.php:

define('BIND_MODULE', 'Views');

渲染视图：Application/Views/Controller/IndexController.class.php

<?php
namespace Views\Controller;
use Think\Controller;
class IndexController extends Controller {
    public function index(){
        $this->display();   //渲染视图
    }
}

此时，访问Views模块的首页，视图文件位置是：

./Application/Views/View/Index/index.html

自定义视图结构：

通过在Views/config.php中配置以下几个配置项，就可以定义出我们想要的视图结构

'DEFAULT_V_LAYER'       =>  'Template',         //视图目录
'TMPL_TEMPLATE_SUFFIX'  =>  '.htm',             //模板文件后缀
'TMPL_FILE_DEPR'        =>  '_'                 //连接符
'VIEW_PATH'             =>  './Theme/Views'     //自定义模块视图文件目录

ThinkPHP 视图（二）：视图变量赋值和渲染

本课时讲解通过 ThinkPHP 控制器给视图变量赋值和渲染模板。

display渲染并输出，fetch渲染返回渲染内容但不输出；通常，我们用fetch渲染内容，经过处理后再用show输出。

变量赋值，视图渲染：Views/Controller.class.php

 1 <?php
 2 namespace Views\Controller;
 3 use Think\Controller;
 4 class IndexController extends Controller {
 5     public function index(){
 6         $username = '科比';
 7         $email = 'kobe@qq.com';
 8         $age = 37;
 9 
10         $people = array(
11             'user'=>$username,
12             'mail'=>$email,
13             'age'=>$age
14         );
15         $this->assign('people', $people);
16 
17         $this->assign('user', $username);
18         $this->assign('mail', $email);
19         $this->assign('age', $age);
20 
21        // $this->display();   //渲染视图
22 
23         $fetchContent = $this->fetch();
24         $fetchContent = str_replace('qq', '163', $fetchContent);
25 
26         $this->show($fetchContent);
27     }
28 }

assign可以是变量也可以是变量数组；

用fetch渲染后，可以将渲染内容进行处理后再show输出。

模板文件输出变量：Views/View/Index/index.html （这里我们用bootstrap的页面来展示）

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
 8     <meta name="description" content="">
 9     <meta name="author" content="">
10     <link rel="icon" href="http://v3.bootcss.com/favicon.ico">
11 
12     <title>Starter Template for Bootstrap</title>
13 
14     <!-- Bootstrap core CSS -->
15     <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
16 
17     <!-- Custom styles for this template -->
18     <link href="http://v3.bootcss.com/examples/starter-template/starter-template.css" rel="stylesheet">
19 
20     <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
21     <!--[if lt IE 9]><script src="http://v3.bootcss.com/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
22     <script src="http://v3.bootcss.com/assets/js/ie-emulation-modes-warning.js"></script>
23 
24     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
25     <!--[if lt IE 9]>
26     <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
27     <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
28     <![endif]-->
29 </head>
30 
31 <body>
32 
33 <nav class="navbar navbar-inverse navbar-fixed-top">
34     <div class="container">
35         <div class="navbar-header">
36             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
37                 <span class="sr-only">Toggle navigation</span>
38                 <span class="icon-bar"></span>
39                 <span class="icon-bar"></span>
40                 <span class="icon-bar"></span>
41             </button>
42             <a class="navbar-brand" href="#">Project name</a>
43         </div>
44         <div id="navbar" class="collapse navbar-collapse">
45             <ul class="nav navbar-nav">
46                 <li class="active"><a href="#">Home</a></li>
47                 <li><a href="#about">About</a></li>
48                 <li><a href="#contact">Contact</a></li>
49             </ul>
50         </div><!--/.nav-collapse -->
51     </div>
52 </nav>
53 
54 <div class="container">
55 
56     <table class="table table-hover">
57         <caption>用户信息表</caption>
58         <thead>
59         <tr>
60             <th>#</th>
61             <th>用户名</th>
62             <th>电子邮件</th>
63             <th>年龄</th>
64         </tr>
65         </thead>
66         <tbody>
67         <tr>
68             <th scope="row">1</th>
69             <td>{$user}</td>
70             <td>{$mail}</td>
71             <td>{$age}</td>
72         </tr>
73         <tr>
74             <th scope="row">2</th>
75             <td>{$people.user}</td>
76             <td>{$people.mail}</td>
77             <td>{$people.age}</td>
78         </tr>
79         </tbody>
80     </table>
81 
82 </div><!-- /.container -->
83 
84 
85 <!-- Bootstrap core JavaScript
86 ================================================== -->
87 <!-- Placed at the end of the document so the pages load faster -->
88 <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
89 <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
90 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
91 <script src="http://v3.bootcss.com/assets/js/ie10-viewport-bug-workaround.js"></script>
92 </body>
93 </html>

ThinkPHP输出变量的方法：{$变量名}

ThinkPHP 视图（三）：主题

本课时讲解 ThinkPHP 视图的主题功能。

Views/config设置配置项：

//    'DEFAULT_V_LAYER'       =>  'Template',         //视图目录
//    'TMPL_TEMPLATE_SUFFIX'  =>  '.htm',             //模板文件后缀
//    'TMPL_FILE_DEPR'        =>  '_'                 //连接符
//    'VIEW_PATH'             =>  './Theme/Views'     //自定义模块视图文件目录

    'DEFAULT_THEME'         =>  'default',          // 默认主题
    'TMPL_DETECT_THEME'     =>  'true',             // 自动侦测模板主题
    'THEME_LIST'            =>  'default,jike'      // 主题列表

Views/View目录下新增default目录，jike目录，作为两个主题的目录

Views/View/default.html:

<li><a href="{:U('index',array('t'=>'default'))}">默认主题</a></li>
<li><a href="{:U('index',array('t'=>'jike'))}">极客主题</a></li>

<div class="alert alert-warning">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>default</strong> 默认主题！
</div>

ThinkPHP模板中读取变量用 {$变量名}

ThinkPHP模板中使用URL动态函数 {:U('位置','参数')} 上面代码中的array('t'=>'jike')是默认模板切换变量GET传递，相当于路径?t=default

Views/View/jike.html:

<li><a href="{:U('index',array('t'=>'default'))}">默认主题</a></li>
<li><a href="{:U('index',array('t'=>'jike'))}">极客主题</a></li>

<div class="alert alert-info">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>jike</strong> 极客主题！
</div>

页面结果：

posted @ 2016-01-10 00:06 暖风叔叔阅读(990) 评论(0) 收藏举报

刷新页面返回顶部

暖风

全栈架构

《Php笔记3.3》ThinkPHP视图——基本结构,视图变量赋值,视图渲染

ThinkPHP 视图（一）：基本结构

ThinkPHP 视图（二）：视图变量赋值和渲染

ThinkPHP 视图（三）：主题

公告