【Nodejs】Koa基本使用

news2024/11/24 10:38:31

1.简介

image-20221231151037428
koa 是由 Express 原班人马打造的,致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重复繁琐的回调函数嵌套,并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件,它仅仅提供了一个轻量优雅的函数库,使得编写 Web 应用变得得心应手。

2.快速开始

2.1 安装koa2

# 初始化package.json
npm init
# 安装koa2 
npm install koa

2.2 hello world 代码

const Koa = require('koa')
const app = new Koa()

app.use( async ( ctx ) => {
  ctx.body = 'hello koa2' //json数据
})

app.listen(3000)

image-20220417092053231

2.3 启动

node index.js

3. koa vs express


通常都会说 Koa 是洋葱模型,这重点在于中间件的设计。但是按照上面的分析,会发现 Express 也是类似的,不同的是Express 中间件机制使用了 Callback 实现,这样如果出现异步则可能会使你在执行顺序上感到困惑,因此如果我们想做接口耗时统计、错误处理 Koa 的这种中间件模式处理起来更方便些。最后一点响应机制也很重要,Koa 不是立即响应,是整个中间件处理完成在最外层进行了响应,而 Express 则是立即响应。

3.1更轻量

  • koa 不提供内置的中间件;
  • koa 不提供路由,而是把路由这个库分离出来了(koa/router)

3.2 Context对象

koa增加了一个Context的对象,作为这次请求的上下文对象(在koa2中作为中间件的第一个参数传入)。同时Context上也挂载了Request和Response两个对象。和Express类似,这两个对象都提供了大量的便捷方法辅助开发, 这样的话对于在保存一些公有的参数的话变得更加合情合理

3.3 异步流程控制

express采用callback来处理异步, koa v1采用generatorkoa v2 采用async/awaitgeneratorasync/await使用同步的写法来处理异步,明显好于callbackpromise

3.4 中间件模型

​ express基于connect中间件,线性模型;​koa中间件采用洋葱模型(对于每个中间件,在完成了一些事情后,可以非常优雅的将控制权传递给下一个中间件,并能够等待它完成,当后续的中间件完成处理后,控制权又回到了自己)

image-20220417083817823

image-20220417085913567

//同步
var express = require("express")
var app = express()

app.use((req,res,next)=>{
    console.log(1)
    next()
    console.log(4)
    res.send("hello")
})
app.use(()=>{
    console.log(3)
})

app.listen(3000)

//异步
var express = require("express")
var app = express()

app.use(async (req,res,next)=>{
    console.log(1)
    await next()
    console.log(4)
    res.send("hello")
})
app.use(async ()=>{
    console.log(2)
    await delay(1)
    console.log(3)
})

function delay(time){
 return new Promise((resolve,reject)=>{
    setTimeout(resolve,1000)
 })
}
//同步
var koa = require("koa")
var app = new koa()

app.use((ctx,next)=>{
    console.log(1)
    next()
    console.log(4)
    ctx.body="hello"
})
app.use(()=>{
    console.log(3)
})

app.listen(3000)

//异步
var koa = require("koa")
var app = new koa()

app.use(async (ctx,next)=>{
    console.log(1)
    await next()
    console.log(4)
    ctx.body="hello"
}) 
app.use(async ()=>{
    console.log(2)
    await delay(1)
    console.log(3)
})

function delay(time){
 return new Promise((resolve,reject)=>{
    setTimeout(resolve,1000)
 })
}

app.listen(3000)

4. 路由

4.1基本用发

var Koa = require("koa")
var Router = require("koa-router")

var app = new Koa()
var router = new Router()

router.post("/list",(ctx)=>{
    ctx.body=["111","222","333"]
})
app.use(router.routes()).use(router.allowedMethods())
app.listen(3000)

4.2 router.allowedMethods作用

image-20220417102845079

4.3 请求方式

Koa-router 请求方式: get 、 put 、 post 、 patch 、 delete 、 del ,而使用方法就是 router.方式() ,比如 router.get() 和 router.post() 。而 router.all() 会匹配所有的请求方法。

var Koa = require("koa")
var Router = require("koa-router")

var app = new Koa()
var router = new Router()

