使用 MERN 技术栈开发博客平台 - Blogaroo.in
你想学习如何开发博客平台吗？
（开发包含后端和前端的完整Web应用程序，并支持SSR/开发全栈Web应用程序/开发基于MERN技术栈的网站）
这篇博客我会同时面向高级开发者和初级开发者。所以，如果你是新手🤓，看到一些看起来太深奥的内容也不要着急。我会在讲完高级内容之后，提供一份达到相应水平的路线图。如果你是高级开发者，那你自然知道哪些部分可以跳过。☕️
那么，我们首先来谈谈这篇博客中要提到的博客平台：www.blogaroo.in
Blogaroo是什么？
这是一个免费的博客平台，供所有人使用。它是我使用 MERN 技术栈和 Next.js 开发的个人项目的一部分。最初，我只是想把它做成一个供自己使用的博客平台，但后来我想，既然做了，为什么不让其他人也用呢？所以，它就诞生了。这是一个非常简单直观的平台，供您分享您的故事。
开发这个项目是一次非常棒的经历，我在开发过程中学到了很多东西，今天我想和大家分享这些。
技术规格-
正如标题所示，我使用 MERN 技术栈构建了这个项目，具体来说，就是 MONGO、EXPRESS、REACT 和 NODE。
后端
- Node.js 与 Express.js
- MongoDB 与 Mongoose
前端
- Next.js（本质上是带有服务器端渲染的 React JS）
- 它也是一个 PWA（渐进式 Web 应用），所以您可以将其作为独立应用安装到您的设备上。
了解更多信息，请访问ABOUT BLOGAROO
那么，为什么选择 Next.js 呢？
到那时，我已经用 React.js 开发了一些项目，并且对这个框架相当熟悉了。但 React.js 的一个问题是，它使用虚拟 DOM 来渲染 HTML，而所有渲染都在客户端完成。因此，当网站从服务器加载时，只会加载一些 JS 代码，这对搜索引擎优化 (SEO) 非常不利。而对于一个博客平台来说，良好的 SEO 至关重要。为了获得良好的 SEO，服务器端渲染非常重要。这正是 Next.js 的优势所在。Next.js 的底层与 React.js 非常相似，但有一些非常容易上手的修改，因此非常适合这个项目。最终，我在 Lighthouse 的 SEO 审核中获得了满分 100 分。欢迎您也对BLOGAROO.IN进行测试，看看结果如何。
以上就是前端部分的简要介绍。但对于那些刚刚开始接触Web开发，尤其是前端开发的人来说，以下是构建这个网站的路线图——
Next.js 路线图：入门指南
- 首先，任何网站的核心是什么？是HTML。所以，如果你还没开始学习HTML，现在正是开始学习的最佳时机。W3SCHOOLS -HTML是一个很好的学习资源。
- Paint & Plaster 之于砖墙，正如 CSS 之于 HTML。而W3SCHOOLS-CSS也是一个很好的资源。
- 现在你肯定见过，如果没有驱动门窗的机械装置，它们就无法发挥任何功能，对吧？JavaScript (JS) 的作用就在于此，它为 HTML 和 CSS 带来了类似的功能。要开始学习 JS，W3SCHOOLS-JS是一个很棒的资源。注意：虽然 Java 和 JavaScript 都包含“Java”这个词，但它们的相似之处仅限于此，因为它们是完全不同的语言。在这里，我必须强调 JS 的重要性，因为整个框架都高度依赖于 JavaScript。如果你还没注意到，我上面提到的所有框架后面都带有“.js”，这意味着它们是用 JS 编写的框架，或者必须与 JS 交互。所以，虽然 W3SCHOOLS-JS 是一个很好的资源，但你不应该局限于此。不妨继续深入探索，尽可能多地了解 JS。
- 学习像Bootstrap这样的CSS框架也是一个额外的收获。我知道你肯定猜到了，学习Bootstrap又是一个很好的资源，那就是W3SCHOOLS-Bootstrap。
- 完成以上所有步骤后，我强烈建议你练习开发简单的网站，例如使用 Bootstrap 来了解网页结构和路由等的基本概念。
Next.js 路线图：迈向更高层次（双关语绝对是故意的😅 ）
- 所以，现在你肯定已经是一名初级前端开发者了。接下来你需要做的就是开始学习 React.js。相信我，真正的乐趣才刚刚开始。虽然入门阶段可能有点难，但一旦你深入学习像 React.js 这样的框架，就会一路高歌猛进。但这仅适用于那些认真学习入门阶段的人，因为 React.js 的核心是 JavaScript，如果你的 JavaScript 基础不够扎实，可能会让你失去学习的乐趣。当然，也有很多开发者能够轻松上手，在学习框架的过程中自然而然地掌握 JavaScript。如果你也是其中之一，那就太棒了，继续往下看吧。正如我之前所说，真正的乐趣才刚刚开始 😎。
- 所以在开始学习 React.js 之前，明智的做法是先熟悉一下Node.js。虽然 Node.js 并非构建前端的必要条件，但它自带一个名为 Node 包管理器 (NPM) 的包管理器，在接下来的几个步骤中你会用到它。我们将在后续章节中更详细地讨论 Node.js。
- 完成上述步骤后，接下来你需要做的就是亲自动手操作 API（应用程序编程接口）。瞧！我说过，真正的乐趣才刚刚开始。API 本身是一个比我们通常理解的更广泛的概念，要开始使用 React.js，我们需要了解 REST API。那么，什么是 REST API 呢？这完全可以另写一篇博客来讨论，所以我就不赘述了，建议你自己去搜索一下。友情提示一下，你其实不需要学习如何开发 REST API 就能开始使用 React.js，JSON-PLACEHOLDER就是一个很好的资源，它提供了丰富的 REST API 示例，方便你在学习如何使用 React.js 从 REST API 获取数据的同时进行练习。
Next.js 学习路线图：学习 React.js 和 Next.js
- 我知道，我知道，我知道大家都很兴奋，现在是时候让兴奋劲儿过去了。让我们开始学习 React.js 吧。如果你想初步了解 React.js，可以看看W3SCHOOLS-REACT.JS。但这还远远不够，虽然它确实是入门的必要条件。我强烈建议你选择自己熟悉的在线平台学习教程。我个人比较喜欢Udemy上的课程。如果要推荐一门具体的课程，我会推荐这门——《React - The Complete Guide (cl Hooks, React Router, Redux)》。但别误会，我的推荐并非“唯一”选择。这只是众多优秀课程中的一个而已。
- 如果你完全按照上一步的步骤操作，那么你已经完成了 React.js 和 Next.js 的学习，现在你可能已经明白了所有步骤是如何衔接起来的，并且可能已经弄清楚了如何构建这个博客平台。如果是这样，恭喜你！🥳
- 现在我的朋友，你可以轻松上手 Next.js 了，就是这样。Next.js 官方文档是一个非常好的资源。
- 最后，开始构建你自己的博客平台的前端吧。
等等！我们是不是忘了什么？
还记得我之前在讲前端部分时提到过使用 JSON-PLACEHOLDER 吗？为了让你的网站正常运行，你需要设置一个后端，它会从数据库中提供动态数据，供你的客户端应用程序使用。你可以选择以下两种方法之一：
- 你可以与后端开发人员合作，在你开发网站前端的同时，同步开发后端。
- 或者
- 自己动手做后端开发人员吧！😅
好吧，这听起来可能工作量很大。但相信我，既然你已经走到这一步，接下来的部分就没那么难了。所以，如果你决定走第一条路，那么现在就该开始开发你的产品了。我希望这篇博客能帮助你找到想要的答案。但对于那些选择第二条路，也就是自己成为后端开发人员的人来说，请继续往下看。一个成为 MERN 全栈开发人员的实用指南马上就来！
现在，在开发后端时有很多选择，而且截至本博客发布之日，任何可用的选项都不会出错，但由于我选择了 Node.js（搭配 Express.js）和 MongoDB 作为数据库，因此我们将在接下来的章节中讨论这两者。
那么，为什么选择Node.js呢？
首先，它是一个 JavaScript 运行时环境。既然是 JS，我毫不犹豫地选择了 Node.js。此外，Express.js 也很好用，正如其官网所述，它是一个快速、无预设、极简的 Node.js Web 框架。由于前端也是用 JS 框架编写的，因此在相同的语言范式（即 JS）下构建 REST API 会非常容易。综上所述，现在我将回答我为什么选择 MongoDB 这个问题。
为什么选择 MongoDB？
原因与“为什么选择 Node.js？”非常相似。MongoDB 是一个以 JSON（JavaScript 对象表示法）文档形式存储数据的数据库。而 JavaScript 的优势再次得以体现。由于 MongoDB 存储的数据格式与 REST API 的响应格式完全相同，后端、前端和数据库之间的衔接几乎融为一体。因此，开发过程变得轻松许多。这个原因也解释了为什么选择 MERN 技术栈。说到这里，Node + MongoDB + Mongoose 的组合简直完美。正如 Mongoose 官网所说，Mongoose 为 Node.js 提供了一个优雅的 MongoDB 对象模型。瞧！这就是 MERN 技术栈的优势所在。
以上就是后端开发的简要概述。但对于那些刚刚开始接触Web开发，尤其是后端开发的人来说，以下是构建本网站后端所需的步骤指南——
REST API 路线图：学习 MongoDB
- 最好的入手点是学习和熟悉数据库。因为我们要构建的任何东西都将围绕我们选择用来存储和检索数据的数据库结构展开，所以从学习数据库入手绝对不会错。
- 由于我们这里讨论的是 MongoDB，那么TUTORIALSPOINT-MONGODB是一个很好的入门资源。
REST API 路线图：学习 Node.js
- 现在假设您已经熟悉了 JS（如果您还不熟悉，正如我之前所说，您可以从W3SCHOOLS-JS学习），那么您就可以开始使用 Node.js 了。
- 虽然构建 REST API 时我们通常不会直接使用原生 Node.js，但了解 Node.js 在没有任何框架依赖的情况下是如何工作的仍然很有帮助。W3SCHOOLS -NODE.JS是一个很好的入门资源。
REST API 开发路线图：学习使用 Mongoose 为 Node.js 开发 Express.js 和 MongoDB
- 正如我之前所说，我们通常不会使用原生的Node.js来构建REST API，而这正是Express.js和Mongoose的用武之地。
- TUTORIALSPOINT-EXPRESS.JS是一个很好的入门资源。
REST API 路线图：面向生产环境
- 虽然上述资源对于后端开发入门非常有帮助，但要开发一个真正可以投入生产使用的后端，还有很多东西需要学习和理解。
- 在构建后端时，一个非常重要且关键的方面是确保后端具有可扩展性，能够处理高流量。因此，我建议参加一个关于“如何构建可用于生产环境且可扩展的后端”的专业课程。
- 有很多方法和途径可以实现这一点，而且无论选择哪种方法可能都不会出错，但如果让我推荐一门专门学习这方面的课程，我会推荐NodeJS - 完全指南（包括 MVC、REST API、GraphQL）。
- 好了，朋友，现在你已经准备好像BLOGAROO一样搭建属于你自己的博客平台了。
至此，我的关于使用 MERN 技术栈开发博客平台的博客就结束了。
欢迎在下方留言评论，分享您对这篇博文的看法。我真心希望这篇博文能帮助您构思出一个完整的 Web 应用程序开发路线图，就像这个示例一样，包含前端和后端。如有任何疑问，欢迎随时通过我的公开邮箱联系我。感谢阅读。
PS：我在本博客中推荐的所有资源都完全是我个人的观点。我与这些资源没有任何关联，也没有接受任何赞助。本博客的内容完全基于我个人的经验以及我创业初期所采用的方法。
奖金
如果您好奇，以下是开发BLOGAROO所使用的依赖项。
（以下内容的依赖项列表直接复制自 package.json 文件）
后端
{
//other stuff,
"dependencies": {
"@sendgrid/mail": "^7.1.1",
"body-parser": "^1.19.0",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"express-jwt": "^5.3.3",
"express-validator": "^6.4.1",
"formidable": "^1.2.2",
"google-auth-library": "^6.0.0",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.15",
"mongoose": "^5.9.12",
"morgan": "^1.10.0",
"shortid": "^2.2.15",
"slugify": "^1.4.0",
"string-strip-html": "^4.4.2",
"swearjar-extended": "^0.2.0",
"temporary-email-address-validator": "^1.0.3"
}
}
前端
{
//other stuff
"dependencies": {
"@material-ui/core": "^4.9.13",
"@material-ui/lab": "^4.0.0-alpha.53",
"babel-plugin-transform-remove-console": "^6.9.4",
"bootstrap-material-design": "^4.1.1",
"browser-image-compression": "^1.0.11",
"isomorphic-fetch": "^2.2.1",
"js-cookie": "^2.2.1",
"jsonwebtoken": "^8.5.1",
"moment": "^2.25.3",
"next": "^9.3.6",
"next-pwa": "^2.4.1",
"password-validator": "^5.0.3",
"prop-types": "^15.7.2",
"query-string": "^6.12.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-google-login": "^5.1.20",
"react-quill": "^1.3.5",
"react-render-html": "^0.6.0",
"react-sidebar": "^3.0.2",
"react-web-share": "^1.0.5",
"slugify": "^1.4.0"
}
}
作者：Arunabh Arjun
www.arunabharjun.com