继续提交

README.md

@@ -1,2 +1,66 @@
-# mengyadriftbottle
-萌芽匿名漂流瓶
+# 萌芽漂流瓶（前后端分离版）
+
+- `mengyadriftbottle-backend/`: Flask API（`/api`）+ 管理后台视图（`/admin`）。
+- `mengyadriftbottle-frontend/`: React + Vite 单页应用，调用上述 API 并提供用户交互界面。
+
+## 快速开始
+
+### 后端
+```cmd
+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：
+```cmd
+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`：
+
+1. 构建镜像：
+	```cmd
+	cd e:\Python\前后端分离项目\萌芽漂流瓶
+	docker build -t mengyadriftbottle:latest .
+	```
+2. 创建持久化目录（宿主机）：
+	```bash
+	mkdir -p /shumengya/docker/storage/mengyadriftbottle
+	```
+3. 运行容器（对外暴露 6767 端口，并挂载数据目录）：
+	```bash
+	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`。