router.get("/user",(ctx)=>{
    ctx.body=["aaa","bbb","ccc"]
})
.put("/user/:id",(ctx)=>{
    ctx.body={ok:1,info:"user update"}
})
.post("/user",(ctx)=>{
    ctx.body={ok:1,info:"user post"}
})
.del("/user/:id",(ctx)=>{
    ctx.body={ok:1,info:"user del"}
})


app.use(router.routes()).use(router.allowedMethods())
app.listen(3000)

4.4 拆分路由

routes/list.js

var Router = require("koa-router")
var router = new Router()
router.get("/",(ctx)=>{
    ctx.body=["111","222","333"]
})
.put("/:id",(ctx)=>{
    ctx.body={ok:1,info:"list update"}
})
.post("/",(ctx)=>{
    ctx.body={ok:1,info:"list post"}
})
.del("/:id",(ctx)=>{
    ctx.body={ok:1,info:"list del"}
})
module.exports = router
routes/index.js

var Router = require("koa-router")
var user = require("./user")
var list = require("./list")

var router = new Router()

router.use('/user', user.routes(), user.allowedMethods())
router.use('/list', list.routes(), list.allowedMethods())

module.exports = router
entry入口

var Koa = require("koa")
var router = require("./routes")

var app = new Koa()
app.use(router.routes()).use(router.allowedMethods())
app.listen(3000)

4.5 路由前缀

router.prefix('/api')
router.use('/user', user.routes(), user.allowedMethods())

4.6 路由重定向

router.get("/home",(ctx)=>{
    ctx.body="home页面"
})

//写法1 
router.redirect('/', '/home'); //匹配到/重定向到/home
//写法2
router.get("/",(ctx, next)=>{
    ctx.redirect("/home")
})

5. 静态资源


const Koa = require('koa')
const path = require('path')
const static = require('koa-static')

const app = new Koa()

app.use(static(path.join( __dirname,  "public")))

app.use( async ( ctx ) => {
  ctx.body = 'hello world'
})

app.listen(3000)

6. 获取请求参数


6.1 get参数

在koa中,获取GET请求数据源头是koa中request对象中的query方法或querystring方法。

query返回是格式化好的参数对象,querystring返回的是请求字符串,由于ctx对request的API有直接引用的方式,所以获取GET请求数据有两个途径。

  • 从上下文中直接获取 请求对象ctx.query,返回如 { a:1, b:2 } 请求字符串 ctx.querystring,返回如 a=1&b=2
  • 从上下文的request对象中获取 请求对象ctx.request.query,返回如 { a:1, b:2 } 请求字符串 ctx.request.querystring,返回如 a=1&b=2

6.2 post参数

对于POST请求的处理,koa-bodyparser中间件可以把koa2上下文的formData数据解析到ctx.request.body中

const bodyParser = require('koa-bodyparser')

// 使用ctx.body解析中间件
app.use(bodyParser())

7. ejs模板


7.1 安装模块

# 安装koa模板使用中间件
npm install --save koa-views
# 安装ejs模板引擎
npm install --save ejs

7.2 使用模板引擎

文件目录

├── package.json
├── index.js
└── view
    └── index.ejs

./index.js文件

const Koa = require('koa')
const views = require('koa-views')
const path = require('path')
const app = new Koa()

// 加载模板引擎
app.use(views(path.join(__dirname, './view'), {
  extension: 'ejs'
}))

app.use( async ( ctx ) => {
  let title = 'hello koa2'
  await ctx.render('index', {
    title: 'hello world',
  })
})

app.listen(3000)

./view/index.ejs 模板

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1><%= title %></h1>
    <p>EJS Welcome to <%= title %></p>
</body>
</html>

8. cookie&session


8.1 cookie

koa提供了从上下文直接读取、写入cookie的方法

  • ctx.cookies.get(name, [options]) 读取上下文请求中的cookie
  • ctx.cookies.set(name, value, [options]) 在上下文中写入cookie

8.2 session

  • koa-session-minimal 适用于koa2 的session中间件,提供存储介质的读写接口 。
const session = require('koa-session-minimal')

