mengyaprofile/README.md

萌芽个人主页

一个现代化的个人主页网站，采用前后端分离架构，支持 Docker 一键部署。

🚀 快速部署 (Docker)

一键启动

Windows:

docker-deploy.bat

Linux/Mac:

chmod +x docker-deploy.sh
./docker-deploy.sh

或使用 Docker Compose:

docker-compose up -d --build

访问应用:

• 主页: http://localhost:5000
• 管理员: http://localhost:5000/admin?token=shumengya520

📖 详细文档: Docker 部署指南 | 快速开始

---

项目简介

这是一个功能完整、设计精美的个人主页系统，展示个人信息、全部项目和联系方式。

特性亮点

• 🎨 现代化设计: 渐变色背景、流畅动画、精美卡片布局
• 📱 响应式布局: 完美适配桌面端和移动端
• 🔄 前后端分离: React + Python Flask 架构
• 🐳 Docker 支持: 一键部署，开箱即用
• 💾 数据持久化: SQLite（data/site.db）+ 管理后台
• ⚡ 内容管理: 通过 /admin 或 Admin API 维护站点数据
• 🎯 三大模块: 个人信息、全部项目、联系方式
• 🔐 权限控制: 管理员模式隐藏私密项目

项目结构

萌芽个人主页/
├── mengyaprofile-backend/    # 后端 Python Flask 项目
│   ├── app.py                 # Flask 应用主文件
│   ├── requirements.txt       # Python 依赖
│   └── data/                  # SQLite（site.db）与 logo 等静态资源
│
└── mengyaprofile-frontend/    # 前端 React 项目
    ├── public/                # 静态资源
    ├── src/                   # 源代码
    │   ├── App.js            # 主应用
    │   ├── App.css           # 全局样式
    │   └── components/       # 组件目录
    │       ├── ProfileSection.js   # 个人信息组件
    │       ├── ProjectsSection.js  # 项目展示组件
    │       └── ContactsSection.js  # 联系方式组件
    └── package.json          # 项目配置

快速开始

前置要求

• Python 3.7+
• Node.js 14+
• npm 或 yarn

1. 启动后端服务

# 进入后端目录
cd mengyaprofile-backend

# 安装依赖
pip install -r requirements.txt

# 运行服务
python app.py

后端服务将运行在 http://localhost:5000

2. 启动前端应用

# 进入前端目录
cd mengyaprofile-frontend

# 安装依赖
npm install

# 启动开发服务器
npm start

前端应用将运行在 http://localhost:3000

3. 访问应用

在浏览器中打开 http://localhost:3000 即可查看你的个人主页！

功能模块与数据

个人信息、项目列表、联系方式、技术栈等内容均存储在 mengyaprofile-backend/data/site.db（SQLite），表结构见 mengyaprofile-backend/schema.sql。

• 浏览: 首页读取 /api/all 等接口。
• 编辑: 打开 /admin（需管理员 token，见后端环境变量 ADMIN_TOKEN），在后台表单中维护；或直接调用 /api/admin/* 并携带请求头 X-Admin-Token。

空库首次启动时只会创建最小占位数据（空昵称、默认「技术栈」标题），其余请在管理后台中填写。

技术栈

前端

• React 19
• CSS3（动画、渐变、响应式布局）
• Fetch API

后端

• Python 3
• Flask 3.0
• Flask-CORS（跨域支持）

API 接口

后端提供以下 RESTful API：

• GET /api/profile - 获取个人信息
• GET /api/projects - 获取项目列表
• GET /api/contacts - 获取联系方式
• GET /api/all - 获取所有数据

部署建议

后端部署

推荐使用以下方式部署后端：

• Heroku
• AWS EC2
• 阿里云 ECS
• 使用 Gunicorn 作为生产服务器

前端部署

推荐使用以下方式部署前端：

• Vercel
• Netlify
• GitHub Pages
• Nginx 静态服务器

注意: 部署前需要修改前端 src/App.js 中的 API 地址为生产环境地址。

浏览器支持

• ✅ Chrome（推荐）
• ✅ Firefox
• ✅ Safari
• ✅ Edge
• ✅ 移动端浏览器

开发计划

• 添加博客模块
• 添加深色模式
• 添加多语言支持
• 添加后台管理系统
• 添加访问统计
• 添加留言板功能

许可证

MIT License

作者

萌芽

---

如有问题或建议，欢迎提 Issue！