视图（view），MVC中的V，主要用于处理与用户之间的交互。
在我们学习的项目中，实现图片交换功能里的视图最基本要实现的功能主要表现在两个方面：
- 图片列表页
- 图片详情页
视图部分的所有代码都是围绕这两个方面来展开的。
第一个要记住的地方，用 evergrow 脚手架生成视图的四个基本文件：
Screen Shot 2017-07-04 at 4.51.05 PM.png
四个基本文件有两个~.html文件布局在view里，两个.js文件布局在public里。
同时，在浏览器里直接输入http://localhost:3000/image/page/list
就可看到默认的表格视图。
第二个要记住的，是这里的视图模板是通过模板引擎来调用的，在 image-controller.js里有体现，如下：
Screen Shot 2017-07-31 at 5.42.00 PM.png
在evergrow框架中，使用模板引擎的配置在
/system/server-manager.js 文件中，
Screen Shot 2017-07-31 at 5.50.05 PM.png
第三点要记住的，JavaScript, Html, Css 是前端开发最基础的工具，JavaScript是用来编写前端程序的脚本语言，Html语言强调的是页面布局，Css强调的是页面渲染。
同时，一键生成的四个文件中，还会用到这两个工具：
- Vue.js
- jQuery
虽然不懂，但看明白他俩都是为了前端呈现的页面更好看，更灵活，更生动而存在的补充工具或库。
最后，跟着教程走完，掉进的坑有：
1, 在表格上添加了 gender 和 url 两列数据，发现添加的两列数据放在了表格的末尾，代码添错了位置，再将代码挪到了顶部，结果才正常
Screen Shot 2017-07-31 at 4.33.13 PM.png
Screen Shot 2017-08-01 at 7.18.20 AM.png
2, 修改下拉菜单里的弹窗内容后，弹窗内容还是默认内容，修改的部分却在页面表格下方体现了出来，试了很多次，知道是代码放的位置不对，最后试出来了，但格式感觉还是与教程有点差别，不知是哪里的原因了。
Screen Shot 2017-08-01 at 11.02.32 AM.png
Screen Shot 2017-08-01 at 11.03.12 AM.png
修改profile里的东西我还真不会，再多看看代码先。
网友评论