app.use(session({
    key: 'SESSION_ID',
    cookie: {
        maxAge:1000*60
    }
}))
app.use(async (ctx, next) => {
    //排除login相关的路由和接口
    if (ctx.url.includes("login")) {
        await next()
        return
    }

    if (ctx.session.user) {
        //重新设置sesssion
        ctx.session.mydate = Date.now()
        await next()
    } else {
        ctx.redirect("/login")
    }
})

9.图片上传


9.1 环境

  • koa:用来起一个web服务器
  • koa2-cors: 解决跨域问题
  • koa-router: koa的路由处理
  • koa-body: koa参数的获取
  • koa-static: 静态资源配置
  • @koa/multer和multer:图片上传的插件

9.2 代码结构

image-20221231153921717

9.3 实现

  • 第一步:用koa+koa-router搭建一个简单的web服务
//main.js
const Koa = require('koa') // 引入koa
const Router = require('koa-router') // 引入koa-router
const { koaBody } = require('koa-body');

var router = new Router()

router.get('/', async (ctx) => {
    ctx.type = 'html'
    ctx.body = '<h1>hello world!</h1>'
}).post('/upload', async (ctx) => {
    ctx.body = 'ok'
})

app.use(koaBody())
   .use(router.routes())
   .use(router.allowedMethods())
    

app.listen(3000)

现在我们就可以打开http://localhost:3000看到 hello world

  • 接着我们新建一个upload文件夹,且在代码中加入静态内容的的代码
//mian.js 新增代码
const static = require('koa-static')
const path = require('path')

app.use(router.routes())
    .use(router.allowedMethods())
    .use(static(path.join(__dirname, './upload')))

此时假如你在upload文件夹下新增一张照片便可通过http://localhost:3000/***.png 查看到了。(***:你自己新增的照片名称加后缀)

  • 此时新增一个index.html文件,且加入以下代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="file" class="file" name="avatar">
  <button onclick="send()">上传</button>
  
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    let formData = new FormData()
    
    document.querySelector('.file').addEventListener('change', function(e) {
          let files = e.target.files
          console.log(files)
          if (!files.length) return
          formData.append('file', files[0], files[0].name)
        })
    
        function send(){
          axios.post('http://localhost:3000/upload',formData,{
            Headers:{
              "Content-type":"multipart/form-data"
            }
          })
        }
  </script>
</body>
</html>

选择图片且上传会发现存在跨域问题,那么发现问题解决问题直接上代码:

//mian.js新增代码
const cors = require('koa2-cors')

//注意这个配置要在router前使用不然不生效
app.use(cors())
    .use(koaBody())
    .use(router.routes())
    .use(router.allowedMethods())
    .use(static(path.join(__dirname, './upload')) )

解决完跨域后,选择图片且上传,此时咱们已经拿到传过来的数据啦,重头戏来了:@koa/multer使用

const multer = require('@koa/multer')
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './upload')
    },
    filename: function (req, file, cb) {
        const fileFormat = (file.originalname).split('.')
        cb(null, Date.now() + '.' + fileFormat[fileFormat.length - 1])
    }
})
const upload = multer({ storage })

配置好后修改/upload

router.post('/upload', upload.single('file'), async (ctx) => {
    console.log('ctx.file',  ctx.file)
})

note:需要注意的是upload.single(‘file’),中的file需要和上方的index.html中的formData字段一致 此时就可以愉快的上传啦~~~

10.记录日志


const Koa = require('koa')
const Router = require('koa-router')
// 引入 koa-logger
const logger = require('koa-logger')

const app = new Koa()
const router = new Router()
// 使用 koa-logger 中间件
app.use(logger((str, args) => {
  // console.log(str);
  // console.log(args);
}))

router.get('/', ctx => {
  ctx.body = '首页'
})

// 使用路由中间件
app.use(router.routes())

app.listen(3000, () => {
  console.log('listen 3000 ok');
})
  • 在注册 koa-logger 中间件时可以传递一个函数,该函数有2个参数
  • str 是一个字符串类型,在发生请求时 str 包含 请求类型、请求路径信息,在发生响应时 str 包含 响应状态码、响应时长、响应文件大小信息。
  • args 是一个数组类型,在发生请求时会将请求类型、请求路径放在该数组中,在发生响应时会将响应状态码、响应时长、响应文件大小信息放入该数组中

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/792220.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python+Playwright自动化测试--标签页操作(tab)

