从零搭建个人博客系统：Vue3 + Node.js + MongoDB全栈实践

关梦尘 2025-05-07 23:48:22

在数字化时代，搭建一个属于自己的博客系统不仅是技术能力的体现，更是记录生活与分享知识的绝佳方式。本文将详细介绍如何使用Vue3作为前端框架、Node.js作为后端服务、MongoDB作为数据库，搭建一个完整且具备基础功能的个人博客系统。

一、技术栈选择

1. Vue3：新一代渐进式JavaScript框架，响应式系统更高效，Composition API让代码组织更灵活，适合构建交互丰富的用户界面。
2. Node.js：基于Chrome V8引擎的JavaScript运行时，能实现高效的I/O操作，便于快速搭建后端服务。
3. MongoDB：非关系型数据库，采用文档型存储结构，对数据格式的兼容性强，特别适合博客这类内容灵活多变的场景。

二、环境搭建

1. 安装Node.js与MongoDB

- Node.js：从官网下载对应系统的安装包，安装完成后，在终端输入 node -v 和 npm -v 验证是否安装成功。
- MongoDB：在官网下载社区版安装包，安装完成后，启动MongoDB服务，可通过 mongo 命令进入数据库交互界面。

2. 创建项目目录

在终端执行以下命令：

mkdir my-blog-project
cd my-blog-project

三、后端开发

1. 初始化Node.js项目

在项目目录下执行：

npm init -y

安装所需依赖：

npm install express mongoose cors dotenv

2. 配置Express与数据库连接

创建 server.js 文件：

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const dotenv = require('dotenv');

dotenv.config();
const app = express();
const port = process.env.PORT || 3000;

// 跨域资源共享配置
app.use(cors());
// 解析JSON数据
app.use(express.json());

// 连接MongoDB
mongoose.connect(process.env.MONGO_URI, {
useNewUrlParser: true,
useUnifiedTopology: true
})
.then(() => console.log('MongoDB Connected'))
.catch(err => console.error(err));

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

3. 定义博客文章模型

创建 models/Post.js ：

const mongoose = require('mongoose');

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

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

4. 编写API接口

在 server.js 中添加接口：

const Post = require('./models/Post');

// 创建文章
app.post('/api/posts', async (req, res) => {
try {
const newPost = new Post(req.body);
const savedPost = await newPost.save();
res.status(201).json(savedPost);
} catch (error) {
res.status(500).json({ message: error.message });
}
});

// 获取所有文章
app.get('/api/posts', async (req, res) => {
try {
const posts = await Post.find();
res.json(posts);
} catch (error) {
res.status(500).json({ message: error.message });
}
});

四、前端开发

1. 创建Vue3项目

确保已安装 @vue/cli ，执行：

vue create my-blog-frontend

选择 Default (Vue 3 Preview) 创建项目。

2. 安装依赖

进入项目目录，安装 axios 用于HTTP请求：

npm install axios

3. 编写组件

在 src/components 目录下创建 PostList.vue ：

<template>
<div>
<h1>我的博客</h1>
<ul>
<li v-for="post in posts" :key="post._id">
<h2>{{ post.title }}</h2>
<p>作者: {{ post.author }}</p >
<p>{{ post.content }}</p >
</li>
</ul>
</div>
</template>

export default {
setup() {
const posts = ref([]);

onMounted(() => {
fetchPosts();
});

return {
posts
};
}
};
</script>

4. 路由配置

在 src/router/index.js 中配置路由：

import { createRouter, createWebHistory } from 'vue-router';
import PostList from '../components/PostList.vue';

const routes = [
{
path: '/',
name: 'PostList',
component: PostList
}
];

const router = createRouter({
history: createWebHistory(),
routes
});

export default router;

五、部署与优化

1. 后端部署：可以使用 pm2 等进程管理工具将Node.js服务部署到服务器，也可以将后端代码部署到云服务平台如Heroku、AWS等。
2. 前端部署：通过 npm run build 打包Vue3项目，将生成的 dist 目录下的文件部署到Web服务器。
3. 优化：添加请求缓存、数据库索引优化、前端代码压缩等，提升系统性能。

通过以上步骤，一个基于Vue3 + Node.js + MongoDB的个人博客系统就搭建完成了。在实际开发过程中，还可以根据需求添加用户认证、评论功能、图片上传等更多特性。希望这篇文章能为你的全栈开发学习带来帮助，欢迎在评论区交流探讨！

...全文