### 視圖模板
[TOC=4,6]
#### 模板設計
在項目的application\index\view(存放視圖的目錄)下新建文件userlayout.html,該文件作為學生模塊的模板。
>[info] 在控制器中可以使用$this->view->engine->layout('userlayout');來使用該模板。當然,您也可以在配置文件或視圖文件中配置模板,具體參見ThinkPHP5官方教程,此處不再贅述。
然后將界面視圖的公共部分(除右側內容區域以外的所有區域)放置到該模板頁面中。模板主要代碼如下:
~~~
<!--引入依賴的CSS文件-->
……
<link href="__PUBLIC__/static/vendor/matrix-admin/css/font-awesome.css" rel="stylesheet" />
……
<!--頭部固定導航條-->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./">DC 學生作業管理系統</a>
<div class="nav-collapse">
<ul class="nav pull-right">
<li>
<a href="#"><span class="badge badge-warning">7</span></a>
</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle " href="#">
{$stuname} <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="./account.html"><i class="icon-user"></i> 賬戶設置 </a>
</li>
<li>
<a href="./account.html"><i class="icon-lock"></i> 修改密碼</a>
</li>
<li class="divider"></li>
<li>
<a href="./logout"><i class="icon-off"></i>退出</a>
</li>
</ul>
</li>
</ul>
</div> <!-- /nav-collapse -->
</div> <!-- /container -->
</div> <!-- /navbar-inner -->
</div> <!-- /navbar -->
<!--主體部分-->
<div id="content">
<div class="container">
<div class="row">
<!--左側導航區-->
<div class="span3">
<div class="account-container">
<div class="account-avatar">
<img src="__PUBLIC__/static/vendor/matrix-admin/img/headshot.png" alt="" class="thumbnail" />
</div> <!-- /account-avatar -->
<div class="account-details">
<span class="account-name">{$stuname}</span>
<span class="account-role">學生</span>
<span class="account-actions">
<a href="javascript:;">個人信息</a> |
<a href="javascript:;">設置</a>
</span>
</div> <!-- /account-details -->
</div> <!-- /account-container -->
<hr />
<ul id="main-nav" class="nav nav-tabs nav-stacked">
<li class="{$index}">
<a href="./{$Request.session.stuno}.html">
<i class="icon-home"></i>
已完成作業
</a>
</li>
<li class="{$newtasks}">
<a href="./newtasks.html">
<i class="icon-pushpin"></i>
未完成作業
<span class="label label-warning pull-right">{$num}</span>
</a>
</li>
<li class="{$account}">
<a href="./account.html">
<i class="icon-user"></i>
賬戶設置
</a>
</li>
</ul>
<hr />
<div class="sidebar-extra">
<p>
您可以使用本系統查看老師布置的作業,完成它們并提交到數據庫中,并實時的查看老師給你的評分。
</p>
</div> <!-- .sidebar-extra -->
<br />
</div> <!-- /span3 -->
<!--右側內容區-->
<div class="span9">
{__CONTENT__}
</div>
</div> <!-- /row -->
</div> <!-- /container -->
</div> <!-- /content -->
<!--尾部版權聲明區-->
<div id="footer">
<div class="container">
<hr />
<p>© all rights reserved.</p>
</div> <!-- /container -->
</div> <!-- /footer -->
</body>
</html>
~~~
#### 代碼解析
1、引入CSS
首先需要引入視圖模板所依賴的CSS文件,如引入字體樣式font-awesome.css,對應的代碼為:
~~~
<link href="__PUBLIC__/static/vendor/matrix-admin/css/font-awesome.css" rel="stylesheet" />
~~~
2、固定在頭部的導航條——`<div class="navbar navbar-fixed-top">`
頭部的導航條包括系統的名稱、快捷用戶操作的下拉菜單。
3、左側導航區——`<div class="span3">`
其中包括,用戶信息(頭像、姓名、快捷設置菜單等)、導航菜單(已完成作業、未完成作業、賬戶設置)
4、右側主體內容區——`<div class="span9">`
根據用戶點擊不同的菜單加載不同的內容。
#### 變量解析
代碼中有很多ThinkPHP視圖變量,這些需要在控制器中給其賦值,視圖變量包括:
1、$stuname——學生姓名
2、$Request.session.stuno——保存在Session中的學生學號(參考官方教程中Session的用法)
3、$index、$newtask、$account
這些變量主要是配合前端的導航菜單,當用戶訪問哪個控制器,就在哪個控制器中將相應的變量賦值為"active",這樣,該菜單項就變成黑色,以標識當前正在訪問的就是該菜單項。
>[info] 如當用戶訪問 http://localhost/dc/student/index 的時候,在student模塊的index控制器中使用代碼**$this->assign('index','active');**將視圖中的**$index**變量設置為**active**,那么其前端代碼`<li class="{$index}">`會被服務器轉換成`<li class="active">`,從而可以標識當前菜單為活動菜單。這也是在項目開發中的一個**常用技巧**。
4、`{__$CONTENT__}`——ThinkPHP模板內置占位變量,用于標識變化的部分。可在配置文件中修改。
所有變化的部分(主體部分)都用來替換該變量。這也是模板技術的核心。
這里只介紹視圖概況和模板,其他主體部分視圖將結合主體模塊控制器進行對應講解。