1.简介 标签操作其实也是基于浏览器上下文&#xff08;BrowserContext&#xff09;进行操作的&#xff0c;而且宏哥在之前的BrowserContext也有提到过&#xff0c;但是有的童鞋或者小伙伴还是不清楚怎么操作&#xff0c;或者思路有点模糊&#xff0c;因此今天单独来对其进行讲…

msvcr71.dll丢失或(找不到)的解决办法

在使用电脑有时候今天没有问题隔天我们再打开软件时候&#xff0c;就遇到电脑提示msvcr71.dll丢失的问题&#xff0c;完全不知道怎么回事跟怎么解决&#xff0c;今天本文章给大家详细介绍msvcr71.dll丢失的解决方法&#xff0c;跟丢失的原因。 1.是什么msvcr71.dll msvcr71.dl…

windows 抓取网页视频的url

fd抓视频链接 Filddler4官网&#xff1a; https://www.telerik.com/download/fiddler 复制 预先设置&#xff1a;打开 Fiddler&#xff0c;选择菜单栏 -> Tools -> Fiddler Options&#xff0c;在 HTTPS 选项卡中勾选 Decrypt HTTPS traffic&#xff0c;然后重启Fidd…

【云原生系列】openstack搭建过程及使用

目录 搭建步骤 准备工作 正式部署OpenStack 安装的过程 安装组件如下 登录页面 进入首页 创建实例步骤 上传镜像 配置网络 服务器配置 dashboard配置 密钥配置免密登录 创建实例 绑定浮动ip 免密登录实例 搭建步骤 准备工作 1.关闭防火墙和网关 systemctl dis…

Ip-Limit: 轻量级注解式IP限流组件(二)

author: van , ggfanwentaogmail.comIp-Limit-Example: 轻量级注解式IP限流组件使用样例 项目简介 该项目为ip-limiter的使用示例项目。 ip-limiter地址&#xff1a; https://github.com/DDAaTao/ip-limiter 示例项目文件树 └─example├─handler│ └─BaseException…

k8s部署高可用-redis

一、项目地址 ​GitHub - spotahome/redis-operator: Redis Operator creates/configures/manages high availability redis with sentinel automatic failover atop Kubernetes.​ 二、部署过程 一、部署operator控制器 1.把项目clone下来直接部署方便。 到这个目录下的这个…

springboot整合ELK+kafka采集日志

一、背景介绍 在分布式的项目中&#xff0c;各功能模块产生的日志比较分散&#xff0c;同时为满足性能要求&#xff0c;同一个微服务会集群化部署&#xff0c;当某一次业务报错后&#xff0c;如果不能确定产生的节点&#xff0c;那么只能逐个节点去查看日志文件&#xff1b;lo…

MySQL体系结构及执行过程

一、MySQL体系结构 1、网络连接层 客户端连接器&#xff08;Client Cnnectors&#xff09;&#xff1a;提供支持与MySQL服务器建立连接。 建立连接命令&#xff1a;mysql -h -u -p -h指定MySQL服务的IP 若本地连接则不需要 每一个连接均会保存用户权限&#xff0c;中途修改权…

关于在虚拟机CentOS7的Docker下安装Oracle

这不三阶段了&#xff0c;要上Oracle了&#xff0c;感觉这个班卷的程度到位。二阶段我就上了ElementUI和MyBatis&#xff0c;项目也是用这些技术写的&#xff0c;整体钻研程度还行。于是布置了两个任务&#xff1a;在windows下安一下Oracle&#xff0c;在windows下安装Oracle那…

从零开始制作CPU

文章目录 简介门与门或门非门异或门 ALU加法半加器全加器8位加法器 减法补码8位补码器8位减法器 存储锁存器8位锁存器带边沿触发的锁存器 内存内存单元16位内存 CPUPC程序计数器CPU连接 自制乘法器移位8位乘法器 自制除法器比较一位比较8位比较 8位除法器 简介 黑马最近出了个…

