基于nodejs平台的下一代web开发框架Koa---（基本用法）---系列1

野性酷女 2023-02-09 14:13 5阅读 0赞

# O 前提 #

## 1.安装nodejs ##

### 官方文档：http://nodejs.cn/ ###

*  简介  
    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。

### nodejs 热重载 Nodemon ###

Nodemon，它会监测项目中的所有文件，一旦发现文件有改动，Nodemon 会自动重启应用

> npm i -g nodemon

运行文件

> nodemon app.js (可以省略.js)

## 2.koa ##

### 官方文档：https://koa.bootcss.com/ ###

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

安装：

> npm i koa

# I 起步 #

### 基本使用 ###

//app.js 文件名
    
    const Koa = require("koa");
     /* 第一种引入koa路由模块API 需要实例化const router = new Router(); const Router = require("koa-router"); const router = new Router(); */
    //第二种 不需要实例化 推荐使用
    const Router = require("koa-router")();
    //实例化
    const app = new Koa();
    
    
    
    // 第一种路由的嵌套 访问 http://localhost:2560/list
    // 编写路由 / 表示根目录 访问 http://localhost:2560/
    router.get('/', async ctx => {  
      ctx.body = "Hello";  //f返回的数据 相当于 原生里面的 res.writeHead() res.end()
    })
    router.get('/list', async ctx => {  
      ctx.body="Hello"
    })
    
    /* //第二种路由的嵌套 router.get('/', async ctx => { ctx.body="Hello" }).get('/list', async ctx => { ctx.body="Hello" }) */
    
    // 启动路由
    app.use(router.routes());/* 启动路由 */
       .use(router.allowedMethods()); // 可以配置也可以不配置
    //配置端口号 http://localhost:2560/
    /* //配置端口号 http://localhost:2560/ app.listen(2560);*/
    
    /* app.use(router.allowedMethods()); 作用：这是官方文档推荐用法 当所有路由中间件 最后调用后 会根据 ctx.status设置 response的响应头 */

##### 客户端从发送请求到看到的内容 #####

服务器：接收到请求（request）->处理请求，生成数据->发送数据（response）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70]

koa帮助我们处理了request和response 我们只需要编写 中间件  
ctx; koa处理过的对象  
next: 中间件函数---->迭代器  
可以判断当前用户是否有权限

### 知识点 ###

1.  使用koa模块可以使用俩种引入方式

*  第一种引入koa路由模块API 需要实例化const router = new Router();  
    const Router = require(“koa-router”);  
    const router = new Router();
 *  第二种 不需要实例化 推荐使用  
    const Router = require(“koa-router”)();
 *  最后启用router  
    启动路由  
    app.use(router.routes()); 启动路由  
    app.use(router.allowedMethods()); 可以配置也可以不配置

1.  router.allowedMethods() 是给数据添加一个响应头
2.  在中间建中需要添加 async await 也要习惯加 await next()

# II koa 详解 #

## 0 中间件 ##

**通俗讲：** 中间件就是匹配路由之前或者匹配路由完成做的一系列操作，我们就可以把它叫做中间件。  
**中间件的功能包括：**  
\- 执行任何代码。  
\- 修改请求和响应。  
\- 终结请求-响应循环。  
\- 调用堆栈中的下一个中间件

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

//匹配所有路由
    app.use(async (ctx,next)=>{ 
    await next()
    })
    //按需匹配路由
    
    app.use(‘路由路径’，async (ctx,next)=>{ 
    await next()
    })

## 1 Koa 中间件的应用 ##

*  应用级中间件
 *  路由级中间件
 *  错误处理中间件
 *  第三方中间件

### 1.0 应用级中间件：匹配路由之前做的一系列操作 ###

场景 在匹配所有路由之前打印当前日期

### 1.2 路由级中间件 ： 与路由同路径 多一个参数 next ###

### 1.3 错误处理中间件 ###

### 1.4 第三方中间件 ###

##### 1.4.0 路由 koa-router #####

安装

npm i  koa-router

导入

