简单的开发博客文档

非常好 👏
这是最经典、最通用的 Web 项目组合之一：

Spring Boot（后端） + Vue.js（前端） + MariaDB（数据库）

这个组合可以完整涵盖前后端分离、RESTful API、数据库设计、权限认证、前端交互，是「博客系统」最标准的企业级入门项目架构。

下面是我为你写的 《博客系统开发文档（Spring Boot + Vue + MariaDB）》完整版模板。
你可以直接复制成你的 开发文档.md 或 .docx，在做项目时一步步填充。
（内容完全可用于学习项目、作品集或毕业设计）

🧱 博客系统开发文档

技术栈：Spring Boot + Vue.js + MariaDB

📘 一、项目概述

项目名称：个人博客系统
开发语言：Java（Spring Boot 框架） + JavaScript（Vue.js 框架）
数据库：MariaDB
开发工具：

后端：IntelliJ IDEA / Eclipse
前端：VS Code
接口测试：Postman
构建工具：Maven

项目目标：
实现一个具有注册、登录、发布文章、评论、分类等功能的完整博客系统，采用前后端分离架构。

🎯 二、系统功能需求

模块	功能描述
用户模块	注册、登录、退出登录、修改资料
文章模块	发表文章、编辑文章、删除文章、分页浏览文章
评论模块	文章评论、删除评论、评论展示
分类模块	给文章打标签、根据标签筛选
管理模块	管理文章、用户和评论（后台管理）
安全模块	用户身份验证（JWT）、接口权限控制

⚙️ 三、系统架构设计

1️⃣ 技术架构图

前端(Vue.js)
   |
   | RESTful API
   ↓
后端(Spring Boot)
   |
   | JDBC/JPA
   ↓
数据库(MariaDB)

2️⃣ 模块分层结构（后端）

com.example.blog
 ├── controller        # 控制层（处理 HTTP 请求）
 ├── service           # 业务逻辑层
 ├── repository        # 数据访问层（JPA/Mapper）
 ├── entity            # 实体类（映射数据库表）
 ├── dto# 配置类（数据库、跨域、JWT）
 ├── dto               # 数据传输对象（前后端数据结构）
 ├── BlogApplication.java  # 启动类

🧮 四、数据库设计（MariaDB）

1️⃣ 用户表 `user`

字段名	类型	说明
id	INT	主键，自增
username	VARCHAR(50)	用户名
password	VARCHAR(255)	加密密码
email	VARCHAR(100)	邮箱
avatar	VARCHAR(255)	头像链接
create_time	DATETIME	注册时间

2️⃣ 文章表 `post`

字段名	类型	说明
id	INT	主键
title	VARCHAR(255)	标题
content	TEXT	内容
author_id	INT	作者（外键）
category	VARCHAR(50)	分类标签
create_time	DATETIME	创建时间
update_time	DATETIME	更新时间

3️⃣ 评论表 `comment`

字段名	类型	说明
id	INT	主键
post_id	INT	文章ID
author_id	INT	评论者ID
content	TEXT	评论内容
create_time	DATETIME	评论时间

🧰 五、后端接口设计（Spring Boot）

功能	请求方式	URL	参数	返回值
用户注册	POST	`/api/user/register`	username, password, email	注册结果
用户登录	POST	`/api/user/login`	username, password	JWT token
获取当前用户信息	GET	`/api/user/info`	token	用户信息
发表文章	POST	`/api/post`	title, content, category	新文章
获取文章列表	GET	`/api/post/list`	page, size	文章分页列表
获取文章详情	GET	`/api/post/{id}`	id	文章详情
删除文章	DELETE	`/api/post/{id}`	id	删除结果
添加评论	POST	`/api/comment`	post_id, content	评论成功
获取评论	GET	`/api/comment/{postId}`	postId	评论列表

💡 六、前端设计（Vue.js）

1️⃣ 目录结构

src/
 ├── api/           # axios 封装与接口
 ├── components/    # 公共组件（导航栏、评论区等）
 ├── views/         # 页面视图（首页、登录、文章详情等）
 ├── router/        # 路由配置
 ├── store/         # Vuex 状态管理（用户状态、token）
 ├── assets/        # 图片与样式
 ├── App.vue
 ├── main.js

2️⃣ 主要页面

页面	路由	功能
首页	`/`	展示所有文章
登录页	`/login`	用户登录
注册页	`/register`	用户注册
文章详情页	`/post/:id`	展示文章内容及评论
发表文章页	`/editor`	发表/编辑文章
用户中心页	`/profile`	显示用户信息

🔐 七、安全认证设计（JWT）

用户登录成功后，Spring Boot 生成 JWT token
前端保存 token（LocalStorage）
之后每次请求都带上 Authorization 头：
```
Authorization: Bearer <token>
```
后端通过拦截器或过滤器验证 token，确认身份

🧪 八、测试与验证

测试内容	预期结果
注册	数据写入 user 表
登录	返回 token
发表文章	post 表增加新记录
查看文章	正确显示内容
评论	comment 表增加记录
非登录用户发表	返回 401 未授权

💾 九、项目部署说明

1️⃣ 数据库初始化

CREATE DATABASE blog CHARACTER SET utf8mb4;
USE blog;
-- 导入表结构 (init.sql)

2️⃣ 后端启动

mvn clean package
java -jar target/blog-0.0.1-SNAPSHOT.jar

3️⃣ 前端启动

npm install
npm run serve

4️⃣ 访问地址

前端: http://localhost:8080/
后端: http://localhost:8081/api/

📈 十、项目改进方向

Markdown 编辑器
文章点赞与收藏功能
富文本图片上传
用户角色（普通用户 / 管理员）
管理后台（Vue3 + Element Plus）
全文搜索功能（Elasticsearch）

🧾 十一、参考文件结构（示例）

blog-backend/
 ├── src/main/java/com/example/blog/
 │    ├── controller/
 │    ├── service/
 │    ├── repository/
 │    ├── entity/
 │    ├── config/
 │    └── BlogApplication.java
 ├── src/main/resources/
 │    ├── application.yml
 │    └── schema.sql
 └── pom.xml

blog-frontend/
 ├── src/
 │    ├── api/
 │    ├── views/
 │    ├── components/
 │    ├── router/
 │    └── main.js
 ├── package.json
 └── vue.config.js

✅ 十二、总结

本项目采用前后端分离架构，逻辑清晰、扩展性强
完整实现了用户、文章、评论三大核心模块
具备可部署、可扩展、可维护的标准结构
是学习 Web 全栈开发最经典的实战项目之一