本项目仅作技术交流--许多关键细节并没有实现不可上线运营

代码内容主要由AI生成和测试

项目概述

MinX System 是一个全栈内容创作与变现平台,支持创作者上传图文、视频、文章等多媒体内容,通过订阅制 + 单次付费 + 多级访问控制实现知识变现。项目采用前后端分离架构,后端基于 Spring Boot 3.3 + Java 21,前端基于 Vue 3 + TypeScript + Pinia,已通过 38 个自动化测试,代码量约 300 文件。

GitHub: jianmin5xin/Minx


技术栈一览

层级 技术选型
后端框架 Spring Boot 3.3.0
语言版本 Java 21
数据库 H2 (开发) / MySQL (生产)
ORM Spring Data JPA + Hibernate 6.5
安全 Spring Security + JWT (双 Token 刷新)
缓存 Caffeine Cache
搜索引擎 Elasticsearch (可选)
前端框架 Vue 3 (Composition API)
构建工具 Vite 5
语言 TypeScript 5
状态管理 Pinia (13 个 Store)
路由 Vue Router 4 (懒加载 + 角色守卫)
PWA vite-plugin-pwa
DevOps Docker + CI/CD

核心功能模块

1. 用户与认证系统

  • JWT 双 Token 机制:Access Token(短时效)+ Refresh Token(长时效),前端 Axios 拦截器自动检测 401 并静默刷新,请求队列去重

  • 多角色体系:ROLE_USER / ROLE_ADMIN,路由级别守卫 + API 级别 @PreAuthorize

  • 个人资料管理:头像上传(multipart)、Bio、密码修改

  • 多标签同步:Token 写入 localStorage 后通过 storage 事件跨标签同步登录态

2. 资源管理与多级访问控制

这是平台的核心差异化能力。每个资源支持四种访问类型:

访问类型 规则 适用场景
PUBLIC 任何人可查看 免费引流内容
LOGIN_REQUIRED 需登录 注册用户专享
MEMBERS_ONLY 需订阅作者 粉丝专属内容
PAID_ONLY 需单独购买 高价精品内容
  • 批量上传:支持拖拽 + 多文件 + 进度回调

  • 三种资源类型:IMAGE / VIDEO / ARTICLE

  • 内容审核流:DRAFT → PENDING_REVIEW → PUBLISHED / REJECTED

  • 资源搜索:关键词 + 类型 + 访问级别多维度筛选,ES 全文搜索(可选)

  • 文件存储:本地文件系统 + 缩略图自动生成

3. 订阅制付费体系

  • 创作者可设置订阅价格(subscriptionPrice)并开启订阅功能

  • 用户购买订阅后获得该创作者全部 MEMBERS_ONLY 内容访问权

  • 支持订阅到期自动过期、退款等完整生命周期

4. 微信/支付宝钱包系统

v8.0 新增的完整钱包模块:

  • 充值:模拟微信/支付宝扫码充值(可对接真实支付网关)

  • 提现:用户申请提现 → 管理员审核 → 审批通过/拒绝

  • 交易流水:完整的 WalletTransaction 记录,支持类型筛选

  • 余额管理:充值、购买、退款、提现全链路余额变动追踪

5. 直播系统

  • 多级访问控制:PUBLIC / SUBSCRIBERS / PAID / FRIENDS

  • 直播购买:付费直播支持单次购买后观看

  • 实时状态管理:LiveStreamStore 管理直播列表与当前直播状态

  • 前端页面:LiveStreamPage(直播列表) + LiveStreamViewer(直播观看)

6. 评论与互动系统

  • 嵌套回复:支持多层级回复,前端递归渲染

  • 评论点赞:独立点赞系统,资源与评论分别管理

  • 用户屏蔽:创作者可屏蔽特定用户评论

  • 评论分页:后端分页 + 前端加载更多

7. 消息与通知系统

  • 一对一私信:对话列表 + 聊天气泡 + 回车发送 + 自动滚动到底部

  • 未读计数:导航栏铃铛 Badge 实时显示

  • 通知类型:评论回复、点赞、订阅、购买等事件通知

  • 冷消息限制:未互关用户每天 3 条消息限额

8. 管理后台

  • 仪表盘:用户数、资源数、订单数、收入概览

  • 用户管理:封禁/解封、强制删除

  • 资源审核:待审核列表、通过/驳回、审核备注

  • 订单管理:全部订单查看、退款处理

  • 举报处理:举报列表、处理标记

  • 站点配置:系统参数动态调整

  • 数据统计:用户增长趋势、热门资源排行


