### 前端视图
[TOC=4,6]
#### 设计思路
那么学生模块的前端视图到底应该事什么样子呢?这是首先需要填的“坑”。其实本系统说白了就是一个信息管理系统,学生是该系统的的一种用户,那么系统需要为其提供便捷的使用方式。最好在一个统一的界面里解决所有的问题。所以,借鉴微博或博客以及其它信息系统的个人中心界面来完成本系统的学生模块的视图界面比较合适。下面先看看成品,如下图:
![](https://box.kancloud.cn/016265db32d0118d763ca799ed1777a6_1387x783.png)
该个人中心视图插件名为matrix-admin,来源于网络下载,下载后目录结构如下:
![](https://box.kancloud.cn/d122eb15681bb7cf6fa1e9cbe604fe95_627x235.png)
可以看出,其中包括CSS,JS,img,font,用户账户设置界面(account.html),图表(charts.html),常见问题(faq.html),表格(grid),登录界面(login.html)和计划界面(plans.html), 个人中心界面(index.html),完全可以满足我们的需求。下载后,我们需要把这些文件融入到我们的项目中。
#### 插件融入项目
同样的,我们将下载的前端插件放入项目的 public/static/vendor目录下,该目录中存放的都是前端第三方扩展插件。插件目录为 public/static/vendor/matrix-admin目录结构如下图所示:
![](https://box.kancloud.cn/05debdbcbfe1019eb85c24c23dc7d847_243x259.png)
学生界面风格统一,当学生点击左侧不同的菜单,右侧显示不同的内容。由于大部分内容都相同(左侧、头部和尾部),所以这时候需要使用模板技术。