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

简介: 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());

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

目录
相关文章
|
8月前
|
Web App开发 前端开发 开发工具
介绍Web开发的基础知识
介绍Web开发的基础知识
132 7
|
8月前
|
数据处理 开发者
【Uniapp 专栏】提升 Uniapp 开发效率的进阶方法
【5月更文挑战第17天】提升Uniapp开发效率的关键包括组件化、模板语法、数据处理和代码组织。通过封装组件如通用按钮,利用列表渲染生成多个元素,使用计算属性和方法处理复杂逻辑,以及采用预处理器如Sass编写样式。此外,良好的代码结构和使用开发者工具进行调试也是重要环节。掌握这些进阶技巧能帮助开发者更高效地构建高质量应用。
151 2
【Uniapp 专栏】提升 Uniapp 开发效率的进阶方法
|
4月前
|
JavaScript 前端开发 中间件
Redux从入门到进阶,看这一篇就够了!
该文章全面介绍了Redux的基本概念与使用方法,从Redux的安装配置到结合React应用的状态管理,再到中间件如Redux-thunk的使用,帮助读者从零开始掌握Redux在复杂应用中的实践应用。
|
5月前
|
缓存 安全 PHP
深入浅出PHP框架:Laravel的优雅之旅
【8月更文挑战第15天】 探索PHP世界里的瑰宝,Laravel框架以其优雅、简洁著称。本文将带你领略Laravel的核心魅力,从安装到构建应用,再到高级特性的应用,让你轻松驾驭这个强大的工具。无论你是PHP新手还是资深开发者,这篇文章都将成为你理解并使用Laravel的指南针。
58 2
|
8月前
|
搜索推荐 开发者
【Uniapp 专栏】探究 Uniapp 组件化开发的奥秘
【5月更文挑战第12天】Uniapp的组件化开发模式正引领移动应用开发潮流,提升开发效率并简化维护。通过将应用拆分为独立、可复用的组件,开发者能快速构建和优化功能,降低出错风险。基础组件满足基本需求,自定义组件则针对特定业务场景。Uniapp提供简洁的组件定义、通信支持及组件库管理,促进数据共享和功能协同。然而,组件设计需考虑通用性、扩展性和依赖管理。组件化开发在Uniapp中日益重要,为开发者创造更多价值,激发创新潜力。
103 4
【Uniapp 专栏】探究 Uniapp 组件化开发的奥秘
|
6月前
|
JavaScript 前端开发
前端学习核心框架Vue2基础入门+实战教程
前端学习核心框架Vue2基础入门+实战教程
|
8月前
|
缓存 前端开发 JavaScript
前端基础知识
【5月更文挑战第8天】前端基础知识
80 5
|
8月前
|
前端开发
前端开发入门教程分享
前端开发入门教程分享
|
设计模式 前端开发 JavaScript
前端Web开发学习,入门到进阶,推荐几本很不错的书籍
前端Web开发学习,入门到进阶,推荐几本很不错的书籍
181 0
|
设计模式 缓存 运维
前端“老油条”给初学者的一些建议
这篇文章主要是介绍下现有的一些大厂的工作模式以及使用的技术栈以及经验,如果你是高手的话那可以忽略了,如果是初学者我建议是可以看看的。可以作为一个初步了解,可以从侧面看出自己应该学习哪些技术和知识,学习更多有用的东西,目标更加的明确。
122 0
前端“老油条”给初学者的一些建议