fa77e0a65f6d2a89eec5fa0bf07385f278561cf2
萌芽漂流瓶(前后端分离版)
mengyadriftbottle-backend/: Flask API(/api)+ 管理后台视图(/admin)。mengyadriftbottle-frontend/: React + Vite 单页应用,调用上述 API 并提供用户交互界面。
快速开始
后端
cd mengyadriftbottle-backend
python -m venv .venv
.venv\Scripts\activate
pip install -r requirements.txt
python app.py
服务器默认监听 http://localhost:5002,所有公开接口挂载在 http://localhost:5002/api。
前端
确保后端已运行后启动 Vite:
cd mengyadriftbottle-frontend
npm install
npm run dev
此命令会在 http://localhost:5173 打开 React 界面,所有 /api/* 请求会被代理到本地 Flask 服务。
自定义配置
在 mengyadriftbottle-frontend 下创建 .env 覆盖默认地址:
VITE_API_BASE_URL=http://your-domain/api
VITE_ADMIN_URL=https://your-domain/admin/login
后端使用根目录的 templates/(管理后台视图)和 static/(样式文件),数据文件(bottles.json、config.json 等)现已迁移至 mengyadriftbottle-backend/ 目录,所有前端页面由 React 单页应用提供。
轻量后台
- 访问
http://localhost:5002/admin?token=shumengya520(或自定义DRIFT_BOTTLE_ADMIN_TOKEN)即可查看/删除漂流瓶列表。 - 旧版登录后台依然可通过
http://localhost:5002/admin/login使用。
Docker 部署
若希望以单一容器运行前后端,可使用根目录提供的 Dockerfile:
- 构建镜像:
cd e:\Python\前后端分离项目\萌芽漂流瓶 docker build -t mengyadriftbottle:latest . - 创建持久化目录(宿主机):
mkdir -p /shumengya/docker/storage/mengyadriftbottle - 运行容器(对外暴露 6767 端口,并挂载数据目录):
docker run -d \ --name mengyadriftbottle \ -p 6767:6767 \ -v /shumengya/docker/storage/mengyadriftbottle:/app/mengyadriftbottle-backend \ mengyadriftbottle:latest
容器内会:
- 使用
serve在 6767 端口提供构建后的前端静态文件。 - 使用
gunicorn在 5002 端口运行 Flask API(前端通过VITE_API_BASE_URL访问http://localhost:5002/api)。 - 将
/app/mengyadriftbottle-backend作为数据目录,因此挂载即可让bottles.json等文件持久化在宿主机/shumengya/docker/storage/mengyadriftbottle。
Description
Languages
JavaScript
81.7%
SCSS
6.2%
Less
5.9%
CSS
5.4%
Python
0.4%
Other
0.3%