「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。

前言

选用Koa作为web框架，用三篇文章讲解Node.js编写接口、服务端渲染（SSR）和MySQL数据库

🚩学习目标

用Koa一共实现5个GET和POST请求

GET请求-返回文本
GET请求-返回JSON
GET请求-带参数
GET请求-路由传参
POST请求-带参数

Koa是什么？

Koa是基于Node.js实现的web框架。是一款轻量的框架，所有功能通过插件实现。

👉 koa中文网 www.koajs.com.cn

除Koa以外，Node.js的web框架还有很多，选择Koa的原因是学习路线简单，上手速度快

Express
Nest
Hapi
Egg（基于koa）

1. 准备工作

🚧Node.js 版本 >= 10

全局安装koa-generator和koa2

npm install -g koa-generator koa2

koa-generator是Koa的脚手架，能快速生成项目结构。先了解一下怎么用

举个栗子🌰

创建名为“vue-serve”的项目

koa2 vue-serve

创建名为“vue-serve”的项目，使用ejs模板和 sasscss编译

koa2 vue-serve -e -c sass

两个命令的创建结果对比（你就不要建两次了，看看就得嘞🤡）

koa-generator其他参数

参数	用途
-e	使用ejs模板引擎（默认使用pug）	ejs.bootcss.com
--hbs	使用handlebars模板引擎	www.handlebarsjs.cn
-H	使用 hogan.js 模板引擎	twitter.github.io/hogan.js
-n	使用 nunjucks 模板引擎	nunjucks.bootcss.com

-c	指定 css编译器（less\|stylus\|compass\|sass）（默认使用css）

-f	强制目录不能为空

* 这里提到的模板引擎也是我们的服务端渲染的引擎

下面实践开始

2. 创建工程

新建项目 learn-Pug

koa2 learn-Pug

初始化项目

cd learn-Pug && npm i

启动项目

npm run start

浏览器输入http://localhost:3000，出现Hello Koa2!表示项目运行成功

koa默认端口3000

3. 解析过程

koa-generator生成好了路由和模板调用，我们只需要看routes和views两个文件夹。

过程

根据访问的url去匹配路由
根据路由返回数据或使用Pug返回HTML
浏览器看到结果

流程.png

3.1 💥热更新

npm run start 启动后，修改代码只能重启koa才看到效果，我们改用dev，方便查看结果

npm run dev

如果出现报错

'.' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
 ELIFECYCLE  Command failed with exit code 1.

将package.json中的dev改成，再重新运行

"scripts": {
	"dev": "nodemon bin/www",
}

3.2 在Chrome中调试Node

将package.json中添加一行运行debug

"scripts": {
	"debug": "nodemon --inspect bin/www",
}

启动调试

npm run debug

访问 localhost:3000 任意接口
F12打开开发者工具
element左边多了Node图标（如果没有，稍等一下或重新启动），点击进入新面板

在Sources选项中打开调试的文件就可以了

4. 请求

4.1 GET-返回文本

打开index.js，从第9行开始，找到这一段代码

router.get('/string', async (ctx, next) => {
  ctx.body = 'koa2 string'
})

访问loclhost:3000/string，看到koa2 string

4.2 GET-返回JSON

打开index.js，从第13行开始，找到这一段代码

router.get('/json', async (ctx, next) => {
  ctx.body = {
    title: 'koa2 json'
  }
})

这次用工具请求loclhost:3000/json

我用Hoppscotch（原名postwoman）你也可以用其他请求工具，postman，apifox，apipost等

👉 GitHub

4.3 GET-参数

在index.js中新建一个带参数的get请求

// http://localhost:3000/get?size=100

router.get('/get', async (ctx, next) => {
  const { size } = ctx.query
  ctx.body = `您的size参数是${size}`
})

访问http://localhost:3000/get?size=100

4.4 GET-路由传参

在index.js中新建get请求

// http://localhost:3000/get/koa
router.get('/get/:id', async (ctx, next) => {
  const { id } = ctx.params
  ctx.body = `您的id参数是${id}`
})

4.5 POST-参数

模板中没有post请求，在index.js中新建一个post请求

请求参数：name 和 id

router.post('/juejin', async (ctx, next) => {
  const { name, id } = ctx.request.body
  ctx.body = {
    name:`您的用户名是${name}`,
    id: `${id}`,
  }
})

用工具请求loclhost:3000/juejin

请求参数：

{
  "name":"Maokai",
  "id":1
}

看到结果

4.6 其他请求

koa-router还支持put，del，all请求，详细的看这里 👉Github

router
  .put('/juejin/:id', (ctx, next) => {
    // ...
  })
  .del('/juejin/:id', (ctx, next) => {
    // ...
  })
  .all('/juejin/:id', (ctx, next) => {
    // ...
  });

5. 子路由

了解完index.js后，打开users.js

子路由是为了避免所有路由写在一个文件，降低维护难度

第3行，表示该文件下的所有路由都有/users前缀

router.prefix('/users')

/ = /users

/bar = /users/bar

引用子路由

定义完子路由以后要在app.js中添加引用，注意第9行和第36行

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

新建路由文件后，在后面添加即可

6. next

前面一直没有讲请求中的next是干嘛的，涉及Koa的洋葱模型

用来改变中间件的执行顺序

借用某CSDN博主的栗子 👉原文


const one = (ctx, next) => {
  console.log('👉 one');
  next();
  console.log('<< one');
}
 
const two = (ctx, next) => {
  console.log('👉 two');
  next();
  console.log('<< two');
}
 
const three = (ctx, next) => {
  console.log('👉 three');
  next();
  console.log('<< three');
}
 
app.use(one);
app.use(two);
app.use(three);
 
输出结果：
👉 one
👉 two
👉 three
<< three
<< two
<< one

最后

学会路由用法，就能给自己的vue，react项目写接口试试啦，而且是前后分离的哦~

👇👇👇下一篇讲服务端渲染

😜万水千山总是情，点个关注行不行~

🌰举几个栗子，用Koa两天入门Node.js后端开发（一）

前言