視圖模板 · ThinkPHP5項目開發“填坑”實錄

### 視圖模板 [TOC=4,6] #### 模板設計在項目的application\index\view（存放視圖的目錄）下新建文件userlayout.html,該文件作為學生模塊的模板。 >[info] 在控制器中可以使用$this->view->engine->layout('userlayout');來使用該模板。當然，您也可以在配置文件或視圖文件中配置模板，具體參見ThinkPHP5官方教程，此處不再贅述。然后將界面視圖的公共部分（除右側內容區域以外的所有區域）放置到該模板頁面中。模板主要代碼如下： ~~~  …… <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>  </div>  </div>  </div>   <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>  <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>  </div>  <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>  <br /> </div>   <div class="span9"> {__CONTENT__} </div> </div>  </div>  </div>   <div id="footer"> <div class="container"> <hr /> <p>© all rights reserved.</p> </div>  </div>  </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模板內置占位變量，用于標識變化的部分。可在配置文件中修改。所有變化的部分（主體部分）都用來替換該變量。這也是模板技術的核心。這里只介紹視圖概況和模板，其他主體部分視圖將結合主體模塊控制器進行對應講解。