AI 助理
备案控制台
开发者社区 Java技术进阶 文章 正文

知新 | koa框架入门到熟练第一章

2020-07-15 580
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： koa，是基于Node.js 平台的下一代的web开发框架。是由Express原班人马打造，致力于成为一个更小的，更加富有表现力的，web框架。使用koa编写web应用，可以免除重复的回调函数嵌套，并极大的提高错误处理的效率，koa框架不仅仅在内核方法中可以绑定任何中间件，它仅仅提供了一个轻量级，优雅的函数库，思路和express相差不少。

介绍

koa，是基于Node.js 平台的下一代的web开发框架。
是由Express原班人马打造，致力于成为一个更小的，更加富有表现力的，web框架。
使用koa编写web应用，可以免除重复的回调函数嵌套，并极大的提高错误处理的效率，
koa框架不仅仅在内核方法中可以绑定任何中间件，它仅仅提供了一个轻量级，优雅的函数库，思路和express相差不少。

koa框架的安装

安装koa

安装koa框架和安装之前的模块一样。
使用如下命令安装

npm install --save koa

使用save参数，表明将会自动修改package.json 文件。自动添加依赖项

hello world

输入如下的代码，运行hello world

const koa = require("koa");
const app = new koa();


// 配置中间件
app.use(async (ctx) => {
    ctx.body = "hello world";
})

// 监听端口
app.listen(3000);

运行文件


PS C:\Users\Administrator\IdeaProjects\untitled3> node ./ming.js

输出结果如下

异步的处理

由于js是单线程的，所以，使用回调函数处理异步等问题。

回调函数处理

const koa = require("koa");
const app = new koa();


function getData(callback){
    setTimeout(function () {
        var name = "ming";
        callback(name);
    }, 1000)
}

// 从外部获取异步方法里的数据
getData(function (data) {
    console.log(data)
})

// 监听端口
app.listen(3000);

输出结果

PS C:\Users\Administrator\IdeaProjects\untitled3> node ./ming.js
ming

使用promise处理异步

const koa = require("koa");
const app = new koa();


// promise 处理异步
// resolve 成功的回调函数
// reject 失败的回调函数

var p = new Promise(function (resolve, reject) {
    setTimeout(function () {
        var name = "张三";
    }, 1000)
})

// 获取异步的结果
p.then((data) => {
    console.log(data);
}) 

// 监听端口
app.listen(3000);

运行结果如下

PS C:\Users\Administrator\IdeaProjects\untitled3> node ./ming.js
ming

关于async await promise

其中async是异步的缩写，await被认为是async wait的缩写，所以，async用于申明一个函数为异步的，await用于等待一个异步方法执行完成。

简单理解

async 让方法变成异步
await 等待异步方法执行完成。

async

实际例子

这里使用实际的例子，更好理解。

同步函数

function getData(){
    return "ming";
}
console,log(getData())

输出结果

PS C:\Users\Administrator\IdeaProjects\untitled3> node ./ming.js
ming

async 可以让该方法变成异步

const koa = require("koa");
const app = new koa();


// promise 处理异步
// resolve 成功的回调函数
// reject 失败的回调函数

async function getData(){
    return "这是一个数据";
}

console.log(getData());

// 监听端口
app.listen(3000);

输出结果如下所示

其中promise为一个异步的数据


PS C:\Users\Administrator\IdeaProjects\untitled3> node ./ming.js
Promise { '这是一个数据' }

获取该数据

const koa = require("koa");
const app = new koa();


// promise 处理异步
// resolve 成功的回调函数
// reject 失败的回调函数

async function getData(){
    return "这是一个数据";
}

var p = getData();

p.then((data) => {
    console.log(data);
})

// 监听端口
app.listen(3000);

输出结果如图所示

PS C:\Users\Administrator\IdeaProjects\untitled3> node ./ming.js
这是一个数据

await

使用await方法获取到异步的信息

const koa = require("koa");
const app = new koa();


// promise 处理异步
// resolve 成功的回调函数
// reject 失败的回调函数

async function getData(){
    return "这是一个数据";
}

