如何利用 Express.js 通过 MongoDB 快速构建博客站点-JavaScript中文网-JavaScript教程资源分享门户

在现代互联网时代，博客站点已成为许多人展示自己、分享知识和交流的重要平台。为了快速构建博客站点，我们可以利用 Express.js 和 MongoDB 这两个强大的技术来实现。本文将详细介绍如何利用 Express.js 和 MongoDB 构建博客站点，并提供示例代码和指导意义。

准备工作

在开始构建博客站点前，我们需要准备一些工作：

安装 Node.js 和 MongoDB
安装 Express.js 和 Mongoose
创建一个空的项目目录

创建 Express.js 应用程序

首先，我们需要创建一个 Express.js 应用程序。在项目目录下，执行以下命令：

$ npm init -y
$ npm install express

然后，在项目目录下创建一个名为 app.js 的文件，输入以下代码：

const express = require('express');

const app = express();

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

这段代码创建了一个 Express.js 应用程序，并监听在 3000 端口上。我们可以通过执行 node app.js 命令来启动应用程序。

连接 MongoDB 数据库

接下来，我们需要连接 MongoDB 数据库。在项目目录下，执行以下命令：

$ npm install mongoose

然后，在 app.js 文件中添加以下代码：

// javascriptcn.com 代码示例
const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/blog', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useCreateIndex: true,
});

const db = mongoose.connection;

db.on('error', console.error.bind(console, 'MongoDB connection error:'));
db.once('open', () => {
  console.log('MongoDB connected');
});

这段代码使用 Mongoose 连接到本地 MongoDB 数据库，并在控制台输出连接成功的信息。

定义数据模型

接下来，我们需要定义博客文章的数据模型。在项目目录下，创建一个名为 models 的文件夹，并在其中创建一个名为 post.js 的文件，输入以下代码：

// javascriptcn.com 代码示例
const mongoose = require('mongoose');

const postSchema = new mongoose.Schema({
  title: { type: String, required: true },
  content: { type: String, required: true },
  createdAt: { type: Date, default: Date.now },
});

module.exports = mongoose.model('Post', postSchema);

这段代码定义了一个名为 Post 的数据模型，包含 title、content 和 createdAt 三个属性。

创建路由

接下来，我们需要创建路由来处理 HTTP 请求。在项目目录下，创建一个名为 routes 的文件夹，并在其中创建一个名为 index.js 的文件，输入以下代码：

// javascriptcn.com 代码示例
const express = require('express');
const router = express.Router();
const Post = require('../models/post');

router.get('/', async (req, res) => {
  const posts = await Post.find().sort('-createdAt');
  res.render('index', { posts });
});

router.get('/posts/new', (req, res) => {
  res.render('new');
});

router.post('/posts', async (req, res) => {
  const { title, content } = req.body;
  const post = new Post({ title, content });
  await post.save();
  res.redirect('/');
});

module.exports = router;

这段代码定义了三个路由：

/：显示所有博客文章
/posts/new：显示创建新博客文章的表单
/posts：处理创建新博客文章的表单提交

创建视图

最后，我们需要创建视图来渲染 HTML 页面。在项目目录下，创建一个名为 views 的文件夹，并在其中创建以下文件：

index.ejs：显示所有博客文章
new.ejs：创建新博客文章的表单

index.ejs 文件的代码如下：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <title>Blog</title>
</head>
<body>
  <h1>Blog</h1>
  <ul>
    <% posts.forEach(post => { %>
      <li>
        <h2><%= post.title %></h2>
        <p><%= post.content %></p>
        <p><%= post.createdAt %></p>
      </li>
    <% }) %>
  </ul>
  <a href="/posts/new">New Post</a>
</body>
</html>

new.ejs 文件的代码如下：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <title>New Post</title>
</head>
<body>
  <h1>New Post</h1>
  <form method="post" action="/posts">
    <label for="title">Title:</label>
    <input type="text" name="title" id="title" required><br>
    <label for="content">Content:</label>
    <textarea name="content" id="content" required></textarea><br>
    <button type="submit">Create</button>
  </form>
</body>
</html>

运行应用程序

现在，我们已经完成了博客站点的构建。在项目目录下，执行以下命令启动应用程序：

$ node app.js

然后，在浏览器中访问 http://localhost:3000，就可以看到我们创建的博客站点了。

总结

通过本文的介绍，我们学习了如何利用 Express.js 和 MongoDB 快速构建博客站点。我们了解了如何连接 MongoDB 数据库、定义数据模型、创建路由和视图。这些知识不仅可以帮助我们快速构建博客站点，还可以应用到其他 Web 应用程序的开发中。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655341f4d2f5e1655dcfc6bc