前言
随着互联网的普及，博客已经成为网红们展示自己的重要平台。今天，我们就来学习如何使用 Express.js 和 MongoDB 搭建全栈博客。
技术要点
本文所需技术：
环境搭建
使用前必须在电脑上装好 Node.js 和 MongoDB。
接着，在终端执行以下命令：
----- ---- -- ---- --- ---- -- --- ------- ------ ------- -------
上面的命令会创建一个名为 blog 的文件夹，并且安装 Express.js 和 MongoDB。
添加路由
在 app.js 文件中添加以下路由：
----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - --------------------- --- ---------------- -- -- - --------------------- ---
在浏览器中访问 http://localhost:3000/，你会看到 "欢迎来到我的博客"。
接着，我们添加一个博客列表路由：
----------------- ----- ---- -- -
----- ----- - -
-
------ --- ---
-------- ----- - ----
--
-
------ --- ---
-------- ----- - ----
-
--
----------------
---此时，在 http://localhost:3000/blogs 中你会看到一个 JSON 数组。
添加 MongoDB
首先，下载 MongoDB Community Server。安装完成后，启动 MongoDB：
------ -------------
进入 mongo shell，并创建一个名为 blog 的数据库：
----- --- ----
在博客中添加一个文档：
---------------- ------ --- --- -------- ----- - ---- --
查询博客列表：
--------------
现在，我们将通过 Mongo 的 Node.js 驱动程序来访问数据库。首先，在终端执行以下命令：
--- ------- ------ -------
在 app.js 中添加以下代码：
----- ----------- - -------------------------------
----- --- - ----------------------------
----- ------ - -------
------------------------ - ---------------- ---- -- ----- ------- -- -
-- ----- ----- ----
----------------------
----- -- - ------------------
----------------- ----- ---- -- -
------------------------------------------ ------- -- -
-- ----- ----- ----
-----------------
---------------
---
---
---上面代码中，我们使用 MongoClient 连接到 MongoDB 数据库，在博客列表路由中，我们使用 find().toArray() 方法从文档blog中取出数据。
添加前端页面
现在，我们要将获得的数据传递给前端展示数据。在 public 文件夹下创建 index.html 文件：
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
-------------------
----- -------------------------------------------------------------------------------------- -----------------
-------
------
---- ------------------
-------------
--- ---------- -------------------
-----
------
------- ----------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------------
------- ---------------------------
-------
-------以上代码使用 Bootstrap 制作静态页面。
接下来，在 public 文件夹下创建 main.js 文件：
-------------------- -- -
--------------- ------ -- -
----- ----- - -----
--- ---- - - -- - - ------------- ---- -
----------------------- -------------------------------------------------
-
---
---上面的代码使用 jQuery 获取博客列表，并显示在页面上。
最后，在 app.js 文件中添加以下代码：
----------------------------------
这将让 Express.js 在请求时查找 public 文件夹中的 index.html 文件。
现在，在浏览器中访问 http://localhost:3000/，你将看到一个博客列表。
总结
在本文中，我们学习了如何使用 Express.js 和 MongoDB 搭建全栈博客。我们使用 MongoDB 存储博客数据，使用 Express.js 来访问数据，并使用 Bootstrap 和 jQuery 制作前端页面来展示数据。
希望这篇文章能对你在学习全栈开发的过程中有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64e06fcef6b2d6eab3b84b87