前端从零搭建极简博客系统

本文将介绍如何使用Node.js、Express和MongoDB来搭建一个极简的博客系统。通过此系统，用户可以创建、编辑和删除博客文章，并展示在网页上。

准备工作

在开始之前，确保你已经安装了以下软件：

Node.js：可从官网下载并安装：https://nodejs.org
MongoDB：可从官网下载并安装：https://www.mongodb.com

创建项目

首先，我们需要创建一个新的项目文件夹来开始我们的博客系统。在命令行中执行以下命令：

mkdir blog-system
cd blog-system

接下来，我们需要初始化我们的项目，创建package.json文件。在命令行中执行以下命令：

npm init -y

安装依赖

我们需要安装一些依赖库来搭建我们的博客系统。执行以下命令来安装这些依赖：

npm install express mongoose body-parser ejs --save

express：一个用于构建Web应用程序的框架。
mongoose：一个用于数据库操作的库。
body-parser：一个用于处理HTTP请求体的库。
ejs：一种用于动态生成HTML的模板引擎。

创建服务器

在项目文件夹中创建一个名为index.js的文件，并将以下代码复制粘贴到该文件中：

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');

const app = express();
const port = 3000;

// 连接到MongoDB数据库
mongoose.connect('mongodb://localhost/blog');

// 定义博客文章模型
const BlogPost = mongoose.model('BlogPost', {
  title: String,
  content: String,
});

// 配置Express应用
app.use(bodyParser.urlencoded({ extended: true }));

// 配置模板引擎
app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');

// 处理路由请求
app.get('/', (req, res) => {
  BlogPost.find({}, (err, blogPosts) => {
    if (err) {
      console.error(err);
      res.status(500).send('Internal Server Error');
    } else {
      res.render('index', { blogPosts });
    }
  });
});

app.get('/post/:id', (req, res) => {
  const { id } = req.params;
  BlogPost.findById(id, (err, blogPost) => {
    if (err) {
      console.error(err);
      res.status(500).send('Internal Server Error');
    } else {
      res.render('post', { blogPost });
    }
  });
});

app.listen(port, () => {
  console.log(`Server is listening on port ${port}`);
});

创建视图

在项目文件夹中创建一个名为views的文件夹，并在该文件夹中创建以下两个文件：

index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title>My Blog</title>
  </head>
  <body>
    <h1>Welcome to My Blog</h1>

    <ul>
      <% blogPosts.forEach(function(blogPost) { %>
        <li>
          <h2><a href="/post/<%= blogPost._id %>"><%= blogPost.title %></a></h2>
          <p><%= blogPost.content %></p>
        </li>
      <% }); %>
    </ul>
  </body>
</html>

post.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= blogPost.title %></title>
  </head>
  <body>
    <h1><%= blogPost.title %></h1>

    <p><%= blogPost.content %></p>
  </body>
</html>

测试

现在，我们可以在命令行中运行以下命令来启动我们的博客系统：

node index.js

打开浏览器并访问http://localhost:3000，你应该能够看到一个空的博客列表页面。现在，你可以通过路由/post/:id来访问不同的博客文章页面。

总结

通过使用Node.js、Express和MongoDB，我们成功地创建了一个简单的博客系统。这只是一个起点，你可以根据自己的需求进行扩展和改进，例如添加用户认证、评论功能等。祝你好运！

本文来自极简博客，作者：温柔守护，转载请注明原文链接：前端从零搭建极简博客系统