全栈项目规划

所以，本周我本打算发布我的 MERN 堆栈项目系列的下一篇文章，但我意识到，由于没有讨论正确的项目规划，我遗漏了项目流程的很大一部分。对于我的大多数项目，尤其是最近的项目，我一直遵循一个规划流程，它帮助我将项目分解成几个部分，从而提高我的构建效率。

以下是基本项目规划细目：

• 范围
• 数据库建模
• API 端点规划
• 后端构建
• 后端测试
• 线框图/草图
• 组件规划
• 前端构建
• 前端测试

以下是该过程每个部分的问题和要素......

范围

这一步只是规划项目的范围。您是否同时构建后端和前端？您是否需要考虑用户身份验证？您是否会使用任何外部/第三方 API？

数据库建模

如果您决定构建一个全栈项目，您将使用什么数据库？您需要哪些数据库模型？如果您使用关系数据库，那么模型之间需要哪些关系？如果您使用 MongoDB，您是否有可用的集群来存放您的数据集合？

API 端点规划

数据库设置完毕，现在该规划端点了！每个模型都需要完整的 CRUD 端点吗？API 中需要处理查询参数吗？哪些端点是公开的，哪些是受保护的？如何保护那些无法公开访问的端点？

后端构建

开始构建吧！你用的是 Rails、Express、Django 还是其他什么？你的 API 托管在哪里？

后端测试

测试你的代码，伙计们！使用你选择的测试框架/工具，构建测试。我也非常喜欢使用 Postwoman/Postman 或 Insomnia 之类的工具来手动测试 API 端点。它们可以让你模拟 API 调用，以确保你的响应符合预期。

线框图/草图

我们终于进入了前端设计！🎉
这一步至关重要，也是我最常跳过并后悔的一步。
即使你不认为自己是设计师，勾勒出一个基本的概念布局也能让编码过程变得简单得多。如果你使用像 Material UI 或 Bootstrap 这样的 UI 库，这一步会更容易，因为你可以提前规划好要使用的组件/类。

组件规划

如果你正在使用像 React 这样基于组件的框架，那么最好仔细查看你的草图并将其分解成组件。你的容器在哪里？哪些组件负责维护状态？你能为你的应用创建一个“单一数据源”来控制状态吗？提前做好规划可以让你避免日后很多挫败感。

前端构建

我们成功了，各位！我们进入了前端构建流程！
虽然表面上看这是最后一步，但它肯定是耗时最长的一步。
你知道要使用哪些框架或 CSS 预处理器吗（如果有）？字体、颜色和样式元素都选好了吗？你会持续使用它们吗？你的设计是否以移动端为先，并且考虑到了可访问性？如果没有，你应该这样做！

前端测试

此步骤与之前的构建测试紧密相关。请边测试边编写，并确保适当覆盖边缘情况。您是如何从 UI 角度处理错误的？您的应用或网站在失败时表现如何？如果没有，您如何更好地为用户处理错误？

用户测试

如果你雄心勃勃，并且不介意与他人分享你的项目，那么向用户征求意见是个好主意。他们可能会发现你遗漏的极端情况，或者为你的应用提供改进建议，而这些建议你可能因为过于深入项目而无法独自发现。

对于首次进行作品集项目的新手来说，这份清单可能显得冗长且令人望而生畏，但不必担心！这份清单和整个流程我最喜欢的一点是，每一步都相对独立，并且每一步都建立在上一步的基础之上。而且，你不必提前规划好一切。也许你会先规划好数据库和 API 端点，然后开始构建后端，然后再真正开始考虑前端。又或者，你会先设计一个非常漂亮的前端模型，然后再规划一个与该设计相契合的后端。

无论如何，计划才是关键！我最近才掌握了正确的项目规划方法，这让整个过程效率大大提升。

我希望这份清单能帮助您更高效地完成下一个项目！

xx
Emily / TheCodePixi

本文最初发布于TheCodePixi.dev/blog