使用 MERN 技术栈开发电子商务 Web 应用 — Arunabhstore 应用

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

您想开发一款电子商务网站应用吗？

（开发包含后端和前端的完整Web应用程序/开发全栈Web应用程序/开发基于MERN技术栈的网站）

这篇博客将帮助你了解在学习开发电子商务 Web 应用程序时，为什么应该选择哪些工具。

在这篇博客中，我将尝试解答我在开发ARUNABHSTORE时选择这些方案背后的原因。如果你是一名初级开发者，建议你阅读Blogaroo——一篇关于使用 MERN 技术栈开发博客平台的文章，其中我详细讨论了学习 MERN 技术栈的路线图。此外，那篇博客还讨论了 Next.js。

那么，我们首先来谈谈这篇博客中要提到的实际电子商务 Web 应用程序：arunabhstore.netlify.app/

Arunabhstore是什么？

这是一个基于 MERN 技术栈构建的电商网站应用。我开发它纯粹是出于兴趣爱好。这是一个功能齐全的网站应用，用户可以访问、注册、购买并使用演示产品完成交易。当然，这个网站应用仅用于演示目的，所有功能都已集成并可正常运行。如果您想体验这个网站应用，我建议您使用购物车结账页面提供的演示信用卡进行演示购买。

技术规格 -

正如标题所示，我使用 MERN 技术栈构建了这个项目，具体来说，就是 MONGO、EXPRESS、REACT 和 NODE。

后端

• Node.js 与 Express.js
• MongoDB 与 Mongoose

前端
* React.js

如果您感兴趣，可以从 GITHUB 了解更多信息。

那么，为什么选择 React.js？

在开始这个项目之前，我曾用 React.js 做过一些小项目，所以对这个框架非常熟悉。我也考虑过 Angular 和 Vue 之类的其他选择，但当时我感觉 React.js 更适合我。React.js 的优势显而易见，足以解释为什么有人会选择它。它速度快、状态管理方便，还有很多其他优点。这就是我选择 React.js 的原因。坦白说，我就是真的很想用 React.js 😅。

简而言之，这就是我选择 React.js 作为前端开发框架的原因。如果你是开发新手，觉得以上内容难以理解，别担心。只需阅读这篇博客中的路线图即可。我详细讲解了如何从一个零基础的开发者成长为一名优秀的前端开发者，甚至是一名全栈 MERN 开发者。

以上就是前端部分的全部内容。现在你可以成为以下两种人之一——

• 使用 React.JS 开始构建客户端应用程序，并与后端开发人员合作，将后端部分移交给他们。
• 或者
• 你想自己开发后端。如果是这样，那么是时候开始开发你的 Web 应用了。我希望这篇博客能帮助你找到想要的答案。祝你的项目一切顺利！😇 如果你还没开始，那就继续往下看，我会解释为什么我选择 Node.js 作为后端，MongoDB 作为数据库。

那么，为什么选择Node.js呢？

如果你读过我之前提到的那篇博客，那么答案是一样的，我直接引用原文就好——

首先，它是一个 JavaScript 运行时环境。既然是 JS，我毫不犹豫地选择了 Node.js。此外，Express.js 也很好用，正如其官网所述，它是一个快速、无预设、极简的 Node.js Web 框架。由于前端也是用 JS 框架编写的，因此在相同的语言范式（即 JS）下构建 REST API 会非常容易。综上所述，现在我将回答我为什么选择 MongoDB 这个问题。

为什么选择 MongoDB？

就像我之前在回答“为什么选择Node.js？”这个问题时所说的那样，如果你读过我之前提到的另一篇博客，那么答案是一样的，我在这里就直接引用一下——

原因与“为什么选择 Node.js？”非常相似。MongoDB 是一个以 JSON（JavaScript 对象表示法）文档形式存储数据的数据库。而 JavaScript 的优势再次凸显。由于 MongoDB 存储的数据格式与 REST API 的响应格式完全相同，后端、前端和数据库之间的衔接几乎融为一体。因此，开发过程变得轻松许多。这也解释了为什么选择 MERN 技术栈。说到这里，Node + MongoDB + Mongoose 的组合简直完美。正如 Mongoose 官网所说，Mongoose 为 Node.js 提供了一个优雅的 MongoDB 对象模型。瞧！这就是 MERN 技术栈的优势所在。

结论

我想补充的是，并没有一个完美的理由或解释说明为什么你应该使用 MERN 技术栈，或者任何其他技术栈。在浩瀚的成功产品海洋中，有很多例子表明他们使用了完全不同的技术栈。在这篇博客中，我之所以讨论 MERN，是因为在研究了各种框架及其优缺点之后，我最终选择了它。坦白说，我对项目完成后的结果非常满意。而且我确信，无论我选择哪种技术栈，结果都会非常相似。重要的是，无论你使用哪种技术栈，在产品开发过程中都应该关注一些关键点，例如可扩展性、敏捷性、原子性和响应性。后端应该尽可能精简且健壮，并且能够处理按需高流量，而前端则必须向用户讲述一个故事，并且在故事的任何阶段都不应该让用户感到失去兴趣。这一点适用于任何 Web 应用程序，而不仅仅是电子商务应用程序。

所以，这篇博客更多的是关于构建通用的Web应用程序，而不仅仅是电子商务应用。我之所以选择电子商务应用作为这篇博客的案例，是因为在撰写这篇博客时，我手头正好有这个项目。而且，我所说的所有内容也完全适用于电子商务应用。好了，就这些。我希望能够解答您的疑问，并帮助您决定在开发电子商务应用（或者实际上，大多数基于Web的应用程序）时可以使用哪些技术栈。

欢迎在评论区留言，告诉我你对这篇博客的看法。你也可以通过我的公开邮箱联系我。

奖金

如果您好奇，以下是开发ARUNABHSTORE所涉及的依赖项。

（以下内容的依赖项列表直接复制自 package.json 文件）

后端

{
 // other stuff

 "dependencies": {
  "body-parser": "^1.19.0",
  "braintree": "^2.22.0",
  "cookie-parser": "^1.4.5",
  "cors": "^2.8.5",
  "dotenv": "^8.2.0",
  "express": "^4.17.1",
  "express-jwt": "^5.3.1",
  "express-validator": "^5.3.1",
  "formidable": "^1.2.2",
  "jsonwebtoken": "^8.5.1",
  "loadash": "^1.0.0",
  "mongoose": "^5.9.7",
  "morgan": "^1.10.0",
  "uuid": "^7.0.3"
 }
}

前端

{
 // other stuff

"dependencies": {
  "@testing-library/jest-dom": "^4.2.4",
  "@testing-library/react": "^9.5.0",
  "@testing-library/user-event": "^7.2.1",
  "bootstrap": "^4.4.1",
  "braintree-web-drop-in-react": "^1.1.1",
  "moment": "^2.24.0",
  "node-sass": "^4.13.1",
  "query-string": "^6.12.1",
  "react": "^16.13.1",
  "react-dom": "^16.13.1",
  "react-router-dom": "^5.1.2",
  "react-scripts": "3.4.1"
 }
}

作者：Arunabh Arjun
www.arunabharjun.com