1. 项目概述

PYblog 是一个前后端分离的博客系统，围绕「内容发布 + 多端阅读 + 运营管理」设计，包含以下四个子系统：

  • backend：Flask API 服务（统一提供公开接口、管理接口、小程序接口）
  • frontend：博客前台站点（面向读者）
  • admin：后台管理系统（面向管理员）
  • miniprogram：微信小程序端（面向移动端微信用户）

核心目标：

  • 低门槛搭建完整博客体系（内容、分类、标签、评论、留言）
  • 支持后台可视化管理（文章编辑、配置管理、媒体上传）
  • 支持移动端和微信场景（微信登录、激励解锁隐藏正文）

2. 核心功能清单

2.1 前台（Web）

  • 首页文章列表（分页、搜索）
  • 两级分类导航（父分类 + 子分类）
  • 标签筛选
  • 文章详情页（Markdown 渲染）
  • 文章密码解锁
  • 激励解锁隐藏正文（通过接口加载）
  • 评论系统（支持回复）
  • 留言板
  • 站点配置驱动展示（站点名、页脚、每页数量、卡片布局等）
    在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.2 后台（Admin）

  • 管理员登录（JWT）
  • 仪表盘统计
  • 文章管理（创建/编辑/发布/删除）
  • Markdown 编辑（支持扩展编辑体验）
  • 分类管理（两级）
  • 标签管理
  • 评论审核与删除
  • 留言审核与删除
  • 音乐列表管理
  • 站点配置管理
  • 图片上传与访问
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

2.3 微信小程序

  • 首页/分类/留言/我的（Tab）
  • 文章详情（Markdown、密码解锁、隐藏正文解锁）
  • 微信一键登录（wx.login + code2session）
  • 评论与留言支持会话身份（X-Wx-Session）

3. 技术架构

3.1 后端技术栈

  • Python + Flask
  • Flask-SQLAlchemy（ORM）
  • Flask-JWT-Extended（后台鉴权）
  • Flask-CORS（跨域）
  • PyMySQL（MySQL 驱动）

3.2 前端技术栈

  • Vue 3 + Vite
  • Vue Router
  • Pinia
  • Axios
  • Marked（Markdown 解析）

3.3 后台技术栈

  • Vue 3 + Vite
  • Element Plus
  • md-editor-v3
  • Axios

3.4 数据库

  • MySQL 8.0.36
  • 默认库名：db_blog
  • 字符集：utf8mb4

4. 项目目录结构（关键）

PYblog/
├─ backend/                 # Flask API 服务（默认 5000）
│  ├─ app/
│  │  ├─ api/               # 业务接口蓝图
│  │  ├─ models.py          # ORM 模型
│  │  ├─ config.py          # 配置项与环境变量
│  │  └─ utils/             # 响应封装、鉴权、微信会话工具
│  ├─ requirements.txt
│  └─ run.py
├─ frontend/                # 博客前台（默认 5173）
├─ admin/                   # 后台管理（默认 5174）
├─ miniprogram/             # 微信小程序
└─ database/
   └─ init.sql              # 单文件完整初始化脚本

5. 数据库设计说明

database/init.sql 已整合为单文件，包含建库、建表、索引与测试数据。

5.1 主要业务表

  • admin_users：管理员账号（密码 MD5 存储）
  • categories：分类（支持两级结构）
  • articles：文章主表
    • password：文章访问密码（可空）
    • ad_hidden_content：激励解锁后的隐藏正文
  • tags：标签
  • article_tags：文章-标签关联
  • comments：评论
  • guestbook：留言
  • site_config：站点配置
  • music：背景音乐
  • mp_wechat_users：微信小程序登录用户

5.2 初始化方式

mysql -u root -p123456 < database/init.sql

初始化后默认管理员账号：

  • 用户名：admin
  • 密码：123456（数据库存储为 MD5）

6. 后端接口概览