async  function test(){
    // 此时运行的为，发现该函数是一个异步函数，遇到了await进入等待状态，等待getData执行完毕，再往下执行
    var d = await  getData();

    console.log(d)
}

test()

// 监听端口
app.listen(3000);

运行结果

PS C:\Users\Administrator\IdeaProjects\untitled3> node ./ming.js
这是一个数据

koa 路由

路由是根据不同的url地址，加载不同页面实现不同的功能。

安装路由

 npm install --save koa-router

使用路由

const koa = require("koa");
const app = new koa();
const router = require("koa-router")();


router.get("/", (ctx, next) => {
    ctx.body = "ming";
})

// 启动路由
app.use(router.routes());
app.use(router.allowedMethods());


// 监听端口
app.listen(3000);

运行结果如下所示

其中可以添加async作为异步方法来调用

const koa = require("koa");
const app = new koa();
const router = require("koa-router")();


router.get("/", async (ctx, next) => {
    ctx.body = "ming";
})

// 启动路由
app.use(router.routes());
// 设置响应头
app.use(router.allowedMethods());


// 监听端口
app.listen(3000);

获取链接的参数值

通过router获取路由的参数值
链接为

获取格式化好的

http://localhost:3000/?ming=3

代码为

const koa = require("koa");
const app = new koa();
const router = require("koa-router")();


router.get("/", async (ctx, next) => {

    // query 返回的是格式化好的参数对象
    // querystring 返回的是请求的字符串

    console.log(ctx.query)

    ctx.body = "ming";
})

// 启动路由
app.use(router.routes());
// 设置响应头
app.use(router.allowedMethods());


// 监听端口
app.listen(3000);

访问的结果是

PS C:\Users\Administrator\IdeaProjects\untitled3> node ./ming.js
[Object: null prototype] { ming: '3' }

获取未格式化好的

PS C:\Users\Administrator\IdeaProjects\untitled3> node ./ming.js
ming=3

const koa = require("koa");
const app = new koa();
const router = require("koa-router")();


router.get("/", async (ctx, next) => {

    // query 返回的是格式化好的参数对象
    // querystring 返回的是请求的字符串

    console.log(ctx.querystring)

    ctx.body = "ming";
})

// 启动路由
app.use(router.routes());
// 设置响应头
app.use(router.allowedMethods());


// 监听端口
app.listen(3000);

设置动态路由

const koa = require("koa");
const app = new koa();
const router = require("koa-router")();


// 配置动态路由
router.get("/:id", async (ctx, next) => {

    // query 返回的是格式化好的参数对象
    // querystring 返回的是请求的字符串

    console.log(ctx.params)

    ctx.body = "ming";
})

// 启动路由
app.use(router.routes());
// 设置响应头
app.use(router.allowedMethods());


// 监听端口
app.listen(3000);

访问的链接为

http://localhost:3000/ming

输出的内容

PS C:\Users\Administrator\IdeaProjects\untitled3> node ./ming.js
{ id: 'ming' }

koa 中间件

这里配置koa的中间件
中间件就是匹配路由完成做的一系列的操作，把它称之为中间件。

中间件的功能主要有：

  1. 执行任何代码
  2. 修改请求和响应的对象
  3. 终结请求，响应循环
  4. 调用堆栈中的下一个中间件。

需求： 打印出中间件相关内容

const koa = require("koa");
const app = new koa();
const router = require("koa-router")();


// 中间件
app.use(async (ctx) => {
    ctx.body = "这是一个中间件";
})


// 配置动态路由
router.get("/:id", async (ctx, next) => {

    // query 返回的是格式化好的参数对象
    // querystring 返回的是请求的字符串

    console.log(ctx.params)

    ctx.body = "ming";
})



// 启动路由
app.use(router.routes());
// 设置响应头
app.use(router.allowedMethods());


// 监听端口
app.listen(3000);

运行结果

此时访问任何页面出现的都是这个内容，

持续匹配

因为访问的时候，没有加上next，此时造成的无法进入到匹配路由的阶段。

const koa = require("koa");
const app = new koa();
const router = require("koa-router")();