BOOTMGR丢失无法开机怎么办?

BOOTMGR&#xff08;引导管理器&#xff0c;Boot Manager的简称&#xff09;其实是一个引导操作系统的程序&#xff0c;通常位于系统保留分区或系统分区中。如果系统分区或系统保留分区的根目录中的BOOTMGR存在错误&#xff0c;那么系统将会在计算机启动时提示找不到操作系统。…

一文读懂ChatGPT,ChatGPT百科全书

引言 ChatGPT是什么&#xff1f; ChatGPT是一款先进的自然语言处理&#xff08;NLP&#xff09;模型&#xff0c;由OpenAI开发和维护。它基于OpenAI的第四代生成预训练Transformer&#xff08;GPT-4&#xff09;架构&#xff0c;旨在通过深度学习技术理解和生成人类语言。ChatG…

大一统真的来了:多模态共享参数的 Meta-Transformer

出品人&#xff1a;Towhee 技术团队 作者&#xff1a;张晨 在探索通用人工智能的多种可能发展方向中&#xff0c;多模态大模型&#xff08;MLLM&#xff09;已成为当前备受关注的重要方向。随着 GPT-4 对图文理解的冲击&#xff0c;更多模态的理解成为了学术界的热点话题&#…

优思学院|PDCA循环与精益管理有何相通之处?

PDCA是精益管理和六西格玛管理的基础原则&#xff0c;通常PDCA可以转化为六西格玛的DMAIC&#xff0c;变成一套以数据驱动方式为主来减少过程变异的改善方法&#xff0c;也可以应用于精益管理的原则上&#xff0c;处理优化价值流和减少浪费的改进上。 PDCA循环原则 这是由美国…

centos下安装ftp-读取目录列表失败-

1.下载安装ftp服务器端和客户端 #1.安装yum -y install vsftpdyum -y install ftp #2.修改配置文件vim /etc/vsftpd.conflocal_enablesYESwrite_enableYESanonymous_enableYESanon_mkdir_write_enableYES //允许匿名用户在FTP上创建目录anon_upload_enableYES //允许匿名用户…

【ElementUI组件封装】搭建架子、按钮自行封装、封装element的表格、表单

通过原生 button 封装类 el-button 组件封装 el-form 相关表单通用组件封装 el-table 相关表格通用组件 Vite Vue3 ElementPlus业务组件封装 数字化管理平台 Vue3ViteVueRouterPiniaAxiosElementPlus 个人博客地址 开发环境&#xff1a;Vite3 Vue3 兼容性&#xff1a;Vite…

前端企业微信开发内嵌H5记录 右边侧边栏开发

企业微信内嵌H5&#xff08;侧边栏&#xff09;开发流程 1、如果要想在企业微信和客户聊天的过程中出现右侧侧边栏&#xff0c;需要添加非本企业的人员微信&#xff0c;右边侧边栏就会自动出现&#xff08;可折叠&#xff09;。 示例&#xff1a; 2、创建一个自建应用 a.先登…

VMware horizon 8 建立手动桌面池

准备一台win10的虚拟机&#xff0c;改静态IP,计算机名&#xff0c;加入域&#xff0c;把Agent软件上传到机器中。 2&#xff1a;右键管理员身份安装程序。 一般默认 根据自己实际情况选择 启用桌面远程功能 安装完成 安装完成以后创建一个快照&#xff0c;以后是好知道机…

申请美国J1签证所需材料清单

在申请前往美国进行交流学习、文化交流或实习等项目的J1签证时&#xff0c;申请人需要准备一系列必要的材料。这些材料将有助于确保申请的顺利进行&#xff0c;以下是J1签证材料清单的详细内容&#xff1a; 1. 签证申请表格&#xff1a; 首先&#xff0c;申请人需要填写并签署D…

多网点多品牌精密空调集中监控方案

精密机房空调主要应用于通信数据机房、交换机 房、IDC机房、精密医疗设备室、外科手术室、实验室、精密电子仪器仪表生产车间等环境,这样的环境对空气的温度、湿度、洁净度、气流分布等各项指标有很高的要求&#xff0c;必须由每年365天、每天24小时安全可靠运行的专用机房精密…