个人简介

👀个人主页： 前端杂货铺
🙋‍♂️学习方向： 主攻前端方向，也会涉及到服务端
📃个人状态： 在校大学生一枚，已拿多个前端 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.js 和 Express 框架 的 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）】

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

---

---