在 Web 开发中，Express.js 是一个非常流行的 Node.js 框架，它提供了快速、简单、灵活的方式来构建 Web 应用程序。本教程将介绍如何使用 Express.js 构建一个简单的博客应用，并包含示例代码。
前置知识
在开始本教程之前，您需要掌握以下技术：
- Node.js 知识
- JavaScript 基础知识
- HTML、CSS 和基本的前端知识
- MongoDB 数据库基本知识
如果您还不熟悉上述技术，请先学习相关知识。
步骤
1. 安装 Express.js
在开始构建应用程序之前，您需要安装 Express.js。您可以使用以下命令进行安装：
npm install express --save
2. 创建 Express.js 应用程序
创建一个新的文件夹，并在其中创建一个新的文件 app.js。然后，使用以下代码创建一个 Express.js 应用程序：
const express = require('express');
const app = express();
app.listen(3000, () => {
console.log('Server started on port 3000');
});在上面的代码中，我们导入了 express 模块，并创建了一个新的 Express.js 应用程序。然后，我们使用 app.listen 方法来启动服务器并监听端口 3000。
3. 配置路由
在 Express.js 中，路由用于将请求发送到正确的处理程序。我们可以使用 app.get 方法来创建路由。例如，以下代码将创建一个简单的路由，将请求发送到 / 路径：
app.get('/', (req, res) => {
res.send('Hello World!');
});在上面的代码中，我们使用 app.get 方法来创建一个路由，将请求发送到 / 路径。当请求到达时，我们使用 res.send 方法将消息发送回客户端。
4. 集成 MongoDB
在本教程中，我们将使用 MongoDB 来存储博客文章。我们可以使用 mongoose 模块来连接 MongoDB 数据库。首先，我们需要安装 mongoose：
npm install mongoose --save
然后，我们可以使用以下代码连接到 MongoDB 数据库：
// javascriptcn.com 代码示例
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/blog', {
useNewUrlParser: true,
useUnifiedTopology: true
}).then(() => {
console.log('MongoDB connected!');
}).catch((err) => {
console.error('MongoDB connection error:', err);
});在上面的代码中，我们使用 mongoose.connect 方法连接到 MongoDB 数据库。我们还传递了一些选项，如 useNewUrlParser 和 useUnifiedTopology。这些选项可以帮助我们避免一些常见的错误。
5. 创建博客文章模型
在本教程中，我们将创建一个简单的博客应用程序，它将包含博客文章和评论。首先，我们需要创建一个博客文章模型。我们可以使用 mongoose.Schema 方法来定义模型。例如，以下代码将创建一个新的博客文章模型：
// javascriptcn.com 代码示例
const mongoose = require('mongoose');
const blogSchema = new mongoose.Schema({
title: {
type: String,
required: true
},
content: {
type: String,
required: true
},
created_at: {
type: Date,
default: Date.now
}
});
const Blog = mongoose.model('Blog', blogSchema);
module.exports = Blog;在上面的代码中，我们使用 mongoose.Schema 方法创建了一个新的模式，并定义了 title、content 和 created_at 属性。然后，我们使用 mongoose.model 方法将模式编译为模型，并导出该模型。
6. 创建路由处理程序
现在，我们需要创建一些路由处理程序来处理我们的请求。我们可以使用以下代码创建一个路由处理程序，用于获取所有博客文章：
// javascriptcn.com 代码示例
const express = require('express');
const router = express.Router();
const Blog = require('../models/blog');
router.get('/', async (req, res) => {
try {
const blogs = await Blog.find({});
res.json(blogs);
} catch (err) {
console.error(err);
res.status(500).send('Server Error');
}
});
module.exports = router;在上面的代码中，我们使用 router.get 方法创建一个路由处理程序，用于获取所有博客文章。我们使用 Blog.find 方法从数据库中检索所有博客文章，并使用 res.json 方法将它们发送回客户端。如果发生错误，我们将使用 res.status 方法发送错误消息。
7. 集成路由
现在，我们需要将路由集成到我们的应用程序中。我们可以使用以下代码将路由添加到我们的应用程序中：
// javascriptcn.com 代码示例
const express = require('express');
const app = express();
const blogRoutes = require('./routes/blogs');
app.use('/blogs', blogRoutes);
app.listen(3000, () => {
console.log('Server started on port 3000');
});在上面的代码中，我们使用 app.use 方法将 /blogs 路径映射到我们的博客路由处理程序。这意味着当客户端发送 /blogs 请求时，我们的应用程序将使用博客路由处理程序来处理请求。
8. 创建前端页面
现在，我们需要创建一个前端页面来显示博客文章。我们可以使用以下代码创建一个简单的 HTML 页面：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
</head>
<body>
<h1>My Blog</h1>
<ul id="blog-list"></ul>
<script src="/js/main.js"></script>
</body>
</html>在上面的代码中，我们创建了一个简单的 HTML 页面，并在其中包含了一个用于显示博客文章的列表。我们还使用 <script> 标签引入了一个 JavaScript 文件，该文件将获取博客文章并将它们添加到列表中。
9. 创建前端 JavaScript 文件
我们需要创建一个 JavaScript 文件来获取博客文章并将它们添加到列表中。我们可以使用以下代码创建一个简单的 JavaScript 文件：
// javascriptcn.com 代码示例
const blogList = document.getElementById('blog-list');
fetch('/blogs')
.then(res => res.json())
.then(data => {
data.forEach(blog => {
const li = document.createElement('li');
li.innerText = blog.title;
blogList.appendChild(li);
});
});在上面的代码中，我们使用 fetch 方法从服务器获取博客文章。然后，我们使用 res.json 方法将响应转换为 JSON 格式。最后，我们使用 forEach 方法将博客文章添加到列表中。
10. 运行应用程序
现在，我们已经完成了所有的设置，可以运行我们的应用程序。在终端中，使用以下命令启动服务器：
node app.js
在浏览器中访问 http://localhost:3000，您应该能够看到一个包含所有博客文章的列表。
总结
在本教程中，我们介绍了如何使用 Express.js 构建一个简单的博客应用程序。我们学习了如何配置路由、集成 MongoDB、创建博客文章模型、创建路由处理程序、集成路由、创建前端页面和 JavaScript 文件。通过本教程，您可以学习到如何使用 Express.js 构建 Web 应用程序，并了解了一些常见的 Web 开发技术。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6572e269d2f5e1655dbea457