koa2 基础学习1

作者: squidbrother | 来源:发表于2019-09-29 10:57 被阅读0次

koa2 基础学习1
koa2基础学习
nuxt
关于koa2的基础知识
nodejs 学习笔记（1）koa2 koa-generator
koa2入门系列
koa2学习笔记1
从零开始构建一个Koa2+MySQL项目
koa框架搭建
1.搭建服务框架

概述

koa是Express的下一代基于Node.js的web框架

koa版本语言核心

1.0 generator
2.0 generator & async
3.0 async / await

核心模块koa

创建服务器，并监听端口
[应用级中间件]

const Koa = require('koa');
//创建服务器
const App = new Koa();
App.use(async(ctx,next)=>{
    ctx.body = 'hello world';  // 这里是应用级 中间件
    await next();
        if(ctx.status==404){
      ctx.body = '404页';   //404处理 错误处理 中间件
          ctx.redirect('xxx') ;  //重定向到某个页面 
    }
})
//监听端口
App.listen(8081,()=>{
    console.log('server listen port 8081');
})

路由模块 koa-router

为什么koa要与koa-router相互分离，
好处:
koa-router作为独立模块，更方便书写路由嵌套

1.路由使用，分为三步，（创建路由，配置路由，启动路由）
[路由级中间件]

const KoaRouter = require('koa-router');
//创建路由
const router = new KoaRouter();
//配置路由
router.get('/index',async(ctx,next)=>{
    ctx.body = '首页';
});
router.get('/news',async(ctx,next)=>{
    console.log('新闻')    //路由级 中间件
        await next();
});
router.get('/news',async(ctx,next)=>{
    ctx.body = '新闻'
});
//启动路由
App.use(router.routes());
App.use(router.allowedMethods()); /*可加可不加，放在启动理由后面 根据ctx.status设置响应头*/

2.路由的请求信息操作
localhost:5000/?id=1

router.get('/', async (ctx,next)=>{
    ctx.body = '首页';
    if(ctx.request.query){
        console.log(ctx.request.query);  // {id:1}  
                console.log(ctx.request.query == ctx.query); //true 
        console.log(ctx.querystring); // id=1
        console.log(ctx.request);
        console.log(ctx.header.host+ctx.url); //localhost:5000/?id=1
    }
});

动态路由
localhost:5000/student/110
localhost:5000/student/

router.get('/student/:id?',async(ctx)=>{
    ctx.body = '学生信息';
    console.log(ctx.params.id); //110  、undefined
})

koa的中间件

1.应用级中间件
上面启服务器部分，任何请求位置都会走这个函数内部，在其中可以进行逻辑处理
2.路由级中间件
上面路由模块部分，访问/news路由时候，进入函数内部，在其中处理逻辑
3.错误处理中间件
上面启服务器部分，整个路由表筛选完成，没有对应，则触发404，我们对其处理，放置服务器报错
4.第三方中间件
第三方模块的中间件 koa-bodyparse

跨域的问题

在路由中间件(指定路由)，或者在应用级中间件(所有的路由)中添加跨域头信息
允许跨域请求，动态设置跨域头信息

App.use(async (ctx,next)=>{
    ctx.set('Access-Control-Allow-Origin','*');
    await next();
})

SSR (server side render)

服务器渲染
1.koa-views (比koa-ejs插件使用的人要多)
安装

npm install koa-views ejs -S

使用

const Views = require('koa-views');

//必须在任意路由前启动
App.use(Views(
    path.resolve(__dirname,'./ejsviews'),  //模板文件路径
    {
        extension: 'ejs'  //模板文件后缀名
    }
));

//根据路由，启动不同行的模板文件
router.get('/news',async(ctx,next)=>{
    await ctx.render(
          'news',  //模板路径下news.ejs
      {    //模板数据
            mes1:'hello',
        lists:['小张','小王','小李','小赵'],
        mes2:'<span>我是不编译直接输出html的</span>',
        mes3:'<span>我是编译html的</span>'
    });
})

此外可以在应用中间件上添加全局数据
以便所有ejs模板都可使用

App.use( async(ctx,next)=>{
    ctx.state.user1 = '小张';
    ctx.state.user2 = '小李';
    await next();
})