// 中间件
app.use(async (ctx, next) => {
    ctx.body = "这是一个中间件";

    // 进入路由匹配
    next();
})


// 配置动态路由
router.get("/:id", async (ctx, next) => {

    // query 返回的是格式化好的参数对象
    // querystring 返回的是请求的字符串

    console.log(ctx.params)

    ctx.body = "ming";
})



// 启动路由
app.use(router.routes());
// 设置响应头
app.use(router.allowedMethods());


// 监听端口
app.listen(3000);

由于js是单线程的，此时需要添加await，进行访问。

const koa = require("koa");
const app = new koa();
const router = require("koa-router")();


// 中间件
app.use(async (ctx, next) => {
    ctx.body = "这是一个中间件";

    // 进入路由匹配
    await next();
})


// 配置动态路由
router.get("/:id", async (ctx, next) => {

    // query 返回的是格式化好的参数对象
    // querystring 返回的是请求的字符串

    console.log(ctx.params)

    ctx.body = "ming";
})



// 启动路由
app.use(router.routes());
// 设置响应头
app.use(router.allowedMethods());


// 监听端口
app.listen(3000);

路由持续匹配

路由由于没有await next，造成路由匹配到以后就不再匹配，所以添加next，能把两个相同的路由按照顺序，匹配完成。

const koa = require("koa");
const app = new koa();
const router = require("koa-router")();


// 中间件
app.use(async (ctx, next) => {
    ctx.body = "这是一个中间件";

    // 进入路由匹配
    await next();
})


// 配置动态路由
router.get("/:id", async (ctx, next) => {

    // query 返回的是格式化好的参数对象
    // querystring 返回的是请求的字符串

    console.log(ctx.params)

    ctx.body = "ming";
    
    await next();
})
router.get("/:id", async (ctx, next) => {
    // 此时匹配到这点
    await  next();
})



// 启动路由
app.use(router.routes());
// 设置响应头
app.use(router.allowedMethods());


// 监听端口
app.listen(3000);

中间件的执行顺序

一般是洋葱模型，作为中间件的执行顺序。

错误处理中间件

// 中间件
app.use(async (ctx, next) => {
    console.log("这是一个中间件");
    
    // 进入洋葱
    next()
    
    // 出洋葱
    if(ctx.status = 404){
        ctx.status = 404;
        ctx.body = "这是一个 404 页面";
    }
})

第三方中间件

例如进行静态文件托管的时候，使用的是第三方中间件

const static = require('koa-static');
const staticPath = './static';

app.use(static(
    path.join(__dirname, staticPath);
))

const bodyParser = require('koa-bodyparser');
app.use(bodyParser());

这样就完成了静态文件托管

