2021-08-08(6/20)

---

---

https://www.bilibili.com/video/BV1Pt411Y7NA?p=6

训练1：引入koa ，配置中间件

packiage.json生成，npm koa

npm init 
生成packiage.json

npm install koa --save

express写法：

//引入koa
const koa=require('koa');
const app=new koa();

//配置中间件（可以先当路由）
app.use(function(req,res){
    res.send('返回数据')
})

//监听端口
app.listen(3000);

koa写法：

//引入koa
const koa=require('koa');
const app=new koa();

//配置中间件（可以先当路由）
app.use(async(ctx)=>{
    ctx.body='hello world';
})

//监听端口
app.listen(3000);

koa准备工作，es6常见写法：

let,const,var

let a=123;//和var一样的，let是一个块作用域

console.log(a)

区别，let和var：（let)实现不了

if(true){
    let a=234;

}
console.log(a);

var:

if(true){
    var a=123;
}
console.log(a);

const是定义常量

const pi=3.1415;
console.log(pi);

一般写法：

var name='张三';
var age=20;
console.log(name+'的年龄是'+age);

模板字符串：

var name='张三';
var age=20;
console.log(`${name}的年龄是${age}`);

方法的简写，属性的简写

一般写法：

var name='zhangsan';
var app={
    name:name

}
console.log(app.name);

es6简写：

var name='zhangsan';
var app={
    name
}
console.log(app.name);

一般写法：(注意：这个是错的）

var name='zhangsan';
var app={
    name,
    run:function () {
        console.log('run')
    }
}
console.log(app.run());

一般写法：

var name='zhangsan';
var app={
    name,
    run:function () {
        console.log('run')
    }
}
app.run();

es6简写:

var name='zhangsan';
var app={
    name,
    run:function () {
        console.log(`${this.name}在跑步`)
    }
}
app.run();

箭头函数

一般写法：

setTimeout(function () {
    console.log('执行')
},1000)

es6:

setTimeout( ()=> {
    console.log('执行')
},1000)

回调函数：

function getData(callbck){
    setTimeout(function(){
        var name='zhangsan';
        callbck(name);
    },1000)

}
getData(function(data){
    console.log(data+'1111')
})

promise同样可以实现

function getData(resolve,reject){
    setTimeout(function(){
        var name='张三';
        resolve(name)
    },1000)

}
var p=new Promise(getData);
p.then((data)=> {
    console.log(data);

})

提升：

var p=new Promise(function(resolve,reject){
    setTimeout(function () {
        var name='张三';
        if(Math.random()<0.7){
            resolve(name);
        }
        else{
            reject('fail')
        }
    },1000)
})

p.then((data)=>{
    console.log(data)
})

async，await

一般写法：

function getData(){
    return '这是一个数据'
}

console.log(getData())

async，async是让方法变成异步

async function getData(){
    return '这是一个数据'
}
console.log(getData())

如何获取async异步方法里面的数据的第一种方法

async function getData(){
    return '这是一个数据'
}
var p=getData()
p.then((data)=>{
    console.log(data)
})

await是等待异步方法执行完成

可以获取异步方法里面的数据，但必须得用在异步方法里面

async function getData(){
    return '这是一个数据'
}
async function test(){
    var d=await getData()
    console.log(d)
}
test()

async function getData(){
    console.log(2)
    return '这是一个数据'
}
async function test(){
    console.log(1)
    var d=await getData()
    console.log(d)
    console.log(3)
}
test()

function getData(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            var username='张三';
            resolve(username)
        },1000)

    })
}

var p=getData()
p.then(function(d){
    console.log(d)
})

function getData(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            var username='张三';
            resolve(username)
        },1000)

    })
}
async function test(){
    var data=await getData()
    console.log(data)
}
test()

koa路由

路由是由一个url（路径)和一个特定的http方法（get,post等)组成，涉及到应用如何响应客户端对某个网站节点的访问4

路由就是根据不同的url地址，加载不同的页面实现不同的功能

koa路由和express有所不同，在express中直接引入express就可以配置路由，在koa中我们需要安装koa-router模块

npm install --save koa-router

//引入koa模块
var Koa=require('koa');
var Router=require('koa-router');
//实例化
var app=new Koa();

var router=new Router();
//ctx 上下文context 包含了request和response等信息
//配置路由
router.get('/',async(ctx)=>{
    ctx.body='首页';
    })
router.get('/news',async(ctx)=>{
        ctx.body="这是一个新闻页面"
})
app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000);

可以这么写：

/**
 * Created by Administrator on 2018/3/12 0012.
 */

//引入 koa模块

var Koa=require('koa');

var Router = require('koa-router');

//实例化
var app=new Koa();

var router = new Router();


//ctx  上下文 context ，包含了request 和response等信息

//配置路由
router.get('/',async (ctx)=>{

    ctx.body='首页'; /*返回数据    相当于：原生里面的res.writeHead()     res.end()*/
}).get('/news',async (ctx)=>{

    ctx.body="这是一个新闻页面"
})
//启动路由

app
    .use(router.routes())   /*启动路由*/
    .use(router.allowedMethods());   /*可以配置也可以不配置,建议配置，*/


/*
 router.allowedMethods()作用： 这是官方文档的推荐用法,我们可以
 看到 router.allowedMethods()用在了路由匹配 router.routes()之后,所以在当所有
 路由中间件最后调用.此时根据 ctx.status 设置 response 响应头
*/

app.listen(3000);

当在

