Express.js 是一个流行的 Node.js Web 框架，它可以帮助我们轻松地搭建 Web 应用程序。在本文中，我们将使用 Express.js 来搭建一个简单的博客应用程序，让你了解如何使用它来构建 Web 应用程序。
准备工作
在开始之前，我们需要确保已经安装了 Node.js 和 npm。如果你还没有安装，可以在官方网站上下载安装包并安装。
接下来，我们需要创建一个新的项目文件夹。在命令行中执行以下命令：
mkdir my-blog cd my-blog
然后，我们需要初始化一个新的 npm 项目，执行以下命令：
npm init -y
这将创建一个新的 npm 项目，并自动将默认值添加到 package.json 文件中。
接下来，我们需要安装 Express.js。在命令行中执行以下命令：
npm install express
这将安装 Express.js 框架，让我们可以在项目中使用它。
创建博客应用程序
现在我们已经准备好开始创建博客应用程序了。首先，我们需要创建一个新的 Express.js 应用程序。在项目文件夹中创建一个新的文件 app.js，并添加以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - --------------- --------- --- ---------------- -- -- - ------------------- ------- -- ---- ------- ---
这将创建一个新的 Express.js 应用程序，并在根路径上添加一个简单的路由。当用户访问根路径时，应用程序将返回 "Hello World!" 字符串。
现在我们可以在命令行中执行以下命令来启动应用程序：
node app.js
这将启动应用程序，并在浏览器中访问 http://localhost:3000，应该可以看到 "Hello World!" 字符串。
添加路由
现在我们已经创建了一个简单的 Express.js 应用程序，接下来我们需要添加一些路由来实现博客应用程序的功能。我们将在 app.js 文件中添加以下路由：
-- -------------------- ---- ------- ------------ ----- ---- -- - --------------- --------- --- ----------------- ----- ---- -- - -------------- -- -------- --- --------------------- ----- ---- -- - -------------- ------------------- --- ------------------ ----- ---- -- - ---------------- - --- ------- --- --------------------- ----- ---- -- - ---------------- ---- ------------------- --- ------------------------ ----- ---- -- - ---------------- ---- ------------------- ---
这将添加以下路由：
- GET /posts：获取所有博客文章的列表。
- GET /posts/:id：获取一篇指定 ID 的博客文章。
- POST /posts：创建一篇新的博客文章。
- PUT /posts/:id：更新一篇指定 ID 的博客文章。
- DELETE /posts/:id：删除一篇指定 ID 的博客文章。
使用 MongoDB 存储博客文章
现在我们已经添加了博客应用程序所需的路由，接下来我们需要使用 MongoDB 数据库来存储博客文章。我们将使用 Mongoose.js 库来连接和操作 MongoDB 数据库。
首先，我们需要安装 Mongoose.js。在命令行中执行以下命令：
npm install mongoose
接下来，我们需要在 app.js 文件中添加以下代码来连接到 MongoDB 数据库：
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/my-blog', {
useNewUrlParser: true,
useUnifiedTopology: true
});这将连接到名为 my-blog 的 MongoDB 数据库。如果数据库不存在，它将自动创建一个。
然后，我们需要创建一个新的模型来表示博客文章。在 app.js 文件中添加以下代码：
-- -------------------- ---- ------- ----- -------- - -------------------- ----------------------------------------------- - ---------------- ----- ------------------- ---- --- ----- ---------- - --- ----------------- ------ ------- -------- ------ --- ----- ---- - ---------------------- ------------
这将创建一个新的模型 Post，它将使用 PostSchema 来定义博客文章的结构。模型将与名为 posts 的 MongoDB 集合关联。
现在我们可以使用模型来执行 CRUD 操作。在 app.js 文件中添加以下代码：
-- -------------------- ---- -------
----------------- ----- ---- -- -
------------- ----- ------ -- -
-- ----- -
--------------------------
- ---- -
----------------
-
---
---
--------------------- ----- ---- -- -
---------------------------- ----- ----- -- -
-- ----- -
--------------------------
- ---- -
---------------
-
---
---
------------------ ----- ---- -- -
----- ---- - --- ---------------
--------------- ---------- -- -
-- ----- -
--------------------------
- ---- -
--------------------
-
---
---
--------------------- ----- ---- -- -
------------------------------------- --------- ----- ----- -- -
-- ----- -
--------------------------
- ---- -
---------------
-
---
---
------------------------ ----- ---- -- -
------------------------------------- ----- ----- -- -
-- ----- -
--------------------------
- ---- -
---------------
-
---
---这将使用模型来执行以下操作：
- GET /posts：获取所有博客文章的列表。
- GET /posts/:id：获取一篇指定 ID 的博客文章。
- POST /posts：创建一篇新的博客文章。
- PUT /posts/:id：更新一篇指定 ID 的博客文章。
- DELETE /posts/:id：删除一篇指定 ID 的博客文章。
添加前端页面
现在我们已经搭建了一个完整的博客应用程序，接下来我们需要添加一些前端页面来让用户可以浏览和创建博客文章。
我们将使用 EJS 模板引擎来渲染前端页面。首先，我们需要安装 EJS。在命令行中执行以下命令：
npm install ejs
然后，我们需要在 app.js 文件中添加以下代码来设置 EJS 模板引擎：
const express = require('express');
const app = express();
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));这将设置 EJS 模板引擎，并将静态文件放置在名为 public 的文件夹中。
接下来，我们需要创建一个新的 views 文件夹，并在其中创建以下 EJS 文件：
- views/index.ejs：显示所有博客文章的列表。
- views/show.ejs：显示一篇指定 ID 的博客文章。
- views/new.ejs：创建一篇新的博客文章。
- views/edit.ejs：更新一篇指定 ID 的博客文章。
在 index.ejs 文件中添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
--------- ------------
-------
------
------ ---------
-- ------------------ -- - --
------- ---------- -------
------ ------------ ------
-- ---------------- -------- -------- --------
-- -- --
----
-- --------------------- --------
-------
-------这将显示所有博客文章的列表，并为每篇文章添加一个链接，以便用户可以单击链接查看完整文章。
在 show.ejs 文件中添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
--------- ------------
-------
------
------- ---------- -------
------ ------------ ------
-- ------------- -- --------
-- ---------------- -------- -----------------
----- ------------------ -------- --- --------------
------ ------------- -------------- ---------------
-----------------------
-------
-------
-------这将显示一篇指定 ID 的博客文章，并为文章添加一个链接，以便用户可以返回列表页面或编辑或删除文章。
在 new.ejs 文件中添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
--------- ------------
-------
------
------- ---------
----- --------------- --------------
------ ----------- ------------ --------------------
----
--------- -------------- ---------------------------------
----
-----------------------
-------
-------
-------这将显示一个表单，用户可以使用它来创建一篇新的博客文章。
在 edit.ejs 文件中添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
--------- ------------
-------
------
-------- ---------
----- ------------------ -------- --- --------------
------ ------------- -------------- ------------
------ ----------- ------------ ---------- ---------- ----
----
--------- ------------------ ------------ -------------
----
-----------------------
-------
-------
-------这将显示一个表单，用户可以使用它来更新一篇指定 ID 的博客文章。
总结
在本文中，我们使用 Express.js、Mongoose.js 和 EJS 模板引擎来搭建了一个简单的博客应用程序。我们了解了如何使用 Express.js 来创建路由、使用 Mongoose.js 来连接和操作 MongoDB 数据库，以及使用 EJS 模板引擎来渲染前端页面。
希望本文能够帮助你了解如何使用 Express.js 来构建 Web 应用程序，并为你的前端开发工作提供一些指导和启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6604e5bdd10417a222246c93