六、案例地址
https://gitee.com/wu_yuxin/echarts-learning.git
分为三部分代码
原生(jQuery)编写的一个小项目
echarts基础
echarts-online实例
七、案例内后端部分-KOA2的使用
1、KOA2的介绍
基于 Node.js 平台的Web服务器框架
由 Express 原班人马打造
Express Koa , Koa2 都是 Web 服务器的框架,他们之间的差别和关系可以通过下面这个表格表示出
框架名 作用 异步处理
Express web 框架 回调函数
Koa web 框架 Generator yield
Koa2 web 框架 async/await
环境依赖 Node v7.6.0 及以上
由于 Koa2 它是支持 async 和 await ，所以它对 Node 的版本是有要求的，它要求 Node 的版本至少是在7.6级以上,因为语法糖 async和await 是在 Node7.6 版本之后出现才支持
洋葱模型的中间件
如下图所示, 对于服务器而言，它其实就是来处理一个又一个的请求， Web 服务器接收由浏览器发过来的一个又一个请求之后，它形成一个又一个的响应返回给浏览器. 而请求到达我们的服务器是需要经过程序处理的,程序处理完之后才会形成响应，返回给浏览器，我们服务器处理请求的这一块程序，在 Koa2 的世界当中就把它称之为中间件
这种中间件可能还不仅仅只有一个，可能会存在多个，比如上图所示, 它就存在三层中间件，这三层中间件在处理请求的过程以及它调用的顺序为:
当一个请求到达咱们的服务器，最先最先处理这个请求的是第一层中间件
第一层的中间件在处理这个请求之后，它会把这个请求给第二层的中间件
第二层的中间件在处理这个请求之后，它会把这个请求给第三层的中间件
第三层中间件内部并没有中间件了, 所以第三层中间件在处理完所有的代码之后，这个请求又会到了第二层的中间件，所以第二层中间件对这个请求经过了两次的处理
第二层的中间件在处理完这个请求之后，又到了第一层的中间件, 所以第一层的中间件也对这个请求经过了两次的处理
这个调用顺序就是洋葱模型, 中间件对请求的处理有一种先进后出的感觉，请求最先到达第一层中间件，而最后也是第一层中间件对请求再次处理了一下
2、KOA2的快速上手
如何对 Koa2 进行快速的上手呢?需要有如下几个步骤
检查 Node 的版本
node -v 的命令可以帮助我们检查 Node 的版本, Koa2 的使用要求 Node 版本在7.6及以上
安装 Koa2
npm init -y
这个命令可以快速的创建出 package.json 的文件, 这个文件可以维护项目中第三方包的信息
npm install koa
这个命令可以在线的联网下载最新版本 koa 到当前项目中, 由于线上最新版本的 koa 就是koa2 , 所以我们并不需要执行 npm install koa2
如果下载特别慢的话, 需要将 npm 的下载源换成国内的下载源, 命令如下
npm set registry https://registry.npm.taobao.org/
编写入口文件 app.js
创建 Koa 的实例对象
// 1.创建koa对象
const Koa = require('koa') // 导入构造方法
const app = new Koa() // 通过构造方法, 创建实例对象
编写响应函数(中间件)
响应函数是通过use的方式才能产生效果, 这个函数有两个参数, 一个是 ctx ,一个是 next
ctx :
上下文, 指的是请求所处于的Web容器,我们可以通过 ctx.request 拿到请求对象, 也可以通过 ctx.response 拿到响应对象
next :
内层中间件执行的入口
代码语言：javascript复制// 2.编写响应函数(中间件)
app.use((ctx, next) => {
console.log(ctx.request.url)
ctx.response.body = 'hello world'
})指明端口号
通过 app.listen 就可以指明一个端口号
// 3.绑定端口号 3000
app.listen(3000)
启动服务器
通过 node app.js 就可以启动服务器了
随即打开浏览器, 在浏览器中输入 127.0.0.1:3000/ 你将会看到浏览器中出现 hello world 的字符串, 并且在服务器的终端中, 也能看到请求的 url
3、KOA2中间件的特点
Koa2 的实例对象通过 use 方法加入一个中间件
一个中间件就是一个函数,这个函数具备两个参数,分别是 ctx 和 next
中间件的执行符合洋葱模型
内层中间件能否执行取决于外层中间件的 next 函数是否调用
调用 next 函数得到的是 Promise 对象, 如果想得到 Promise 所包装的数据, 可以结合 await 和 async
