我的第一个个人项目🥳

好吧，我不知道我是否准备好独自飞行......也许我永远无法完成这个项目，但我不在乎！

现在我面对着这个空目录，没有人可以帮助我（除了我的老朋友Google）。

1. 规划应用程序

a. 想法

我不会在这里深入探讨一些我不可能完成的事情。
这个想法很简单，它将是一个简单的应用程序，您可以在其中验证和销售产品。注册用户可以添加一些关于他们的信息并访问他们的订单。最后，注册用户还可以发送订单购买任何可用的产品。

b. 特点

-身份验证
-添加/删除产品。-
浏览产品。-
订购产品。-
访问订单。

c. 前端

前端部分将使用 React.Js 编写，我认为 context API 足以管理我的应用状态。
将包含 4 个页面：
-(/auth) 注册和登录。-
(/profile/products) 管理产品。-
(/profile/orders) 管理订单。-
(/) 浏览产品。

d.后端

后端是一个使用 Node/Express 构建的 Rest API，我使用 MongoDB 存储数据。
我的 API 端点：-(
GET)(api/products) 发送所有产品。-
(GET)(api/products/:userId) 发送当前用户的产品。-
(POST)(api/products) 添加产品。-
(DELETE)(api/products/:pid) 删除产品。-
(POST)(api/users/signup) 注册。-
(POST)(api/users/login) 登录。-
(GET)(api/orders/:uid) 发送用户订单。-
(POST)(api/orders) 添加新订单。

2. 流程

a. 前端

-全新 React 项目由

npx create-react-app

-我创建我的页面并开始使用 react-router-dom 包进行路由。

-让我们设计我的核心组件，我正在设计一个非常简单的设计，因为我更喜欢专注于逻辑。

-我的大多数组件状态都是由反应钩子管理的，到目前为止，它可以很好地获取/添加/删除产品。

刚刚完成了一个包含背景的 Modal 组件。它们都是用 ReactDOM.createPortal() 渲染的；

-从现在开始，我可以使用我的表单组件将数据发送到我的后端，但我仍然缺少输入验证......

-在网上浏览了一段时间后，我确实设法在我的应用程序中实现了 React 上下文来管理用户身份验证状态。

-用户可以根据需要保持登录状态，我将用户 ID 和令牌存储在本地存储中。

b. 后端

-让我们从我的 app.js 文件开始。

-我正在安装 Express、BodyParser、nodemon、cors 和 Mongoose。

-Cors 和 BodyParser 已启用，现在是时候创建我的路线并连接到 MongoDb 了。

-在这里我必须为我的用户、订单和产品构建最好的猫鼬模型。

-现在开始认真工作，我正在构建我的控制器并使用Postman测试我的端点

-测试我的错误处理中间件。

- 产品和用户路线看起来不错。

-参考我之前的项目，我成功地在 MongoDB 文档之间添加了关联。将产品或订单添加到数据库后，用户数据也能正确更新。

c. 前后连接

-感谢 axios，我可以开始从后端获取虚拟数据以确保一切正常。

-身份验证似乎有效，我正尝试将带有 JWT 的令牌从后端发送回前端并将其存储在某个地方。

-添加了一个中间件来检查用户的令牌是否真实，并保护需要用户进行身份验证的路由。

3. 构建和部署

-使用 CLI 将后端推送到 heroku（我总是惊讶于它是多么快速和容易）。

-配置环境变量并测试所有路由。

-前端由 firebase 托管，一切按预期运行。

这个全栈项目现已上线🤩✅

不管这个应用有多少 bug，有多笨，我都玩得很开心！而且，我也很自豪，因为我实现了所有我想要的功能。

我可以花时间改进用户体验、修复布局错误和添加功能（该死，仍然没有输入验证）但我迫不及待地想开始另一个项目并尝试一些新的东西，比如Material-UI。

再次强调，任何能改善我的编码或写作方式的建议我都非常欢迎😇

感谢您的阅读！

源代码：