TinyFlow

一个面向现代链接管理场景的短链生成与数据分析系统

短链接生成、实时跳转、访问统计、登录鉴权、开发者友好 API

项目简介

TinyFlow 是一个前后端分离的短链接平台，覆盖了短链创建、短码跳转、访问统计、登录注册、数据看板和开发者 API 等完整链路。
项目后端基于 Spring Boot 3 + MySQL + Redis + RabbitMQ，前端基于 Vue 3 + Vite，适合用来展示 Java 后端工程能力与数据产品型前端实现。

核心能力

• 短链生成：支持长链接压缩、短码生成与自定义别名
• 稳定跳转：通过缓存和异步写入机制优化短链访问链路
• 统计分析：提供 PV / UV、趋势、设备、地域、来源等多维统计
• 登录鉴权：支持注册、登录、JWT 鉴权和用户态访问
• 开发者友好：提供可直接集成的 REST API 和演示型开发者页面
• 本地演示完善：支持一键注入 demo 数据，方便展示和联调

页面预览

首页首屏

展示产品定位、品牌视觉和核心 CTA。

交互式短链体验

支持输入长链接、生成短链、复制结果，并联动展示二维码与实时分析预览。

功能能力展示

围绕短链生成、别名、自定义、分析引擎和 API 接入组织能力卡片。

开发者 API 区域

展示 API 调用方式、返回结构以及事件流，适合用来说明“开发者友好”定位。

数据看板

覆盖核心指标、访问趋势、设备分布、热门链接和实时事件，体现数据产品页面的完整度。

登录页

登录页采用品牌侧栏 + 表单区布局，适合作为系统入口页展示。

技术栈

后端

• Spring Boot 3.5.7
• Spring Web / Spring Data JPA / Spring Security
• MySQL 8
• Redis + Caffeine
• RabbitMQ
• Resilience4j
• Micrometer + Prometheus + Zipkin
• JWT
• Hashids

前端

• Vue 3
• Vite 5
• Vue Router
• Vue I18n
• Axios
• ECharts
• Tailwind CSS
• GSAP

系统设计亮点

• 多级缓存：本地 Caffeine + Redis，降低高频跳转读取压力
• 异步事件处理：点击事件通过 MQ 聚合，兼顾写入吞吐和统计展示
• 数据看板：支持全局概览、趋势、设备分布、地域分布和实时事件流
• 开发体验：前端独立运行，Vite 代理后端接口，适合本地快速开发
• 可观测性：开放 Actuator / Prometheus 指标接口，便于排障和监控

项目结构

TinyFlow
├── src/main/java/com/layor/tinyflow
│   ├── Controller     # 短链、统计、认证、监控接口
│   ├── service        # 核心业务逻辑
│   ├── repository     # JPA 数据访问层
│   ├── entity         # 数据实体
│   ├── security       # JWT 与鉴权逻辑
│   ├── listener       # MQ 消息监听
│   ├── config         # 缓存、监控、系统配置
│   └── aspect         # 横切逻辑
├── src/main/resources
│   └── application.yml
├── web
│   ├── src/components
│   ├── src/pages
│   ├── src/composables
│   └── public
├── scripts
│   └── seed_demo_data.sh
├── docker-compose.yml
└── README.md

快速开始

方式一：Docker Compose 启动整套环境

适合第一次体验项目，能一次拉起 MySQL、Redis、RabbitMQ、后端和前端。

git clone https://github.com/Layau-code/TinyFlow.git
cd TinyFlow
docker compose up -d --build

启动后访问：

• 前端首页：http://localhost:5173
• 后端接口：http://localhost:8080
• 健康检查：http://localhost:8080/actuator/health
• RabbitMQ 管理台：http://localhost:15672

默认本地容器信息：

• MySQL：localhost:3307
• Redis：localhost:6380
• RabbitMQ：admin / rabbit

方式二：本地开发模式

1. 启动基础依赖

你可以自行准备 MySQL / Redis / RabbitMQ，或只先启动它们的容器：

docker compose up -d mysql redis rabbitmq

2. 启动后端

export DB_PASSWORD=123456
export REDIS_PASSWORD=123456
export JWT_SECRET=tinyflow-local-development-secret-key-at-least-256-bits
export APP_DOMAIN=http://localhost:8080

./mvnw spring-boot:run

3. 启动前端

cd web
npm install
npm run dev

注入演示数据

仓库内置了演示数据脚本，适合本地查看统计页、排行榜、来源分布和设备分布。

./scripts/seed_demo_data.sh

执行完成后，可直接在首页、看板页和统计页看到较完整的示例数据。

常用接口

创建短链

curl -X POST http://localhost:8080/api/shorten \
  -H "Content-Type: application/json" \
  -d '{
    "longUrl": "https://github.com/openai/codex",
    "customAlias": "ghrepo"
  }'

获取短链列表

curl "http://localhost:8080/api/urls?page=0&size=10"

访问短链重定向

curl -I http://localhost:8080/api/redirect/ghrepo

查看全局统计

curl http://localhost:8080/api/stats/global

查看单条短链详细统计

curl http://localhost:8080/api/stats/detailed/ghrepo

监控与运维

• 健康检查：/actuator/health
• Prometheus 指标：/actuator/prometheus
• 监控接口：/api/monitor/health
• 缓存统计：/api/monitor/cache/stats

适合展示的工程点

如果你想把这个项目用于简历、面试或作品集，它比较适合突出这些点：

• Java 后端完整业务链路：创建、跳转、统计、鉴权
• Redis + Caffeine 多级缓存策略
• RabbitMQ 异步聚合点击事件
• Resilience4j 限流 / 熔断配置
• Vue 3 数据产品型前端页面设计
• 从 API 到看板的端到端演示能力

后续可扩展方向

• 自定义域名与多租户
• 链接有效期和失效通知
• 更完整的用户权限系统
• 批量导入导出和团队协作
• Agent 化分析助手，例如“解释某条短链最近一周表现”

许可证

本项目采用 MIT License。

---

如果这个项目对你有帮助，欢迎点个 Star。