NodeJs框架 Koa

作者: Grayly吖 | 来源:发表于2019-06-06 19:46 被阅读0次

    目录

    • 一、简介
    • 二、 Koa之hello world
    • 三、服务器自动重新部署
    • 四、Koa中间件
    • 五、Koa路由配置
    • 六、设置静态目录Koa-static
    • 七、使用模板引擎Koa-views
    • 八、Vue SSR(vue服务器渲染)
    • 九、跨域设置

    一、\color{red}{Koa} 简介

    文档地址:https://koa.bootcss.com

          \color{red}{Koa} 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数,Koa 帮你丢弃回调函数,并有力地增强错误处理。 Koa 并没有捆绑任何中间件, 而是提供了一套优雅的方法,帮助您快速而愉快地编写服务端应用程序。

    二、\color{red}{Koa} 之hello world

    • (1)新建koa-demo文件夹,初始化package.json
          npm init -y
    
    • (2)安装Koa模块
          npm i koa -S
    
    • (3)在项目根目录新建app.js,app.js代码如下:
        // 导入koa模块
        const Koa = require('koa');
        // 创建koa的实例app
        const app = new Koa();
    
        app.use(async ctx => {
            ctx.body = "Hello World"
        })
        // 监听端口
        app.listen(3000, () => {
            console.log("服务器已启动,http://localhost:3000");
        })
    
    • (3)使用node命令启动服务器,并访问本地地址端口3000
        node app
    

    三、服务器自动重新部署

    • (1)、 nodejs开发辅助工具\color{red}{nodemon}
            修改代码后,需要重新启动 Koa应用,所做的修改才能生效。若之后的每次代码修改都要重复这样的操作,势必会影响开发效率,使用了nodemon后,它会监测项目中的所有文件,一旦发现文件有改动,\color{red}{nodemon}会自动重启应用

    • (2)全局安装nodemon

       npm i nodemon -g
    
    • (3)启动服务的时候用nodemon app.js 代替node app.js
        nodemon app
    

    四、Koa中间件

    • (1)什么是koa中间件
            koa对网络请求采用了中间件的形式处理,中间件可以介入请求和相应的处理,是一个轻量级的模块,每个中间负责完成某个特定的功能。中间件的通过next函数联系,执行next()后会将控制权交给下一个中间件,如果没有中间件没有执行next后将会沿路折返,将控制权交换给前一个中间件。
            每个中间件都是一个函数(不是函数将报错),接收两个参数,第一个是\color{red}{ctx}上下文对象,另一个是\color{red}{next}函数

    • (2)中间件的使用

        app.use((ctx, next) => {
            // 在ctx上放入username,后面的所有请求的ctx里都会有username这个变量
            ctx.username = '我是Grayly';
            // 处理完之后放行,不使用next()的话,程序会被挂起来不动了
            next();
        })
    
    • (3)中间件有先后顺序

    五、Koa路由配置

    • (1)安装koa-router
        npm i koa-router -D
    
    • (2)导入koa-router模块并实例化
        // 导入koa-router模块
        const Router = require('koa-router');
        // 创建koa-router的实例router
        const router = new Router();
    
    • (3)配置,并访问本地地址端口3000
        router.get('/', ctx => {
            ctx.body = "哈哈哈"
        })
        app.use(router.routes());
    
    • (4)koa-router 提供了 .get、.post、.put 和 .del 接口来处理各种请求,但实际业务上,我们大部分只会接触到 POST 和 GET,所以接下来只针对这两种请求类型来说明。
      • (4.1)get:用于接收GET请求
          router.get('/get', ctx => {
              ctx.body = "哈哈哈"
          })
          app.use(router.routes());
      
      • (4.2)post:用于接收POST请求
          router.post('/', ctx => {
              ctx.body = "哈哈哈"
          })
          app.use(router.routes());
      
      • (4.3)all:用于接收GET与POST请求
          router.all('/', ctx => {
              ctx.body = "哈哈哈"
          })
          app.use(router.routes());
      
    • (5)获取请求参数
      • (5.1)获取get请求参数:ctx.query
            router.get('/get', ctx => {
                ctx.body = ctx.query
            })
      
      • (5.2)获取post请求参数:ctx.request.body
        • 当用 post 方式请求时,我们会遇到一个问题:post 请求通常都会通过表单或 JSON 形式发送,而无论是 Node 还是 Koa,都 没有提供 解析 post 请求参数的功能。
        • 获取post请求需要使用koa-body模块
          npm i koa-body --save
        
            router.get('/get', ctx => {
                ctx.body = ctx.request.body
            })
        
      • (5.3)使用中间件封装请求参数:把get请求参数和post请求参数都放入params对象
            app.use((ctx, next) => {
                ctx.params = {
                    ...ctx.query,
                    ...ctx.request.body
                }
                next();
            });
      

    六、设置静态目录\color{red}{koa-static}

    • (1)在目录中创建目录public,在public下创建文件demo.html,访问http://localhost:3000/public/demo.html是无法访问得到,因为我们还没有设置静态资源目录,设置静态资源目录要用到koa-static模块

    • (2)安装koa-static

        npm i koa-static -D
    
    • (3)在app.js里加入如下代码
        const koaStatic = require('koa-static');
        app.use(koaStatic(__dirname + '/public'));
    

    七、使用模板引擎\color{red}{koa-views}

    • (1)安装koa-views
        npm i koa-views -D
        npm i underscore -D
    
    • (2)模板编写:在根目录创建views目录,在views目录下创建tpl.html,代码如下
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
        </head>
        <body>
            <h3><%=title %></h3>
        </body>
        </html>
    
    • (3)在app.js配置模板引擎中间件
      const path = require('path');
      const views = require("koa-views");
      app.use(views(path.join(__dirname, "views"), {
        map: {
          html: 'underscore'
        }
      }));
    
    • (4)使用模板引擎
        router.get("/html", async ctx => {
            await ctx.render("tpl", {
                title: "Grayly"
            })
        })
    

    八、Vue SSR(vue服务器渲染)

    • (1)安装vue和vue服务器渲染插件
      npm install vue vue-server-renderer -S
    
    • (2)渲染
        router.get('/ssr', async ctx => {
            第 1 步:创建一个 Vue 实例
            const Vue = require('vue')
            const app = new Vue({
                template: `<div>Hello World</div>`
            })
            第 2 步:创建一个 renderer
            const renderer = require('vue-server-renderer').createRenderer();
            第 3 步:将 Vue 实例渲染为 HTML
            renderer.renderToString(app, (err, html) => {
                if (err) throw err
                console.log(html)
                ctx.body = html;
                // => <div data-server-rendered="true">Hello World</div>
            })
        })
    

    九、\color{red}{Koa} 跨域设置

    • 使用中间件编写跨域设置
        app.use((ctx, next) => {
        // 设置允许跨域
            ctx.set("Access-Control-Allow-Origin", "*");
            ctx.set("Access-Control-Allow-Methods", "PUT, POST, GET, DELETE, OPTIONS");
            // 请求头设置
            ctx.set(
                "Access-Control-Allow-Headers",
                `Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild,x-token,sessionToken,token`
            );
            if (ctx.method == "OPTIONS") {
                ctx.body = 200;
            } else {
                next();
            }
        })
    
    Koa

    相关文章

      网友评论

        本文标题:NodeJs框架 Koa

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