router.get('/news',async(ctx)=>{
        ctx.body="这是一个新闻页面"
    console.log(ctx.query);
})

http://localhost:3000/news?aud=123

控制台：[Object: null prototype] { aud: '123' }

http://localhost:3000/news?aud=123&name=zhangsan

控制台：[Object: null prototype] { aud: '123', name: 'zhangsan' }

router.get('/news',async(ctx)=>{
        ctx.body="这是一个新闻页面"
    console.log(ctx.querystring);
})

http://localhost:3000/news?aud=123&name=zhangsan

控制台：aud=123&name=zhangsan

router.get('/news',async(ctx)=>{
        ctx.body="这是一个新闻页面"
    console.log(ctx.request);
})

 http://localhost:3000/news?aud=123&name=zhangsan

控制台：

{ method: 'GET',
  url: '/news?aud=123&name=zhangsan',
  header:
   { host: 'localhost:3000',
     connection: 'keep-alive',
     'cache-control': 'max-age=0',
     'sec-ch-ua':
      '"Google Chrome";v="89", "Chromium";v="89", ";Not A Brand";v="99"',
     'sec-ch-ua-mobile': '?0',
     'upgrade-insecure-requests': '1',
     'user-agent':
      'Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36',
     accept:
      'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
     'sec-fetch-site': 'none',
     'sec-fetch-mode': 'navigate',
     'sec-fetch-user': '?1',
     'sec-fetch-dest': 'document',
     'accept-encoding': 'gzip, deflate, br',
     'accept-language': 'zh-CN,zh;q=0.9,en;q=0.8' } }

router.get('/news',async(ctx)=>{
        ctx.body="这是一个新闻页面"
    console.log(ctx.request.url);
})

控制台：/news?aud=123&name=zhangsan

 router.get('/news/:aid',async(ctx)=>{
        ctx.body="这是一个新闻页面"
    console.log(ctx.request.url);
})

 http://localhost:3000/news/1

 实现了动态路由

koa中间件

中间件就是匹配路由之前或者匹配路由完成做的一系列操作，我们可以把他们成为中间件

在express中间件（middleware)是一个函数，他可以访问请求对象（request object（req)),响应对象（response object(res))，和web应用中处理请求---响应循环流程中的中间件，一般被命名为next的变量。在koa中中间件和express优点类似

中间件的功能包括：

执行任何代码

修改请求和响应对象。
终结请求-响应循环。
调用堆栈中的下一个中间件。

如果我的 get、post 回调函数中，没有 next 参数，那么就匹配上第一个路由，就不会往下匹
配了。如果想往下匹配的话，那么需要写 next(）

二、Koa 应用可使用如下几种中间件：
应用级中间件
路由级中间件
错误处理中间件
第三方中间件

应用级中间件

//引入koa模块
var Koa=require('koa');
var Router=require('koa-router');
//实例化
var app=new Koa();

var router=new Router();
//ctx 上下文context 包含了request和response等信息
//配置路由
app.use(async (ctx,next)=>{
    console.log(new Date());
    await next();
})
//登陆日期

router.get('/', function (ctx, next) {
    ctx.body="Hello koa";
})
router.get('/news',(ctx,next)=>{
    ctx.body="新闻页面"
});
app.use(router.routes()); //作用：启动路由
app.use(router.allowedMethods()); //作用： 当请求出错时的处理逻辑
app.listen(3000,()=>{
    console.log('starting at port 3000');
});

//配置路由中间件（匹配任何路由）
app.use(async (ctx,next)=>{
    console.log(new Date());
    await next();//当前路由匹配后再向下匹配，

//匹配任何路由  ，如果不写next，这个路由被匹配到了就不会继续向下匹配

})

路由中间件

router.get('/', async(ctx, next)=>{
console.log(1)
next()
})
router.get('/', function (ctx) {
ctx.body="Hello koa";
})

错误处理中间件

app.use(async (ctx,next)=> {
next();
if(ctx.status==404){
ctx.status = 404;
ctx.body="这是一个 404 页面"
}
});

 天若有情天也老，人间正道是沧桑。

 洋葱模型

//引入 koa模块

var Koa=require('koa');
var router = require('koa-router')();  /*引入是实例化路由** 推荐*/
var app=new Koa();

//Koa中间件

//匹配任何路由  ，如果不写next，这个路由被匹配到了就不会继续向下匹配

//www.域名.com/news
app.use(async (ctx,next)=>{
    console.log('1、这是第一个中间件01');
    await next();

    console.log('5、匹配路由完成以后又会返回来执行中间件');
})

app.use(async (ctx,next)=>{
    console.log('2、这是第二个中间件02');
    await next();

    console.log('4、匹配路由完成以后又会返回来执行中间件');
})

router.get('/',async (ctx)=>{

    ctx.body="首页";

})
router.get('/news',async (ctx)=>{

    console.log('3、匹配到了news这个路由');
    ctx.body='这是一个新闻';
})


app.use(router.routes());   /*启动路由*/
app.use(router.allowedMethods());
app.listen(3002);

http://localhost:3002/news

土地潜力无穷尽，亩产多少在人为。

 koa，ejs模板引擎

npm install --save koa-views

npm install --save ejs --save

引入 koa-views 配置中间件
const views = require('koa-views');
app.use(views('views', { map: {html: 'ejs' }}));

 Koa 中使用 ejs：
router.get('/add',async (ctx)=>{
let title = 'hello koa2' await ctx.render(index',{
title
}

s