news 2026/5/6 20:32:37

MinX System v8.0:从零构建一个现代内容创作与变现平台

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
MinX System v8.0:从零构建一个现代内容创作与变现平台

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

代码内容主要由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 (生产)
ORMSpring 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 (懒加载 + 角色守卫)
PWAvite-plugin-pwa
DevOpsDocker + 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 全栈学习的参考项目,也可直接作为内容社区/知识付费平台的起步模板。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/6 20:27:32

2026年全国青少年信息素养大赛初赛时间已定!这份儿备赛资料,助力你成功晋级:C++赛项初赛真题及答案解析!

2026年全国青少年信息素养大赛初赛时间已定!这份儿备赛资料,助力你成功晋级:C赛项初赛真题及答案解析! 20课时,详细讲解5套全国青少年信息素养大赛历年初赛真题 2025年全国青少年信息素养大赛初赛真题及解析&#xff0…

作者头像 李华
网站建设 2026/5/6 20:26:41

MCP 2026多租户隔离配置全解析(2026 Q1生产环境压测数据实录)

更多请点击: https://intelliparadigm.com 第一章:MCP 2026多租户隔离架构演进与核心挑战 随着云原生基础设施的规模化部署,MCP(Multi-tenant Control Plane)2026版本在租户隔离能力上实现了从逻辑分片到硬件感知的范…

作者头像 李华
网站建设 2026/5/6 20:25:56

LVGL模拟器实战:不用开发板,在VS Code里搞定UI原型和代码生成

LVGL模拟器实战:不用开发板,在VS Code里搞定UI原型和代码生成 在嵌入式GUI开发领域,LVGL以其轻量级和高度可定制的特性赢得了广泛青睐。但传统开发流程中,设计师和工程师往往需要反复烧录硬件才能验证UI效果,这种"…

作者头像 李华
网站建设 2026/5/6 20:25:50

手把手教你用Vivado 2019.1在Kintex-7上搭建10G UDP协议栈(附12套源码)

Kintex-7 FPGA实战:从零构建10G UDP通信系统的完整指南 当我在实验室第一次看到Kintex-7开发板通过10G光纤传输数据时,那种流畅的数据流简直令人着迷。不同于传统的千兆以太网,10G网络带来的性能飞跃让实时高清视频传输、高速数据采集等应用成…

作者头像 李华