使用 JSON 占位符自定义 API

在前端开发中，我们经常需要从后端获取数据。为了方便调用，我们通常会定义一些 API 接口，然后在前端代码中通过 AJAX 请求来获取数据。但是，在开发初期或者数据结构不确定的情况下，定义 API 接口可能会比较困难。这时，我们可以使用 JSON 占位符来自定义 API 接口。

什么是 JSON 占位符

JSON 占位符是一种类似于模板的概念，它允许我们在 JSON 数据中使用变量。在发送请求时，我们可以使用参数来填充这些占位符，从而生成实际的数据。

JSON 占位符一般使用两对花括号包含，例如：

{
  "id": "{{id}}",
  "name": "{{name}}",
  "age": {{age}},
  "skills": [{{skills}}]
}

在上面的 JSON 数据中，{{id}}、{{name}} 和 {{skills}} 都是占位符，它们可以接受字符串类型的参数，而 {{age}} 则可以接受数字类型的参数。

自定义 API 接口

有了 JSON 占位符，我们就可以动态地生成 API 接口了。假设有一个接口需要根据用户的 ID 返回用户的信息：

{
  "id": "{{id}}",
  "name": "张三",
  "age": 18,
  "skills": ["JavaScript", "CSS", "HTML"]
}

我们可以将这段 JSON 数据保存到一个文件中（比如 user.json），然后使用一个静态路由来将请求转发到这个文件：

const express = require('express');
const app = express();

app.get('/api/user/:id', (req, res) => {
  const data = require('./user.json').replace(/{{id}}/g, req.params.id);
  res.json(JSON.parse(data));
});

app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

在上面的例子中，我们使用了 Express 框架来创建一个简单的 Web 服务器。当用户请求 /api/user/:id 接口时，我们将请求参数中的 :id 替换到 JSON 数据中的占位符 {{id}} 中，然后将生成的 JSON 数据返回给用户。

参数校验

使用 JSON 占位符可以轻松地生成 API 接口，但是我们也需要对参数进行一些校验以保证数据的正确性。可以使用第三方模块来实现参数校验，比如 joi、ajv 等。

const express = require('express');
const Joi = require('joi');
const app = express();

const userSchema = Joi.object({
  id: Joi.string().required(),
  name: Joi.string().required(),
  age: Joi.number().required(),
  skills: Joi.array().items(Joi.string()).required()
});

app.get('/api/user/:id', (req, res) => {
  const data = require('./user.json').replace(/{{id}}/g, req.params.id);
  const user = JSON.parse(data);

  const { error } = userSchema.validate(user);
  if (error) {
    res.status(400).send(error.details[0].message);
  } else {
    res.json(user);
  }
});

app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

在上面的例子中，我们使用 joi 模块来定义一个用户数据的 Schema，然后在路由中校验生成的 JSON 数据是否符合这个 Schema。如果数据校验失败，我们将返回一个 400 错误码和错误信息，反之则返回数据。