Koa初探

Koa中间件(img)：

中间件的定义
中间件的原理
中间件如何实现自定义的中间件

koa-generator(img)

安装：npm install -g koa-generator

创建项目

koa2 -e koa2-learn
初始化目录：-e表示我的模版引擎使用ejs，如果不加的话，就不是ejs模版引擎,
cd koa2-learn
npm install
npm install --update-binary
npm start koa2-learn
localhost:3000

注意：

1. 运行的时候利用npm run dev，才能实现改变服务端代码后自启动，例如，在routes中的index.js文件，添加console.log(‘a’)，利用npm run dev 才能输出
2. package.json中的scripts里面的内容：
    dev，prd是--> npm run dev/npm rev prd,，
    start和test都是 --> npm start/npm test，中间没有run

异步(img)

异步的概念和场景

aysnc await 与promise对象的区别

promise是一直利用then实现异步
async: 代码视觉上同步，但是还是进行的异步操作，A先执行，然后A执行完B再执行，然后B执行完，C再执行（A,B,C是promise对象）

例1：

async ((ctx, next) => {
const a = await A;
const b = await B;
const c = await C;
})

例2：

router.get('/testA', async (ctx) => {
  const a = await new Promise((resolve, reject) =>{
    global.console.log('start' + new Date().getTime());
    setTimeout(()=>{
       global.console.log('a' + new Date().getTime());
       resolve('abc');
    }, 1000)
  })
  ctx.body = {
    a,
  }
})
//浏览器，输入：localhost:3000/testA -----> 1s后才显示结果abc
//而且两次时间差，差不多为1s

注意：

aysnc 有await可以没有，但是要是有await，async就必须要有
await 后面是promise对象,如果不是的话，会转化为 promise.resolve(.....)

koa2中间件(img)

例如app.js文件中的const views = require('koa-views') ，const json = require('koa-json')等都是中间件
详细解释：
- koa其实就是一个服务端框架
- 作用：接受来自浏览器的请求，然后经过自己内部的硬转，最后给浏览器一个响应
  洋葱每个环状都是中间件，中间件引入肯定是有顺序的，但是use的时候是没有顺序的，
  但是如何保证引用的顺序不一样，但是执行的顺序没有差别呢，也就是理解画圈的原因
官网：https://koa.bootcss.com/

使用：

例1：

koa-pv.js:

  // 这个函数用来执行app中间处理过程的
function pv(ctx){
  //ctx: 进入app中会有一个对象，这个对象会挂载着所有的信息，信息包括两方面，一个是request信息，一个是response信息，所以这个对象是个全局的对象，在整个app中都是能拿到的, 
  //在洋葱图中，最终间是app的处理过程，在处理过程中ctx维持着两方面（request进和response出）的信息，被各个中间件所引用
  global.console.log('pv' , ctx.path);
  // path表示当前页面路径
}

  // 导出处理过程：

  // 导出是函数原因：因为app.use()中传进去的参数是一个函数，所以导出是个函数
module.exports = function(){
        // 导出异步函数
    return async function(ctx, next){
        // 下面这两行就是我当前中间件执行完，交给下一中间件处理
        pv(ctx)
        await next()//这个next如果没有，那么它就不会进去洋葱中里面的圈圈，直接返回出去了
    }
}

app.js:

const pv = require('./middleware/koa-pv.js');
app.use(pv());

例2：

（1）middleware/m1.js:
    function m1(ctx){    
        global.console.log('m1' , ctx.path);
    }
    module.exports = function(){
        return async function(ctx, next){
          //进入这个中间件开始
            global.console.log('a');       
          //处理过程
            m1(ctx)
          //交给下一个中间件
            await next()
        //如果没有next的话，输出结果就为a ae，因为没有交个下一个中间件，直接就出去了
          //出这个中间件
            global.console.log('aE');
        }
        
    }
    middleware/m2.js:和m1内容一样，不过函数名不一样
    middleware/m3.js:和m1内容一样，不过函数名不一样

（2）app.js引入：
    const m1 = require('./middleware/m1.js');
    const m2 = require('./middleware/m2.js');
    const m3 = require('./middleware/m3.js');
    app.use(m1());
    app.use(m2());
    app.use(m3());

    （3）npm run dev
    （4）刷新页面：
    （5）返回结果：   a ->  b  -> c  -> ce  -> be  -> ae

中间件原理：

虽然引入中间件顺序不一样，但是每个中间件都会一进一出
就比如：假如我m1给ctx上面加一个东西，但是怕m2给改掉，
但是其实，执行完2，还是会回到1的，这样就可以保证，
虽然你的顺序比我靠后，但是你处理完还会交给我，保证了平等

注意：
- 只要是到达服务器的请求都会执行中间件
- 要是没有await next()这个的话，就会报错，从这个中间件往下的中间件都没法执行

路由(imgs)

网站：https://github.com/ZijianHe/koa-router

例1：介绍routes下的index.js文件部分代码：

（1）利用koa-router中间件生成一个实例，然后在实例上就会有两个方法（get/post）
      const router = require('koa-router')()
（2）定义路径的名称，路径对应的操作过程
    router.get('/', async (ctx, next) => {
        //ctx.render:  渲染页面 
      await ctx.render('index', {
        title: 'Hello Koa 2!'
      })
    })
    //请求  /string，返回页面内容为'koa2 string'
    router.get('/string', async (ctx, next) => {
      //返回接口的, 字符串类型
      ctx.body = 'koa2 string'
    })
    //请求  /json，返回页面内容为'koa2 json'
    router.get('/json', async (ctx, next) => {
      //返回接口的, JSON类型
      ctx.body = {
        title: 'koa2 json'
      }
    })
（3）导出实例
    module.exports = router
（4）app.js文件导入模块
    const index = require('./routes/index')
    const users = require('./routes/users')
（5）中间件生效
    app.use(index.routes(), index.allowedMethods())
    app.use(users.routes(), users.allowedMethods())

例2：介绍routes下的users.js文件部分代码：

const router = require('koa-router')()
  //在index.js文件中没有的部分：前缀
  //意思为，用这个路由的时候，一定要在前面加上users这个路径
router.prefix('/users')

router.get('/', function (ctx, next) {
  ctx.body = 'this is a users response!'
})

调用：
http://localhost:3000/users得到的就是--->this is a users response!

cookie和session(imgs)

网站： https://koa.bootcss.com/

写cookies

用法：

          cookie： 名，   值，    cookie选项
ctx.cookies.set('name', 'tobi', { signed: true });

例1：index.js中进行操作，只要访问首页就种一个cookies

router.get('/', async (ctx, next) => {
    // 只要访问首页就种一个cookies
  ctx.cookies.set('pvid' , Math.random())
  await ctx.render('index', {
    title: 'Hello Koa 2!'
  })
})

读cookies用法：

例1：访问http://localhost:3000/json，会把cookies的值读出来

router.get('/json', async (ctx, next) => {
  ctx.body = {
    title: 'koa2 json',
    cookie: ctx.cookies.get('pvid')
  }
})

koa-passport：https://segmentfault.com/a/1190000011557953

努力努力再努力LFY

发布了53 篇原创文章 · 获赞 12 · 访问量 9910

私信关注