从 0 构建全栈博客系统：Vue3 + Node.js + MongoDB 实战教程（附完整源码与部署流程）-CSDN博客

本文链接：https://blog.csdn.net/weixin_43815680/article/details/148264195

🚀 从 0 构建全栈博客系统：Vue3 + Node.js + MongoDB 实战教程（附完整源码与部署流程）

作者：10年经验全栈开发专家
标签：全栈开发、Vue3、Node.js、MongoDB、JWT、博客系统、权限控制

🔧 一、项目亮点介绍

这是一个前后端分离的博客系统，涵盖以下实战能力：

✅ Vue3 + Pinia 实现响应式前端
✅ Node.js + Express 构建 RESTful API
✅ MongoDB 存储文章和用户数据
✅ JWT 实现登录注册与权限校验
✅ 前端支持 Markdown 编辑与高亮预览
✅ Docker 一键部署（附完整 Dockerfile）

💡 适合希望从业务项目中精通全栈架构的开发者，真正落地可用。

📦 二、项目结构设计

blog-system/
├── client/           # Vue3 前端
├── server/           # Node.js 后端
├── mongo-init.js     # Mongo初始化脚本
├── Dockerfile        # 一键部署

🖥 三、前端核心代码片段（Vue3 + Pinia）

`src/views/Login.vue`

<template>
  <n-form>
    <n-form-item label="用户名">
      <n-input v-model:value="username" />
    </n-form-item>
    <n-form-item label="密码">
      <n-input type="password" v-model:value="password" />
    </n-form-item>
    <n-button type="primary" @click="login">登录</n-button>
  </n-form>
</template>

<script setup>
import { useUserStore } from '@/store/user'
const username = ref('')
const password = ref('')
const store = useUserStore()

const login = async () => {
  await store.login({ username, password })
}
</script>

🔐 四、后端核心代码（Node.js + JWT）

`server/routes/user.js`

router.post('/login', async (req, res) => {
  const { username, password } = req.body
  const user = await User.findOne({ username })
  if (!user || user.password !== password) return res.status(401).send('登录失败')

  const token = jwt.sign({ id: user._id }, JWT_SECRET, { expiresIn: '1d' })
  res.json({ token })
})

🧠 五、易错点提醒

问题	原因	解决方案
登录后接口 401	token 未携带	确保在 axios 请求中带上 `Authorization: Bearer xxx`
JWT 报错过期	时间设置太短或时区问题	使用 `expiresIn: '1d'` 并统一时区配置
MongoDB 无法连接	本地未安装或未启动	使用 `docker-compose` 启动容器更稳定

📸 六、运行效果截图

登录页、文章管理页、Markdown 编辑器、发布页、前台博客展示页
👉（此处插入 4~5 张关键功能截图或录屏）

🐳 七、Docker 一键部署

`Dockerfile`

FROM node:18
WORKDIR /app
COPY ./server ./server
COPY ./client ./client
RUN cd client && npm install && npm run build
RUN cd server && npm install
CMD ["node", "server/index.js"]