Koa2框架从0开始构建预告片网站

314 阅读7分钟

学习总结

1、课程地址:coding.imooc.com/learn/list/…

2、1~4、7章是 node 基础,需记于脑海。5~6章是网站项目的工程搭建和数据(使用爬虫)准备。8~9章是 node 核心教程,需要多查资料,特别是 koa-router 的高阶用法——装饰器Decorator(没看懂)。10~12章是项目前端网页的内容,加速浏览跳过。13章是发布脚本和部署,需要练习(可以去 github 上找别人的模板)。

14 Koa 课程总结

1、

a8916e71ee2dfe0c8b7882df729f3684

13 服务器部署与发布

1、nginx:前端静态资源(结合 cdn)、后端接口 proxy;

2、deploy.yaml:发布脚本,使用pm2来部署。(pm2除了守护node,还能部署 node???)

12 实现后台登录权限与管理功能

1、koa-bodyparser

2、koa-logger

11 实现网站前端路由与页面功能

1、axios:也可用在node 环境。

10 集成 AntDesign 与 Parcel 打通前后端与构建

1、前端项目创建。

2、使用 Parcel 在开发与生产环境的构建中间件:parcel-bundler

9 为网站增加路由与控制器层对外提供 API 服务

1、

2、koa-router:

const Router = require('koa-router'');
const router = new Router();

router.get('/test', async (ctx, next) => {
    // ...
    ctx.body = ...;
});

router.get('/test/:id', async (ctx, next) => {
    // ...
    ctx.body = ...;
});

module.exports = router;
import router from './routes';  // 引入上面自己实现的路由

app
    .use(router.routes())   // 加载路由
    .use(router.allowedMethods());  // 加载 router 默认的方法

3、url 的规则:get、post 级联;

4、router 的使用中间件,或自己加中间件函数,参考之前学习的 next);

5、子路由:const router = new Router({ prefix: '/test'}),省略重复书写路由前缀 /test 方便管理;

6、装饰器:对路由进行拆分和集成,需要安装 babel 插件。拿到装饰器的对象及属性,对对象额外添加属性能力。

7、对类进行装饰:分配 前缀/空间。对函数进行装饰:指定子路由的实现函数。

8、装饰器的Decorator:(看得头晕)

9、路由层:对外提供接口。

10、服务层:对路由层提供服务。

11、ramda:函数式编程,减少手写 use方式引入中间件。

8 使用 mongoose

1、config、init、connect、lister

2、mongoDB是从设计角度:document>collection>database,类似 mysql 中的 row>table>database。mongoose是从使用代码角度的:schema、model、entity。

3、

7 深度理解Node

1、从异步非阻塞的代码案例切入事件循环:EventEmitter:on、emit

2、从 libuv 源码理解 event loop 的6个阶段:为什么是单线程、优先级。

3、nextTick>resolve>nextTick>timers>i/o>setImmediate>timers

4、(设计一个测试用例来验证自己对事件循环的理解)

5、

6、单线程多进程模型 事件循环及进程通信,横向扩展。

7、cluster模式:fork、主进程master、子进程worker。疑问:子进程执行的代码和主进程的在一起?能否指定子进程的代码文件。

6 利用爬虫搞定网站基础数据

1、puppeteer:爬虫脚本

2、child_process fork 子进程来运行脚本

3、进程的9个问题:同步异步、异步IO、阻塞非阻塞、事件循环与事件驱动、单线程、进程、子进程、进程间通信

4、服务端通过 request 向豆瓣API请求数据:request-promise-native,将异步request转为同步的

5、与妹子合租引起的同步异步与阻塞:

5 从0开发一个电影预告片网站

1、npm init:初始化项目。

2、结合 bootstrap,返回 html 页面。

3、使用 ejs:支持变量的 html 模板。

4、使用 Jade(Plug):

5、consolidate:模板引擎整合库。

6、koa-views:视图管理模块,自动引入指定目录下的所有模板文件,同时将 render函数挂载到 ctx 上。

7、pug的继承介绍及实例。

8、(跳过使用 pug、bootstrap 搭建静态项目首页)

