使用真正的 REST API 开发前端代码，无需放慢速度去请求后端开发。
你是否遇到过这种情况？你正在收集用户故事的需求，审查线框图和设计稿，看起来你已经掌握了在前端代码中实现某个功能所需的一切……但是 API 开发团队却还没准备好同时开始开发这个功能？
你可以把这项任务推迟到下一个迭代周期。
您可以在项目中使用静态数据有效负载进行开发。
你可以用 Express 编写一个测试 API 端点，专门用于本地开发。（这对于本地测试也非常方便。）
一般来说，第三种方案可能是最佳选择，但如果您不想处理后端代码呢？我建议您在前端项目旁边运行一个Strapi 应用。Strapi 几乎无需任何配置即可搭建新的 API 服务器，并且它拥有非常友好的可视化管理界面，方便您管理 API 的所有细节。
Strapi是什么？我认为它像是Rails、Laravel或ASP.NET Core这类MVC框架，以及Contentful这类无头CMS的结合体。它允许你在可视化编辑器中构建数据库模式，然后通过REST接口对这些新模式执行所有基本的CRUD操作，以及排序、筛选和分页。它支持模型之间的高级关系。此外，它还内置了用户账户管理和身份验证系统。它还提供电子邮件和文件上传插件，只需极少的配置即可快速上手。
可视化 API 编辑器的速度和灵活性非常适合快速原型设计，当后端开发人员需要查看最终 API 的外观时，您可以向他们展示您在 Strapi 中构建的 schema，或者分享您从该 Strapi 项目导出的 TypeScript 定义。（稍后会详细介绍。）
入门
首先，我会克隆这个仓库https://github.com/strapi/strapi-docker，并将其用作你自己的项目的起点，或者将相关部分复制到你的其他前端项目中。
您需要事先在本地运行Docker，我强烈建议您这样做，因为它能让您的开发环境更易于移植和复现。其他下载您代码库的开发者只需几个命令就能搭建出与当前本地开发环境相同的环境。
获取到该仓库后，您只需在该目录下运行此命令即可。
docker-compose up
它将在内部创建你的新Strapi应用程序./strapi-app，并将你的MongoDB数据存储在内部./data。
您可以通过http://localhost:1337/admin访问管理界面。
docker-compose.yml如果您想自定义容器名称或容器安装目录的名称，我建议您打开文件并通读一遍。我将“db”移动到了“data/mongodb/”目录下，并将“strapi-app/”移动到了“cms/”目录下。
我将这两个文件夹添加到我的.gitignore文件中。
data/*
cms/*
在 Strapi 管理后台创建新的模式和端点时，实际上会创建新的文件和文件夹，你需要将它们提交到 Git 仓库。因此，请在你的.gitignore文件中添加以下这行代码。
!cms/api
数据种子
您可能还会问，如何将我的服务配置和数据从本地 MongoDB 中导出，并让其他开发人员导入它们？
您可以创建脚本，将 MongoDB 中的数据导出为 JSON 格式，然后在 Docker 创建容器后将其导入回去。
我会在 mongodb 配置中挂载一个额外的文件系统点。
volumes:
- ./data/mongodb:/data/db
- ./seed:/data/seed
这是我的export.sh剧本。
#!/bin/sh
docker exec project-dev-cms_mongodb_1 /bin/sh -c "mongoexport -d strapi -c users-permissions_permission -o /data/seed/permission.json"
docker exec project-dev-cms_mongodb_1 /bin/sh -c "mongoexport -d strapi -c users-permissions_role -o /data/seed/role.json"
docker exec project-dev-cms_mongodb_1 /bin/sh -c "mongoexport -d strapi -c users-permissions_user -o /data/seed/user.json"
docker exec project-dev-cms_mongodb_1 /bin/sh -c "mongoexport -d strapi -c panel -o /data/seed/panels.json"
docker exec project-dev-cms_mongodb_1 /bin/sh -c "mongoexport -d strapi -c panelitem -o /data/seed/panelItems.json"
/seed/*.json运行该命令，然后使用Git提交对文件的更改，以便其他人可以共享您的数据。
当您设置项目或需要同步数据时，您可以运行类似这样的脚本import.sh。
#!/bin/sh
docker exec project-dev-cms_mongodb_1 /bin/sh -c "mongoimport -d strapi -c users-permissions_permission /data/seed/permission.json"
docker exec project-dev-cms_mongodb_1 /bin/sh -c "mongoimport -d strapi -c users-permissions_role /data/seed/role.json"
docker exec project-dev-cms_mongodb_1 /bin/sh -c "mongoimport -d strapi -c users-permissions_user /data/seed/user.json"
docker exec project-dev-cms_mongodb_1 /bin/sh -c "mongoimport -d strapi -c panel /data/seed/panels.json"
docker exec project-dev-cms_mongodb_1 /bin/sh -c "mongoimport -d strapi -c panelitem /data/seed/panelItems.json"
即使你不依赖其他团队来开发你的 API，了解如何做到这一点也可能很有用，这样你就可以在不需要大规模后端开发的较小项目中担任自己的后端开发人员。
获取 Strapi Schema 的 TypeScript 定义
我一直推荐使用 TypeScript。如果你想快速将所有模式数据导入到前端代码中，可以直接从 API 模型中提取定义。
这个项目——strapi-to-typescript——会扫描你的strapi项目中的settings.json文件，并在你想要的任何位置创建匹配的.ts接口文件。
结果是这样的：
{
"connection": "default",
"collectionName": "panel",
"info": {
"name": "panel",
"description": ""
},
"options": {
"timestamps": true
},
"attributes": {
"Title": {
"default": "",
"type": "string"
},
"Instructions": {
"default": "",
"type": "string"
},
"Minifiable": {
"default": false,
"type": "boolean"
}
}
}
变成这样：
/**
* Model definition for panel
*/
export interface IPanel {
id: string;
Title?: string;
Instructions?: string;
Minifiable?: boolean;
}
维奥拉！🎉
遇到问题了吗？请在评论区告诉我进展情况。
文章来源：https://dev.to/sirtimbly/develop-front-end-code-with-a-real-rest-api-without-slowing-down-to-ask-for-back-end-development-377j