【myChange】change18: 你给我听好，想哭就要笑。

                
                
人生有很多次第一双。
这辈子的第一双Converse是米黄色，第一双Nike是白色，第一双adidas也是白色。
而我的第一双Vans是蓝色，第一次穿它是上周末回厦门的时候。
回厦门的周末很安逸，日子过得很安静很平淡，但是时间却过得很快。
那时候我坐在随处可见的草坪边，风把我的头发吹来吹起，我抬头看了一眼天。
我闭上眼睛，只想一直享受这样的宁静，多一分钟也好。
心里只有一句话：
“你来，我接你来，你走，我送你走”。
前段时间有人对我说，你不适合去工作去创业，回永安比较好。
但我不想自己什么结果都没有得到就回到起点，只想自己能够尽力去做，毕竟是自己喜欢的工作。
最近学到了很多细微的小知识点。所以继续上次的node的话题。
如果想要用es6写一个爬虫要怎么搞？
先新建一个项目，并且npm i 两个重要的依赖。
                
                
                
                
这两个依赖后面的参数是--save，所以它们会保存到package.json的dependencies里。
如果后面的参数是--save-dev，它们则会保存到devDependencies里。
这两个的区别是，dependencies是运行依赖，devDependencies是开发依赖
运行依赖就是，别人拿到你的项目的时候为了能够直接运行所需要的依赖。
开发依赖就是，别人拿到你的项目之后需要自行手动npm i才能安装所需要的依赖。
那我们安装的superagent 和 cheerio 都是什么呢。
superagent 是一个专注于处理服务端/客户端的http请求的第三方模块。
cheerio一个类似于jq的类库。
我们在我们的爬出js中引入它们，并且声明我们要爬的网站的网址。
                
                
然后用superagent处理服务端/客户端的http请求，上面的url是慕课网的js视频教程的网址。
利用superagent简介的api就能模拟请求。
                
                
编译后，我们发现log出了页面的html源码，好大一堆。
                
                
然后我们设计一个函数，getInfo()，利用这个函数来获取想要的数据，并在请求的end()中调用它。
                
                
并且根据cheerio的语法，输出所有a标签的text，又是好大一堆。
                
                
现在先让我们来看看，我们到底要爬一些什么数据呢？
                
                
我们想要的是一个包括每个课程的名称、课程学习人数、课程的视频链接的数组。
我们注意到我们要的信息的都在一个目标div: ".moco-course-wrap"里。
所以，我们循环所有 ".moco-course-wrap" ，找到所要的数据对应的标签，取到内容后，构造我们需要的json就可以了。
                
                
类似这样，我们就能得到我们要的数组了。
                
                
上次说node的时候，已经基本解决了前端自动测试接口的问题，现在想细化说说流程。
------------------------------------------------------ 重点来了 ------------------------------------------------------------
这次，就2个独立的项目 A（spa）和 B（多页），讲解一些前端利用node模拟服务端的数据流。
1.抛开前端框架的数据流，先考虑服务端到客服端的数据流要怎么做。
先简单介绍下这个项目，就叫它A项目吧(顺带一提是spa)。它的基本目录结构如下：
                
                
server目录是模拟服务器的M层和C层，src目录就是实际的前端页面目录V层。
那么每个目录是如何进行数据通信的呢？大概数据流程如下图：
                
                
通过这样的数据方式，我们通过npm run mock指令，就能打开node服务器。
```
mock: "NODE_ENV=dev supervisor ./server/model/app.js"
```
因为app.js中监听了1515端口
```
app.listen(1515);
```
所以会在命令行看到server is running，则说明node服务器已经跑起来了。
                
                
这样就可以在前端直接进行数据流的接口测试。
2.在A项目中，由于使用了vuex，可能会给api的请求多套了一层action。
原本是在需要接口请求的页面的js中【直接引入api层】，
数据流是 api.js → js
（api层是为了把处理接口的部分解耦出来单独放在api.js文件中）。
现在，需要接口请求的页面的js中【直接引入action文件】，然后在【action文件里引入api层】。
数据流是 api.js → action.js → js
（action是vuex专门用来处理异步请求的模块）。
此时，vuex的目录如下：
                
                
-- action 文件夹的设置是因为项目太大，所以分模块管理 action.js 文件，
最后把 action 文件夹中的 action.js 合并到 vuex/action.js 中去。
-- module 文件夹也是同理处理 store & mutation ，并合并到vuex/store.js中去。
所以最后利用了vuex之后会使api过来的数据流变成如下：
                
                
不得不说，A项目的数据流实现过程比较像MVC，
然而如果前后端分离并不明显的话，就比如下面的这个B项目，那么它的MVC就不明显了。
3.如果一个项目是不完全的前后端分离怎么办呢？
比如：B项目就不是一个完全的前后端分离（多页应用）。前端的所有操作都是在src目录下进行。
目录结构如下：
                
                
和A项目不同的地方就是，src/mock中把 Controller层 和 Model层合并了。
但是数据流的基本思路没有变。
                
                
你会发现数据流变得复杂了起来。但是文件解耦了。
想要展现我的数据流给一个完全不了解项目的人看，所以就自己画了示意图。
也不知道有没有把内容都说清楚，如果不够直观，尽可指教。