文章标签：
JavaScript
前端开发
网络架构
中间件
开发框架
mysoul8021
目录
相关文章
vohelon
|
10月前
|
Web App开发 前端开发 开发工具
介绍Web开发的基础知识
介绍Web开发的基础知识
vohelon
158 7
土木林森
|
7月前
|
前端开发 JavaScript API
【独家揭秘】Bottle框架为何能俘获开发者的心？三大实战案例带你领略Web开发新境界！
【8月更文挑战第31天】Bottle是一款轻量级Python Web框架，以简单高效著称，秉持极简设计，适合快速开发小型项目或构建API服务。本文通过具体代码示例展示Bottle框架的独特魅力，从安装到创建应用、路由设置、模板渲染及表单处理等方面进行详细介绍，帮助读者轻松上手并掌握Bottle的应用技巧。
土木林森
134 1
土木林森
|
7月前
|
中间件 API 开发者
Bottle框架探秘：如何用几行代码搅动Web开发江湖？
【8月更文挑战第31天】Bottle是一个仅依赖Python标准库的轻量级Web开发微框架，无需额外依赖，简化部署与维护。它以简洁高效著称，适合快速构建Web应用。通过简单的示例即可上手，如用几行代码实现“Hello World”应用。除基础功能外，Bottle还支持模板渲染、会话管理和表单处理等，适用于学习及小型项目，也能在高性能要求的应用中展现价值。无论是新手还是有经验的开发者，Bottle都是高效Web开发的理想选择。
土木林森
70 1
丰宝宝
|
7月前
|
缓存 安全 PHP
深入浅出PHP框架：Laravel的优雅之旅
【8月更文挑战第15天】 探索PHP世界里的瑰宝，Laravel框架以其优雅、简洁著称。本文将带你领略Laravel的核心魅力，从安装到构建应用，再到高级特性的应用，让你轻松驾驭这个强大的工具。无论你是PHP新手还是资深开发者，这篇文章都将成为你理解并使用Laravel的指南针。
丰宝宝
65 2
sunrr
|
10月前
|
缓存 前端开发 JavaScript
前端基础知识
【5月更文挑战第8天】前端基础知识
sunrr
87 5
低代码布道师
|
10月前
|
前端开发
前端开发入门教程分享
前端开发入门教程分享
低代码布道师
102 0
auqbllxiu
|
SQL 前端开发 Shell
Django框架入门
Django框架入门
auqbllxiu
235 0
码二
|
存储 缓存 JavaScript
我学会了，react上手知识点(下篇)
本篇文章记录的是上手react并做好一个React项目的大概知识点，比如antd、transition、redux、react-redux、middleware、reducer、router、hooks等等。
码二
256 0
我学会了，react上手知识点(下篇)
mysoul8021
|
NoSQL JavaScript 中间件
知新 | koa框架入门到熟练第二章
这里对koa-bodyparser的使用教程。
mysoul8021
579 0
fundebug
|
前端开发
Vue开发入门看这篇文章就够了
摘要： 很多值得了解的细节。 原文：Vue开发看这篇文章就够了 作者：Random Fundebug经授权转载，版权归原作者所有。 介绍 Vue 中文网 Vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的区别？ Library 库，本质上是一些函数的集合。
fundebug
10852 0

Java技术进阶

热门文章

最新文章

  • 1
    域名ICP备案时网站备注到底该怎么写？全网最全教程来了
  • 2
    【玩转AIGC系列】使用Megatron-Deepspeed训练GPT-2并生成文本
  • 3
    专注精准：垂直领域模型的深度解析
  • 4
    图床软件竟然要收费，算了我自己写一个免费的
  • 5
    成功解决FileNotFoundError: [Errno 2] No such file or directory: 'C:\\Users\\niu\\AppData\\Local\\Temp\\p
  • 6
    dd命令使用
  • 7
    Lnmp安装收集资料
  • 8
    Fortinet重组进行中：Q4收益及预期良好 股价上涨
  • 9
    zendframework配置篇
  • 10
    .Net Winform 开发笔记（四） 透过现象看本质
  • 1
    量子算法的设计与优化：迈向量子计算的未来
    21
  • 2
    基于AI的自动化服务器管理：解锁运维的未来
    26
  • 3
    出道吧！阿里巴巴蛇年新春红包！
    21
  • 4
    大数据与金融科技：革新金融行业的动力引擎
    21
  • 5
    AI，正在帮老师们上“隐形的班”
    20
  • 6
    一键穿毛衣，通义邀你暖洋洋过冬
    10
  • 7
    通义鸿蒙原生版上线啦！
    10
  • 8
    【源码】【Java并发】【线程池】邀请您从0-1阅读ThreadPoolExecutor源码
    20
  • 9
    身为AI，班味怎么这么浓啊？
    13
  • 10
    今天的功德，在通义代码模式攒足了......
    11

    • 相关课程

    更多
  • PHP进阶教程 - 由浅入深掌握面向对象开发 - 第二阶段
  • JavaScript 自学手册文档教程
  • Go语言完全自学手册图文教程
  • React 入门教程开发文档
  • C++ 入门教程开发文档
  • JavaScript入门与实战

    • 相关电子书

    更多
  • 2020前端工程师必读手册
  • 2020前端工程师必读手册
  • ReactNative实战优化之路

    • 相关实验场景

    更多
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 语言入门-1：环境构建
  • 前端开发基础1：前端开发环境的安装和配置
  • 基于函数计算快速搭建Zblog等传统应用框架
    • 下一篇
    通义万相：视觉生成大模型再进化