前端迈向架构师第一步-快速了解koa框架-3

167 阅读2分钟
「这是我参与11月更文挑战的第19天,活动详情查看:2021最后一次更文挑战

本文介绍koa以下功能的使用和用法:

  • koa-json 协议处理
  • koa-combine-routers 合并路由
  • koa-helmet 安全协议通信头
  • koa-static 静态资源
  • 上传图片

koa-json:按照json格式数据的传输

koa将返回结果用json格式显示的插件

安装:npm install -S koa-json


...
//引入
var json = require('koa-json');
...
 
 //使用
app.use(json({ pretty: false, param: 'pretty' }));
...
 
//案例: 
// http://localhost:3000/details?id=1&name=jiangyx
返回结果:{"foo":"bar"}
 
// 路径加pretty
// http://localhost:3000/details?id=1&name=jiangyx&pretty
返回结果:
{
  "foo": "bar"
}

合并路由(路由压缩):koa-combine-routers

安装:npm install koa-combine-routers

// 安装:npm install koa-combine-routers
 
// app.js
const Koa = require('koa')
const router = require('./routes')
 
const app = new Koa()
 
app.use(router())
 
 
// routers.js
const Router = require('koa-router')
const combineRouters = require('koa-combine-routers')
 
const dogRouter = new Router()
const catRouter = new Router()
 
dogRouter.get('/dogs', async ctx => {
  ctx.body = 'ok'
})
 
catRouter.get('/cats', async ctx => {
  ctx.body = 'ok'
})
 
const router = combineRouters(
  dogRouter,
  catRouter
)
module.exports = router

加入安全头:koa-helmet

安装:npm install koa-helmet -S


// 安装:npm install koa-helmet -S
 
// 使用:
const Koa = require("koa");
const helmet = require("koa-helmet");
const app = new Koa();
 
app.use(helmet());
 
app.use((ctx) => {
  ctx.body = "Hello World"
});
app.listen(4000);

静态资源:koa-static

安装:npm install -S koa-static

安装:npm install -S koa-static
 
使用:
const serve = require('koa-static');
const Koa = require('koa');
const app = new Koa();
 
// $ GET /package.json
app.use(serve('.'));
 
// $ GET /hello.txt
app.use(serve('test/fixtures'));
 
// or use absolute paths
app.use(serve(__dirname + '/test/fixtures'));
 
app.listen(3000);
 
console.log('listening on port 3000')

上传图片

  • 基础功能:图片上传、生成图片链接-
  • 附加功能:限制上传图片的大小与类型、生成高中低三种分辨率的图片链接、生成CDN

安装

npm i koa-body
npm i koa-static

app.js

const KoaBody = require("koa-body");
const serve = require("koa-static");

// 静态资源目录
app.use(serve(path.join(__dirname, "public")));
// 解析 body
app.use(
  KoaBody({
    multipart: true,
    formidable: {
      uploadDir: path.join(__dirname, "public/uploads"),
      keepExtensions: true,
    },
  })
);

controllers/common.js

// Content-Type 为 multipart/form-data 才会被解析
upload(ctx) {
  const file = ctx.request.files.file;
  const basename = path.basename(file.path);
  ctx.body = {
    url: `${ctx.origin}/uploads/${basename}`,
  };
}

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="/upload" enctype="multipart/form-data" method="POST">
      <!-- 必须指定 name 否则后端获取不到文件 -->
      <input type="file" name="file" accept="image/*" />
<!-- accept可以指定允许上传的图片类型,比如image/gif, image/jpeg,多种类型用逗号隔开 -->
      <button type="submit">上传</button>
    </form>
  </body>
</html>