Express实现WebAPI之请求实现与调试

概要

Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用。本文主要介绍如何使用express创建WebAPI，实现Post或Get请求，以及如何使用Thunder Client调试这些WebAPI。

代码和实现

环境搭建请参看我的博文Express实现WebAPI之环境搭建

代码组织

项目初始代码请参看我的博文Express实现WebAPI之环境搭建。

创建controllers和routes目录。

• controllers目录保存WebAPI的Action方法。
• routes目录保存Actions方法，router和middleware之间的映射。
• 本文以一个Get请求一个Post请求，说明在Express中如何创建具体的WebAPI。

Action方法和参数解析

1. 在controllers目录创建test目录
2. 在test目录中创建index.js.，用于实现Action方法。对于复杂的应用，我们可以以index.js作为出口文件，再创建更多的js文件保存Acton方法。本例只是一个demo，逻辑简单，所以在index.js中，直接定义Action方法。

const {StatusCodes} = require("http-status-codes");
const getMsg =  async (req,res) => {
    const {id} = req.query;
    res.status(StatusCodes.OK).json({
        msg : "get request is success",
        id:id

    });
};
const postMsg =  async (req,res) => {
    const {age,name} = req.body;
    const {id} = req.params;
    res.status(StatusCodes.OK).json({
        msg : `post request is success `  ,
        forms: `form parameter age is ${age} and name is ${name}`,
        id:id
    });
};

module.exports = {
    getMsg, postMsg
}

1. 引入StatusCodes以规范WebAPI的返回的Http状态码
2. 每个Action方法包括两个参数，request和response。request用于读取路由，表单和URL参数，response用于返回指定的数据。
3. getMsg 方法需要从URL中读取id，对赢req.query的query对象
4. postMsg 需要从路由读取id，从表单中读取age和name，其中，路由参数通过req.params读取，表单参数通过req.body获取。

路由的实现

1. 在routes目录创建test目录
2. 在test目录中创建index.js.，用于实现路由。

const express = require('express')
const router = express.Router()

const { getMsg, postMsg } = require('../../controllers/test');

router.route('/msg').get(getMsg);
router.route('/msg/:id').post(postMsg);

module.exports = router

1. 导入我们定义的Action方法。
2. getMsg映射为Get请求，请求URI为/msg
3. postMsg映射为Post请求，请求的URI为/msg/:id， 其中id为数字。

在服务器实例中引入路由

在index.js中加入路由msgRouter

require('dotenv').config({path:'.env'});
const express = require('express');
const app = express();
const bodyParser = require("body-parser");
const port = process.env.PORT || 5000;
const msgRouter = require("./routes/test/");

app.use(bodyParser.urlencoded({
    extended: true
}));
app.use(bodyParser.json());

app.use('/api/v1', msgRouter);
const start = async () => {
    try {
        app.listen(port, ()=>{
            console.log(`Server is listening on port ${port}...`)
        });
    } catch (error) {
        console.log(error);
    }
}

start();

1. 引入bodyParser，以处理post请求的表单数据，表单数据可以按照url encoded方式放入请求的body中，bodyParser可以将其解析为普通JS对象。
2. 将msgRouter放入全局中间件中，所有/api/v1开头的请求，都将被msgRouter解析。

WebAPI调试

Thunder Client工具

Thunder Client可以实现和Postman一样的效果，并且我们可以将其直接作为插件安装在VSCode中。

Get请求/api/v1/msg?id=100调试

URL参数id被成功解析，Get请求执行成功

Post请求/api/v1/msg/:id调试

表单参数按照之前配置，选择Form-encode模式

路由参数id解析成功，表单的参数name和age解析成功

对于表单参数，我们也可以选择json模式，只是需要在请求头中，增加一个Content-Type是application/json的配置

如下图所示

创建json对象作为参数，表单参数一样可以解析成功，如下图所示

相关文章

Express实现WebAPI之环境搭建
Express实现WebAPI之请求实现与调试
Express实现WebAPI之错误异常处理