125 lines
2.5 KiB
Markdown
125 lines
2.5 KiB
Markdown
# 萌芽短链接分发网站
|
|
|
|
一个简单、快速的短链接生成工具，使用 React + Flask 构建。
|
|
|
|
## 🌟 功能特点
|
|
|
|
- ✨ 生成 4 位字母数字组合的短链接（支持大小写）
|
|
- 🎲 随机生成可用的短链接代码
|
|
- ✅ 实时检查链接代码是否可用
|
|
- 📋 一键复制生成的短链接
|
|
- 🎨 淡绿色渐变清新柔和风格
|
|
- 📱 完美适配移动端
|
|
|
|
## 🛠️ 技术栈
|
|
|
|
### 前端
|
|
- React 19
|
|
- Axios (HTTP 请求)
|
|
- Vite (构建工具)
|
|
|
|
### 后端
|
|
- Python 3
|
|
- Flask (Web 框架)
|
|
- Flask-CORS (跨域支持)
|
|
|
|
## 📦 项目结构
|
|
|
|
```
|
|
萌芽短链分发/
|
|
├── mengyalinkfly-backend/ # 后端
|
|
│ ├── app.py # Flask 应用主文件
|
|
│ ├── requirements.txt # Python 依赖
|
|
│ ├── link_data.json # 链接数据存储
|
|
│ └── README.md # 后端说明
|
|
└── mengyalinkfly-frontend/ # 前端
|
|
├── src/
|
|
│ ├── App.jsx # 主应用组件
|
|
│ ├── App.css # 样式文件
|
|
│ └── main.jsx # 入口文件
|
|
├── package.json # 前端依赖
|
|
├── vite.config.js # Vite 配置
|
|
└── README.md # 前端说明
|
|
```
|
|
|
|
## 🚀 快速开始
|
|
|
|
### 1. 启动后端
|
|
|
|
```bash
|
|
cd mengyalinkfly-backend
|
|
|
|
# 安装依赖
|
|
pip install -r requirements.txt
|
|
|
|
# 运行后端服务
|
|
python app.py
|
|
```
|
|
|
|
后端将在 `http://localhost:5000` 启动
|
|
|
|
### 2. 启动前端
|
|
|
|
```bash
|
|
cd mengyalinkfly-frontend
|
|
|
|
# 安装依赖
|
|
npm install
|
|
|
|
# 启动开发服务器
|
|
npm run dev
|
|
```
|
|
|
|
前端将在 `http://localhost:5173` 启动
|
|
|
|
## 📝 API 接口
|
|
|
|
### 检查短链接是否可用
|
|
```
|
|
GET /api/check/<code>
|
|
```
|
|
|
|
### 生成随机短链接代码
|
|
```
|
|
GET /api/generate
|
|
```
|
|
|
|
### 创建短链接
|
|
```
|
|
POST /api/create
|
|
Content-Type: application/json
|
|
|
|
{
|
|
"code": "Aaa3",
|
|
"target_url": "https://example.com"
|
|
}
|
|
```
|
|
|
|
### 跳转到目标链接
|
|
```
|
|
GET /<code>
|
|
```
|
|
|
|
## 🎨 设计特色
|
|
|
|
- **配色方案**：淡绿色渐变 (#a8e6cf → #dcedc1 → #c9e4ca)
|
|
- **交互动画**：平滑过渡、悬浮效果、弹跳动画
|
|
- **响应式设计**：完美适配各种屏幕尺寸
|
|
- **用户体验**：清晰的视觉反馈、友好的错误提示
|
|
|
|
## 🌐 域名配置
|
|
|
|
项目使用域名：`short.shumengya.top`
|
|
|
|
短链接格式：`short.shumengya.top/{4位代码}`
|
|
|
|
例如：`short.shumengya.top/Aaa3`
|
|
|
|
## 📄 许可证
|
|
|
|
MIT License
|
|
|
|
---
|
|
|
|
© 2025 萌芽短链接 - 让分享更简单 🌱
|