后端架构

分层设计

Controller 层 (24 个 REST 控制器)
    ↓
Service 层 (业务逻辑 + 事务管理)
    ↓
Repository 层 (Spring Data JPA + 自定义查询)
    ↓
Entity 层 (JPA 实体映射)

安全架构

Client Request
    → CORS Filter
    → Rate Limit Filter (300 req/min)
    → JWT Authentication Filter
    → Authorization Filter (@PreAuthorize)
    → Controller → Service → Repository

关键控制器

控制器 端点前缀 核心功能
AuthController /api/auth 注册、登录、Token 刷新
ResourceController /api/resources 资源 CRUD、搜索、审核
PaymentController /api/payment 微信/支付宝充值、提现
WalletController /api/wallet 钱包余额、交易流水
LiveStreamController /api/livestreams 直播创建、购买、观看
CommentController /api/resources/{id}/comments 评论、屏蔽、点赞
SubscriptionController /api/subscriptions 订阅管理
OrderController /api/orders 订单管理、退款
AdminController /api/admin 管理后台聚合接口
StatisticsController /api/statistics 数据统计

前端架构

分层设计

Views (19 个页面视图)
    ↓
Components (40+ 个可复用组件)
    ↓
Composables (业务逻辑 Hook)
    ↓
Stores (13 个 Pinia 状态模块)
    ↓
API Layer (21 个 API 模块 + Axios 拦截器)
    ↓
Types (12 个 TypeScript 类型模块)

状态管理

Store 职责
authStore 用户认证、Token 管理、多标签同步
resourceStore 资源 CRUD、上传进度
subscriptionStore 订阅状态、订阅列表
purchaseStore 购买记录、购买检查
commentStore 评论分页、嵌套回复
favoriteStore 收藏状态、收藏列表
likeStore 点赞状态、点赞数
notificationStore 通知列表、未读数
orderStore 订单列表、订单状态
walletStore 钱包余额、充值、交易流水
messageStore 对话列表、消息发送
subscribeStore 订阅支付流程
liveStreamStore 直播管理、直播购买

路由表(部分)

路径 页面 需认证 角色
/ 资源列表(首页) -
/upload 上传资源 USER
/resource/:id 资源详情 -
/profile 个人资料 USER
/wallet 钱包管理 USER
/messages 消息中心 USER
/live 直播广场 -
/admin 管理后台 ADMIN
/statistics 数据统计 ADMIN

工程化与 DevOps

  • Docker 容器化:后端 + 前端独立 Dockerfile,docker-compose 一键部署

  • PWA 支持:通过 vite-plugin-pwa 实现离线访问、桌面安装

  • CI/CD:GitHub Actions 自动化构建与测试

  • 代码质量:结构化日志(SLF4J)、健康检查端点(/actuator/health)、Prometheus Metrics

  • XSS 防护:前端输出转义 + 安全 Headers

  • 知识图谱:通过 Graphify 自动分析 2104 节点 / 2994 边的代码依赖关系


测试覆盖

  • 后端测试:38 个测试用例,100% 通过

    • 访问控制集成测试(Public/Login/Members/Paid 四种规则全覆盖)

    • 支付系统测试

    • JWT 认证流程测试

  • 前端测试:15+ 个测试用例通过


本地运行

# 后端
cd backend
mvn spring-boot:run     # 启动在 localhost:8080
​
# 前端
cd frontend
npm install
npm run dev             # 启动在 localhost:5173

默认测试账户:admin / testuser / creator(密码均为 password


路线图

  • 多级访问控制 (PUBLIC → PAID_ONLY)
  • 订阅制付费体系
  • 微信/支付宝钱包系统
  • 直播系统
  • 管理后台与数据统计
  • Docker 部署 + PWA 支持
  • 真实支付网关集成
  • MySQL 生产环境迁移
  • WebSocket 直播推流
  • Elasticsearch 全文搜索优化

MinX System 是一个从零独立构建的全栈项目,涵盖内容平台几乎所有核心能力——从用户认证到内容管理,从付费变现到直播系统,从管理后台到数据统计。适合作为 Spring Boot + Vue 3 全栈学习的参考项目,也可直接作为内容社区/知识付费平台的起步模板。

Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