2.art-template官网
安装：

npm install art-template -S
npm install koa-art-template -S

使用：

const ArtRender = require('koa-art-template');
//启动
ArtRender(App, {
  root: path.resolve(__dirname, 'ejsviews'), //路径
  extname: '.art', //后缀名
  debug: process.env.NODE_ENV !== 'production'
});
//配置
router.get('/login',async(ctx)=>{
    await ctx.render('login');  //查找对应.art文件
})

据官网描述：同样编译文件
art-template -- 编译速度 -- 25ms
ejs -- 编译速度 -- 141ms
art-template 语法

koa-bodyparser (比koa-better-body使用人多)

安装 npm install koa-bodyparser -S

const bodyParser = require('koa-bodyparser'); 
App.use(bodyParser()); //启动中间件

router.post('/login',async(ctx)=>{
    ctx.body = ctx.request.body;
})

静态文件托管

安装： npm install koa-static -S

const serve = require('koa-static');
//启动
App.use(serve(path.resolve(__dirname,'static')));  //配置托管根路径

注：静态文件引入时候，根是托管的路径
如login.ejs

<link href="../static/src/css/common.css" /> 报错 ×
应该书写为
<link href="css/common.css" /> 正确 √

根据文件格式不同，设置静态文件过期时间

const Koa = require('koa');
const router = require('koa-router');
const serve = require('koa-static');

const App = new Koa();

//设置托管路径
let _src = path.resolve(__dirname,'static');
//统一托管路径，过期时间相同
App.use(Serve(_src,{
    maxage:1*86400*1000
}));

如果希望不同文件，过期时间不同，则注释上面统一托管设置

router.all(/(\.jpg|\.png|\.gif)$/i,serve(_src,{
    maxage:20*86400*1000
}));
router.all(/(\.css)$/i,serve(_src,{
    maxage:0.5*86400*1000
}));
router.all(/(\.html|\.htm|\.shtml)$/i,serve(_src,{
    maxage:1*86400*1000
}));

【注】：如果将静态托管提取到外面，需要谨慎使用path.resolve，路径很容易错误，需要使用'./static'即可

koa中cookie的使用

因为http是无状态协议，发送接收数据，TCP(传输层)即刻关闭
为了保持网页状态，持久化，可以使用cookie
不需要安装，是koa带的

//--设置cookies
ctx.cookies.set('key','value',options);

options={
  maxAge: 持续时间
  expires: 失效时间
  ...
}

//--获取cookies
ctx.cookies.get('key');

键值不能为中文，报错

TypeError: argument value is invalid

修改

//--设置
ctx.cookies.set(
    'userinfo',
    new Buffer('张三').toString('base64'),
    {
    maxAge:1*60*1000,
    expires: new Date().getTime(),  // cookie失效时间
})

//--获取
ctx.body = new Buffer((ctx.cookies.get('userinfo')), 'base64').toString();

koa中session的使用

浏览器访问服务器，服务器创建一个session对象，生成key-value对，
将key以cookie形式返回浏览器，
浏览器再次访问服务器时候，需要将cookie(key)值带过去，
服务器端会找到对应的session(value),客户的信息在session中

npm install koa-session -S

const Koa = require('koa');
const session = require('koa-session');
const App = new Koa();

//轮循秘钥 (利用程序生成 几万条)
App.keys=[
    'dsad5322s2adsa',
    'dsadsa252dsa',
    'dsadsadseqwa'
        ...
];

//启动session，导入秘钥
App.use(session({
    key: 'koa:sess',
    maxAge: 20*60*1000, //过期时间20分钟 单位毫秒
    autoCommit: true,
    overwrite: true,
    httpOnly: true, 
    signed: true,
    rolling: false,  //每次请求都，重置过期时间
    renew: true //快过期时候，如果登录状态，则重置过期时间
},App))

App.use(async ctx=>{
    //获取与设置
    if(!ctx.session['view']){
        ctx.session['view'] = 0
    }

    ctx.session['view']++;

    ctx.body = `你第${ctx.session.view}次访问`;
});

网友评论

本文标题：koa2 基础学习1

本文链接：https://www.haomeiwen.com/subject/evwajctx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！