统一前缀：

  • 公开接口：/api/*
  • 后台接口：/api/admin/*（需 JWT）

6.1 公开接口

  • 文章
    • GET /api/articles
    • GET /api/articles/<id>
    • POST /api/articles/<id>/unlock
    • GET /api/articles/<id>/ad-hidden
  • 分类与标签
    • GET /api/categories
    • GET /api/categories/all
    • GET /api/tags
  • 评论与留言
    • GET /api/articles/<id>/comments
    • POST /api/articles/<id>/comments
    • GET /api/guestbook
    • POST /api/guestbook
  • 站点与资源
    • GET /api/site/config
    • GET /api/uploads/<filepath>
    • GET /api/music
  • 微信小程序
    • POST /api/wx/login
    • GET /api/wx/me

6.2 后台接口

  • 认证
    • POST /api/admin/login
    • GET /api/admin/userinfo
  • 仪表盘与配置
    • GET /api/admin/dashboard
    • GET /api/admin/site/config
    • PUT /api/admin/site/config
  • 文章管理
    • GET /api/admin/articles
    • POST /api/admin/articles
    • GET /api/admin/articles/<id>
    • PUT /api/admin/articles/<id>
    • DELETE /api/admin/articles/<id>
  • 分类管理
    • GET /api/admin/categories
    • POST /api/admin/categories
    • PUT /api/admin/categories/<id>
    • DELETE /api/admin/categories/<id>
  • 标签管理
    • GET /api/admin/tags
    • POST /api/admin/tags
    • PUT /api/admin/tags/<id>
    • DELETE /api/admin/tags/<id>
  • 评论管理
    • GET /api/admin/comments
    • PUT /api/admin/comments/<id>/approve
    • DELETE /api/admin/comments/<id>
  • 留言管理
    • GET /api/admin/guestbook
    • PUT /api/admin/guestbook/<id>/approve
    • DELETE /api/admin/guestbook/<id>
  • 媒体与音乐
    • POST /api/admin/upload
    • GET /api/admin/uploads/<filepath>
    • GET /api/admin/music
    • POST /api/admin/music
    • PUT /api/admin/music/<id>
    • DELETE /api/admin/music/<id>

7. 关键业务流程

7.1 管理员登录

  1. 管理后台调用 POST /api/admin/login
  2. 后端比对 admin_users.password（MD5）
  3. 返回 JWT，前端存储并在后续请求头携带 Authorization: Bearer <token>

7.2 文章阅读与解锁

  1. 文章详情先请求 GET /api/articles/<id>
  2. 若存在密码，返回 need_password = true
  3. 输入密码后调用 POST /api/articles/<id>/unlock
  4. 若存在隐藏段落，前端可调用 GET /api/articles/<id>/ad-hidden 追加内容

7.3 小程序登录与会话

  1. 小程序调用 wx.login 获取 code
  2. 提交到 POST /api/wx/login
  3. 服务端调用微信 code2session 并落库到 mp_wechat_users
  4. 返回 token（小程序会话签名）
  5. 评论/留言时通过 X-Wx-Session 自动识别用户身份

8. 配置项说明（后端）

backend/app/config.py 关键环境变量：

  • DATABASE_URL：数据库连接（默认 root:123456@localhost:3306/db_blog）
  • SECRET_KEY：Flask Secret
  • JWT_SECRET_KEY：后台 JWT 签名
  • WECHAT_MINI_APPID：小程序 AppID
  • WECHAT_MINI_SECRET：小程序密钥
  • WX_MP_SESSION_SALT：小程序会话签名盐

9. 本地开发启动

9.1 初始化数据库

mysql -u root -p123456 < database/init.sql

9.2 启动后端

cd backend
pip install -r requirements.txt
python run.py

默认：http://127.0.0.1:5000

9.3 启动前台

cd frontend
npm install
npm run dev

默认：http://127.0.0.1:5173

9.4 启动后台

cd admin
npm install
npm run dev

默认：http://127.0.0.1:5174

10. 常见问题排查

10.1 后台登录失败

  • 核对数据库连接是否正确
  • 核对 admin_users 是否存在 admin
  • 核对前端代理端口与 Flask 端口是否一致
  • 清空本地 admin_token 后重试

10.2 前台无文章/无分类

  • 核对 articles、categories 是否有数据
  • 核对 API 是否可访问：/api/articles、/api/categories
  • 检查前端是否请求到错误端口

10.3 小程序登录失败

  • 核对 WECHAT_MINI_APPID、WECHAT_MINI_SECRET
  • 核对微信公众平台合法域名配置
  • 核对是否使用 HTTPS

11. 扩展方向建议

  • 用户体系（注册/个人中心/权限分级）
  • 搜索增强（全文检索、热词）
  • 评论反垃圾（频控、敏感词、审核流）
  • 操作日志与审计
  • 多语言与主题皮肤系统
  • CI/CD 自动化部署与回滚

12. 版权与使用说明

本项目适用于个人博客、技术社区原型、教学演示等场景。

# python # flask # vue.js
Logo
亚马逊云科技技术品牌专区

更多推荐

cover

深度拆解Agent Harness｜为什么大模型必须搭配运行时框架？

avatar 亚马逊云科技技术品牌专区

2026最新2款IDE插件/原生AI编程工具多项目管理权威实测合集

2026年对比两款工具做多项目vibe coding开发，核心判断维度集中在中文口语理解力、SQL性能隐性风险识别、月度长期使用成本、多项目切换会话留存四大指标，经过IoT-Device8.0物联网报表批量导出项目实测，TRAE是国内中文后端、多仓库并行开发者、外包转自研、预算有限独立开发者的最优平替方案，基础版免费、VS Code同源架构无需额外适应成本，Work模式（原 SOLO 模式）多项目

avatar 亚马逊云科技技术品牌专区
cover

字符串处理与JSON解析：在资源受限设备上的轻量方案——流式解析、内存池

avatar 亚马逊云科技技术品牌专区