【Node.js实战】一文带你开发博客项目之初识Koa2(koa2安装使用、搭建开发环境、测试路由)

文章介绍了从Express框架转向Koa2的原因,详细讲解了async/await的用法,并通过一个博客项目展示了如何在Koa2中使用。作者还分享了如何安装和配置Koa2,创建路由,以及进行异步操作的测试。文章最后提到,将继续对项目进行不同框架和数据库的重构。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

个人简介

👀个人主页: 前端杂货铺
🙋‍♂️学习方向: 主攻前端方向,也会涉及到服务端
📃个人状态: 在校大学生一枚,已拿多个前端 offer(秋招)
🚀未来打算: 为中国的工业软件事业效力n年
🥇推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2&Vue3项目实战 🥝Node.js🍒Three.js
🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧

Node.js系列文章目录

内容参考链接
Node.js(一)初识 Node.js
Node.js(二)Node.js——开发博客项目之接口
Node.js(三)Node.js——一文带你开发博客项目(使用假数据处理)
Node.js(四)Node.js——开发博客项目之MySQL基础
Node.js(五)Node.js——开发博客项目之API对接MySQL
Node.js(六)Node.js——开发博客项目之登录(前置知识)
Node.js(七)Node.js——开发博客项目之登录(对接完毕)
Node.js(八)Node.js——开发开发博客项目之联调
Node.js(九)Node.js——开发博客项目之日志
Node.js(十)Node.js——开发博客项目之安全
Node.js(十 一)Node.js——开发博客项目之初识 Express
Node.js(十二)Node.js——开发博客项目之 Express 重构


一、前言

前面,我们已经完成了 原生node.jsExpress 框架 的 myblog 项目。

对比:express 中间件是异步回调,koa2 原生支持 async/await。

接下来,我们使用 koa2 继续重构我们的 myblog 项目!

二、介绍 Koa2

1、async / await

async / await 要点:

  1. await 后面可以追加 promise 对象,获取 resolve 的值
  2. await 必须包裹在 async 函数里面
  3. async 函数执行返回的也是一个 promise 对象
  4. try-catch 截获 promise 中 reject 的值

下面我们新建一个 index.js 文件和几个 xx.json 文件,进行一下 async / await 的测试

index.js

const fs = require('fs')
const path = require('path')

// 用 promise 获取文件内容
function getFileContent(fileName) {
    const promise = new Promise((resolve, reject) => {
        // 获取文件全名
        const fullFileName = path.resolve(__dirname, 'files', fileName)
        // 读取文件
        fs.readFile(fullFileName, (err, data) => {
            if (err) {
                reject(err)
                return
            }
            resolve(
                JSON.parse(data.toString())
            )
        })
    })
    return promise
}

async function readFileData() {
    try {
        const aData = await getFileContent('a.json')
        console.log('a data', aData)
        const bData = await getFileContent(aData.next)
        console.log('b data', bData)
        const cData = await getFileContent(bData.next)
        console.log('c data', cData)
    } catch {
        console.error(err)
    }
}

readFileData()

a.json

{
    "next": "b.json",
    "msg": "this is a"
}

b.json

{
    "next": "c.json",
    "msg": "this is b"
}

c.json

{
    "next": null,
    "msg": "this is c"
}

在这里插入图片描述

2、安装 koa2

安装 Koa 项目的脚手架工具

npm install koa-generator -g

创建 blog-koa2 项目

koa2 blog-koa2

安装依赖

npm install

安装环境参数

npm i cross-env --save-dev

修改 package.json 文件(开发环境dev和生成环境prd)

package.json

  "scripts": {
  	......
    "dev": "cross-env NODE_ENV=dev ./node_modules/.bin/nodemon bin/www",
    "prd": "cross-env NODE_ENV=production pm2 start bin/www",
  },

修改 www.js 代码中的 port 端口为 8000

var port = normalizePort(process.env.PORT || '8000');

终端运行:

在这里插入图片描述


三、测试路由

首先我们参照 ./routers/index.js 或 ./routers/users.js 创建 blogs.js 文件

在这里插入图片描述

我们在 blog.js 文件中写路由前缀为 /api/blog,创建请求类型为 get 的 list 接口

blog.js

const router = require('koa-router')()

// 前缀
router.prefix('/api/blog')

router.get('/list', async function (ctx, next) {
    const query =  ctx.query
    ctx.body = {
        errno: 0,
        query,
        data: ['获取博客列表']
    }
})


module.exports = router

修改 app.js 文件,导入并使用 blog 路由

app.js

const blog = require('./routes/blog')
......
app.use(blog.routes(), blog.allowedMethods())

在这里插入图片描述

在这里插入图片描述


同理,接下来我们创建并配置 user.js 路由

user.js

const router = require('koa-router')()

// 前缀
router.prefix('/api/user')

// 路由的中间件必须是个 async 函数
router.post('/login', async function (ctx, next) {
    // 通过 request.body 获取
    const {username, password} = ctx.request.body
    ctx.body = {
        errno: 0,
        username,
        password
    }
})

module.exports = router

app.js

const user = require('./routes/user')
......
app.use(user.routes(), user.allowedMethods())

通过 postman/apipost 接口测试工具测试

在这里插入图片描述


四、写在最后

至此,我们明白了 async / await 实现异步的写法、如何安装koa2、如何搭建开发环境以及一些路由的测试, 继续跟进学习吧!

后续会对该项目进行多次重构【多种框架(express,koa)和数据库(mysql,sequelize,mongodb)】

如果你需要该项目的 源码,请通过本篇文章最下面的方式 加入 进来~~


在这里插入图片描述


评论 39
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端杂货铺

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值