//第一种
    const Router = require("koa-router")();
    //第二种
    const Router = require("koa-router");
    const router = new Router();

启动路由

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

###### 动态路由 Get传值 ######

##### 1.4.2. 模板引擎 koa-swig #####

安装

> npm init  
> npm install koa koa-router --save  
> npm install koa-swig --save  
> npm install co–save

导入

const Swig = require("koa-swig");
    const co = require("co");

配置

/* 设置模板引擎 */
    app.context.render = co.wrap(Swig({  
      root: __dirname + '/views', // 视图文件路径
      autoescape: true, // 是否编码 一般为 true ，false:解析模板数据中的html
      cache: false, // 'memory':请用缓存，避免每次刷新页面都去解析模板,把解析后的结果保存在内存中，比如每次访问都会去解析，适合用于成产上线环境
      ext: 'html'
    }))

使用：例子 实现一个简单的 todolist

图示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 1]  
app.js 代码：

index.html 代码：

<!DOCTYPE html>
    <html lang="en">
     
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <link rel="stylesheet" href="/static/index.css">
    </head>
     
    <body>
      
      <h2>{ { datas.appName}}</h2>
      <a href="/add">添加新任务</a>
      <hr>
      <ul>
        
        { % for task in datas.tasks %}
     
        
        { % if task.done %}
        <li class="{ {name}}">
          <input type="checkbox" checked>
          { { task.id}} - { { task.title}}
          <a href="">删除</a>
        </li>
     
        { % else %}
        <li class="{ {name}}">
          <input type="checkbox">
          { { task.id}} - { { task.title}}
          <a href="">删除</a>
        </li>
     
        { % endif %}
        { % endfor %}
      </ul>
    </body>
     
    </html>

其他：

koa-swig 语法：

1. swig使用指南
    http://www.iqianduan.net/blog/how_to_use_swig
    https://www.jianshu.com/p/3b4354c6bc36
     
    2. swig官方文档
    http://node-swig.github.io/swig-templates/docs/

##### 1.4.3. post提交数据使用 koa-bodyparser body解析 #####

安装

> npm install koa-bodyparser --save

导入

const bodyParser= require("koa-bodyparser");

配置

app.use(bodyParser())

使用：例子 获取登录的数据

index.html代码

app.js代码

1.  ctx.request.body 获取表单数据
2.  await ctx.render(‘index2’，\{数据 \}) 第二个参数为 传的数据 koa-swig模板： \{ \{ 数据 \}\}

##### 1.4.4.静态文件代理服 koa-static-cache #####

安装

> npm install koa-static-cache --save

导入

const Koastaticcache= require("koa-static-cache");

配置 可以配置多个  
选项设置  
\- prefix：URL前缀  
\- maxAge：缓存事件单位为毫秒 默认为0  
\- gzip：启用gzip压缩传输，默认为true

app.use(Koastaticcache(__dirname+'./static', { 
      /* 选项设置 prefix：URL前缀 maxAge：缓存事件单位为毫秒 默认为0 gzip：启用gzip压缩传输，默认为true */
      //不加prefix: "/static",则获取静态文件 <link rel="stylesheet" href="/index.css">
      //html 页面获取 <link rel="stylesheet" href="/static/index.css">
      prefix: "/static",
    
    }))

示图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 2]

##### 其他第三方中间插件 #####

1.  Koa - 使用koa-multer上传文件（上传限制、错误处理）  
    https://www.cnblogs.com/chanwahfung/p/11443089.html
2.  高效字符模板ART-TEMPLATE 官方文档http://aui.github.io/art-template/

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 3]

**安装**

> npm install art-template --save  
> npm install --save koa-art-template

**导入**

const template= require("koa-art-template");
    const path= require("path");

**配置**

template(app,{ 
      root: path.json(__dirname, 'views'), //视图的位置 需要导入node的path模块
      extname: '.html', //后缀名
      debug:process.env.NODE_ENV!=='production' //是否开启调试模式
    })

1.  …

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020051911515491.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020052020380045.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200520214442572.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200521092110459.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA==,size_16,color_FFFFFF,t_70