项目背景
作为一名独立开发者，我希望拥有一个完全自主的技术博客：前端可定制、后端可控、数据自留。市面博客系统要么太重、要么不够灵活，于是决定从零搭建一套全栈博客系统，前端用 Vue3，后端用 Node/Python，数据库 MySQL，一个人完成从设计到上线的全流程。这个项目也是全栈学习路线的终极实战。
全栈的真正意义，是能把一个想法完整地变成线上产品。
技术选型
独立开发追求效率与可控，选型兼顾熟悉度与生态：
- 前端：Vue3 + Vite + Pinia，Markdown 渲染用 markdown-it + 代码高亮
- 后端：Node.js（Express）做主服务，Python（Flask）做爬虫与数据分析辅助
- 数据库：MySQL 存文章与用户，Redis 做缓存与访问统计
- 鉴权：JWT，无状态登录，前后端分离友好
- 部署：Docker Compose 编排前端、后端、数据库三件套
- 图床：对象存储 + CDN，文章图片独立托管
架构设计
前后端分离，前端通过 RESTful 接口与后端通信。后端采用经典三层架构：路由层、业务层、数据层。后端接口示例：
// Node.js Express — 文章接口
const express = require('express')
const router = express.Router()
const auth = require('../middleware/auth')
const Article = require('../models/Article')
// 获取文章列表（分页）
router.get('/articles', async (req, res) => {
const { page = 1, size = 10, category } = req.query
const query = category ? { category } : {}
const list = await Article.find(query)
.skip((page - 1) * size)
.limit(Number(size))
.sort({ created_at: -1 })
res.json({ code: 0, data: list })
})
// 新建文章（需登录）
router.post('/articles', auth, async (req, res) => {
const article = await Article.create({
...req.body,
author_id: req.userId
})
res.json({ code: 0, data: article })
})
module.exports = router数据库设计遵循第三范式，文章表、分类表、标签表、用户表通过外键关联，文章与标签为多对多关系，独立中间表维护。
难点解决
前后端联调
独立开发时前后端联调主要卡在跨域与鉴权。开发期用 Vite proxy 代理后端接口，统一处理 CORS；生产期由 Nginx 反向代理，前后端同域，彻底规避跨域问题。
// vite.config.js — 开发期代理
export default {
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true
}
}
}
}Markdown 渲染与安全
文章正文用 Markdown 存储，前端渲染时需防 XSS。用 DOMPurify 清洗 HTML，并对代码块做语法高亮，兼顾安全与美观。
部署运维
一个人维护服务器精力有限，用 Docker Compose 一键编排，配合 GitHub Actions 自动构建推送，更新只需一条命令拉取新镜像重启。
# docker-compose.yml — 一键部署
services:
web:
build: ./frontend
ports: ['80:80']
api:
build: ./backend
ports: ['3000:3000']
depends_on: [mysql, redis]
mysql:
image: mysql:8
volumes: ['db-data:/var/lib/mysql']
redis:
image: redis:7项目成果
博客系统完整上线，支持 Markdown 写作、分类标签、评论、访问统计与后台管理，前后端数据流畅联通。从需求到上线一个人 10 周完成，真正跑通了全栈学习路线的每个环节，成为后续接私单与产品孵化的基础平台。
- 功能模块：文章、分类、标签、评论、后台 5 大模块
- 交付周期：10 周独立完成
- 部署方式：Docker Compose 一键编排
- 持续维护：GitHub Actions 自动化构建
