第二部分的实战
时间: 2018年04月12日
用时: 3小时
第10小节: 由于代码未写，导致在前端地址访问时，出错。
var express = require('express');
var router = express.Router();
/* GET posts page. */
router.get('/', function(req ,res ,next){
res.render('posts',{title : 'posts'});
});
// 👆 上面的这段代码以为不写也可以，最近验证才发现，这个是构建页面的代码，不可或缺
/* GET postsList 的数据. */
router.get('/list', function(req, res, next) {
res.json({ postsList : ['文章1','文章2','文章3']} );
});
// 👆上面的这段代码是将一个json对象的数据，传给前端，前端拿到之后，可以用来构建页面
module.exports = router;
-
第11小结笔记
渲染时机
什么是渲染？想要理解渲染就要理解整个从HTML生成到html显示的过程。早些时候，当用户通过浏览器访问网站时，Web服务器生成HTML 页面并返回给浏览器，浏览器拿到HTML页面后，把HTML渲染成可视化的网页。从这个角度理解，渲染只是浏览器做的事情。
但是从今天的WebApp的发展来看，渲染主要指根据数据来构建html文件，而忽略掉浏览器将html渲染成可视化页面。这个一点认知很重要。
在处理WebApp时，html 页面构成的时机主要有两种。
1.【服务器渲染】在服务器端用数据构建好页面后，再给客户端。
2.【客户端渲染】服务器先给一个基本的页面模板，然后由浏览器发起数据请求，获得数据后浏览器重新依据获得的数据再渲染页面。
这两种渲染时机存在本质的区别。
服务器渲染
服务器渲染技术意味着整个页面的构建都在服务端完成。
当用户通过浏览器发起一个打开网页的请求，WebApp收到请求后，会先去数据库抓取页面需要显示的数据，然后根据数据来构建Html，再返回给用户。
这种处理的特点是：构建整个页面的所有处理时间都在服务端。这个时间包括从数据库抓取数据和由数据构建html页面。
假如数据量大，或者构建页面的处理逻辑复杂，势必就导致一个请求在服务器的处理时间变长。
把并发请求由1个变长100000个，那么WebAPP的处理能力就很有压力，会导致宕机。
客户端渲染
还是同样的案例，当用户通过浏览器发起一个 打开网页的请求，WebAPP收到请求后，立即给出页面模板，浏览器收到页面后，再去发起数据请求，浏览器页面获得数据后，在浏览器端根据数据来渲染页面。
这种处理的特点是，WebAPP只需要返回一个基础页面的模板以及提供一个 api 供客户端抓取必要的数据。其余的都交给客户端来处理。
这种处理至少减少了构建页面的处理逻辑，当然仅仅这个作用并不能完全给WebAPP减轻压力。假如所有的瓶颈都是从数据库抓取引起的，减轻服务端渲染页面的时间并不是非常的见效。
从某种意义上讲，数据库的处理时间不管是采用服务器渲染，还是客户端渲染都没有办法改变它的性能。这是一个专门的知识点。但是至少客户端显然能减轻WebAPP的一部分压力。甚至如果把页面模板都部署到CDN节点上，服务器返回页面模板处理的压力就变成了0.
如何选择用客户端渲染还是服务器渲染技术
这并没有一个特别的标准，主要还是看需求以及技术选型。
- 如果想开发一个blog或者是论坛，服务器渲染技术就够用了，blog 和论坛都是一些相对静止的数据
- 如果想要开发一个公司的主战，就必须用服务器渲染（为啥，后面会说）
- 如果想要开发一个展示丰富化数据的页面，用客户端渲染，这样就可以在客户端做出很多动态的交互。
- 如果想开发一个页面有很多权限控制的内容，比如，聊天页面有群主，群成员等等，用客户端渲染比较好。
总之，选技术要看业务和产品经验。甚至你也可以把客户端渲染和服务器端渲染混合使用（一个页面部分内容由服务器端渲染产生，部分内容由客户端渲染产生）。
有必要考虑SEO
seo的全称是 search Engine Optimization（搜索引擎优化），当你开发一个页面希望被搜索引擎（baidu，google）收录，似乎只能考虑到服务器渲染技术。搜索引擎的爬虫系统在互联网上爬取页面数据就是往每个服务发请求，如果你的页面渲染技术是客户端渲染的，搜索引擎没有办法解释你的页面并动态判断是否还存在部分内容要进一步的去服务器端抓取数据。这势必就导致你的页面内容没有办法被收录。
但是我们又不能为了被搜索引擎收录而全部采用服务端渲染，怎么办？这要从业务角度来做一些切分。
给你一个非常直观有效的判断依据：公司的主页请求采用服务器渲染技术。其他的页面，看业务而定。
-
第12小结笔记
主要是 VUE 大写，导致 posts 页面的请求无法获取列表数据。
-
第13小结笔记
13小结的部分，通过练习，逐渐理解了post 与 get请求的意思。
但是对于代码玩的还不是非常的666，可以跟着老师的节奏，先看一下第4课程的视频。