9、构建工具Parcel:无配置、自带默认场景、完全傻瓜式配置。

10、koa-static:

3-7 session-cookie-路由

3-6 纯函数-尾递归和魔法大师 koa-compose

1、纯函数的概念:

2、尾递归:

3、koa-compose:把一个个不想干的中间件串起来,上一个函数的输出结果就是下一个函数的输入参数。

3-5 Koa中间件middlewares

1、koa中,一切 use 的均是中间件!

2、中间件格式:

const mid = async (ctx, next) => {
    // 其他代码
    await next();   //串联中间件
}

3、每次中间件执行顺序,是根据 use添加的顺序。

4、中间件A内部调用 await next()后,会跳转到下一个中间件进行执行。如果没有调用 next 则中断后续中间件执行,然后逐级按照调用 next 的顺序逆向返回之前中间件函数内部,意思是当中间件A 调用 next 后会转到中间件B 执行,这时 B 调用 next 继续执行后续中间件。如果后面没有中间件了,则返回 A 继续执行next 后的函数代码。

5、简单的说,next 是用来移交当前的控制权的,中间件数组是先进后出。

6、以 kog-logger 来进一步解释 next 的原理。

3-5 HTTP响应对象response(res)

1、 res 是挂载在 ctx 对象上的,可以通过打印 ctx 查看

3-4 HTTP请求对象request(req)

1、req 是挂载在 ctx 对象上的,可以通过打印 ctx 查看

3-3 HTTP上下文对象context(ctx)

1、

3-2 服务类Application

1、依赖包介绍

2、use:添加自定义函数到中间件列表 middleware 中;

3、listen:创建 http 对象,并开启监听;

4、callback、handleRequest:收到请求后,从 middleware 中拿出自定义函数, 并将请求对象 ctx 交给自定义函数处理,等待自定义函数处理完之后,然后交回 ctx 控制权并返回 response。

5、application 的作用:接收中间件,监听端口,接收http 请求并逐步调用中间件,最后handleResponse。

6、在网络上找更详细的内部流转流程图进行学习。

3-1 Koa核心对象

1、HTTP 接收、解析、响应:中间件、执行上下文;

2、Application:

3、Context:

4、Request:

5、Response:

6、Middlewares:

7、Session:

8、Cookie:

const Koa = require('koa');
const app = new Koa();

app.use(async (ctx, next) => {
    ctx.body = 'Hi Luke';
});

app.listen(2333);

2-6 生产环境使用 Babel 编译执行代码

1、rimraf:删除目录。

2、babel-plugin-transform-runtime : babel 的编译运行环境。

3、babel-plugin-runtime:babel 的运行环境。

4、在 .babelrc 中添加 plugin 支持。

2-5 开发环境使用 Babel 编译 import 和 export

  • require:运行时加载。
  • import:静态加载。

1、安装 babel:yarn add -D babel-cli babel-preset-env

2、项目根目录新增文件.babelrc,增加对应配置项。

3、nodemon:监视node.js应用程序中的任何更改并自动重启服务,非常适合用在开发环境中。

4、注意 default 和别名的使用技巧。

2-4 异步函数Async Function

2-3 箭头函数

  • this:箭头函数里的 this 是指函数定义时所在作用域的 this,而不是运行时作用域的 this。

2-2 co库执行 promise 和 generator

  • co:TJ大神的作品。

2-1 生成器函数 Generator Function

  • 迭代器:关键点是next、done
  • 生成器:简化迭代器的创建过程,关键点是*和 yield。yield 是用来等待函数执行完成

1-3 推荐使用Promise

  • callback:在Node中异步回调有一个约定:Error first,也就是说回调函数中的第一个参数一定要是Error对象,其余参数才是正确时的数据。所以先判断 error,如果没有出错再进行后续操作。
  • promise:使用return new Promise 来取代 callback。
  • promiseify:util.promisify 的那些事儿

1-2 安装 Node 版本

  • 多用 LTS 版本,本地和服务器尽量保持一致。
  • 使用 nvm 来管理 node 版本,可在本地切换最新版本学习新特性。
  • node 版本支持 ES 特性列表