美文网首页
koa2 基础学习1

koa2 基础学习1

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

    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