### 视图模板
[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模板内置占位变量，用于标识变化的部分。可在配置文件中修改。
所有变化的部分（主体部分）都用来替换该变量。这也是模板技术的核心。
这里只介绍视图概况和模板，其他主体部分视图将结合主体模块控制器进行对应讲解。