msdeluise/plant-it-frontend

Plant-it 前端镜像文档

镜像概述

Plant-it 是一款自托管的园艺伴侣应用，旨在帮助用户管理植物养护。该前端镜像提供用户界面，用于记录植物养护活动（如浇水、施肥）、上传植物图片、查看养护历史，并接收相关提醒。与后端配合使用，形成完整的植物管理系统。

核心功能

• 通过 Trefle API 添加现有植物或创建自定义植物到个人收藏
• 记录植物的浇水、施肥、生物刺激等养护事件
• 查看所有养护记录，并可按植物和事件类型筛选
• 上传植物照片，记录生长状态
• 即将推出：与其他用户共享植物
• 即将推出：为植物养护操作设置提醒（如每4天未浇水时通知）
• 即将推出：深色/浅色模式切换

使用场景

适合园艺爱好者、家庭植物养护者以及需要系统记录植物生长过程的用户。尤其适合希望自主管理植物养护节奏，而非依赖应用推荐的用户，帮助记录历史养护行为，避免遗忘关键养护时间点。

使用方法

基本部署

推荐使用 Docker Compose 进行部署，需配合后端、数据库和缓存服务。官方提供的 docker-compose.yml 配置如下：

yaml
version: "3"

name: plant-it
services:
  backend:
    image: docker.xuanyuan.run/msdeluise/plant-it-backend:latest
    env_file: backend.env
    depends_on:
      - db
      - cache
    restart: unless-stopped
    volumes:
      - "./upload-dir:/upload-dir"
    ports:
      - "8080:8080"

  db:
    image: docker.xuanyuan.run/mysql:8.0
    restart: always
    env_file: backend.env

  cache:
    image: docker.xuanyuan.run/redis:7.2.1
    restart: always

  frontend:
    image: docker.xuanyuan.run/msdeluise/plant-it-frontend:latest
    env_file: frontend.env
    links:
      - backend
    ports:
      - "3000:3000"

部署步骤：

1. 创建 backend.env 和 frontend.env 配置文件（见配置说明）
2. 运行命令启动服务：docker compose up -d
3. 访问前端界面：http://localhost:3000
4. 后端 API 地址：http://localhost:8080/api（API 文档：http://localhost:8080/api/swagger-ui/index.html）

远程主机部署

若在服务器部署并从其他设备（如手机）访问，需修改配置：

• 假设服务器本地 IP 为 192.168.1.100，需在 frontend.env 中设置 API_URL=http://192.168.1.100:8080/api
• 前端访问地址：http://192.168.1.100:3000
• 后端 API 地址：http://192.168.1.100:8080/api

端口修改

后端端口

1. 在 docker-compose.yml 中修改端口映射，如 9090:8080（主机端口:容器端口）
2. 更新 frontend.env 中的 API_URL 指向新端口，如 http://localhost:9090/api

前端端口

在 docker-compose.yml 中修改端口映射，如 4040:3000（主机端口:容器端口）

DNS 与 CORS 说明

DNS

浏览器无法识别 Docker 网络内的服务 hostname（如 backend），需使用服务器 IP 或域名配置 API_URL。例如：

• 错误示例：http://backend:8080/api（浏览器无法解析 backend）
• 正确示例：http://192.168.1.100:8080/api

CORS

后端通过 ALLOWED_ORIGINS 控制跨域访问，默认值为 *（允许所有来源）。若需限制访问，可设置具体客户端 IP 或域名（逗号分隔）。

配置说明

前端配置文件（frontend.env）

包含前端应用的环境变量，示例内容：

PORT=3000 # 容器内服务端口，如需修改主机端口需调整 docker-compose 端口映射
API_URL=http://localhost:8080/api # 后端 API 地址，远程部署需改为服务器 IP:端口/api

PAGE_SIZE=25 # 每页显示记录数

BROWSER=none # 禁用自动打开浏览器

后端配置文件（backend.env）

包含后端及数据库、缓存的环境变量，示例内容：

# MySQL 数据库配置
MYSQL_HOST=db
MYSQL_PORT=3306
MYSQL_USERNAME=root
MYSQL_PSW=root
MYSQL_ROOT_PASSWORD=root
MYSQL_DATABASE=bootdb

# JWT 配置
JWT_SECRET=putTheSecretHere # JWT 密钥，建议修改为安全值
JWT_EXP=1 # JWT 过期时间（天）

# 用户限制
USERS_LIMIT=-1 # 包括管理员账户，<=0 表示无限制，>=2 表示限制用户数

# 存储配置
UPLOAD_DIR=/upload-dir # 上传图片存储路径，Docker 部署时建议保持默认，通过卷映射修改主机路径

# API 端口
API_PORT=8080 # 容器内 API 端口

# Redis 缓存配置
CACHE_TTL=86400 # 缓存过期时间（秒）
CACHE_HOST=cache
CACHE_PORT=6379

# Trefle API 配置
TRAFLE_KEY= # Trefle API 密钥，留空则仅支持用户自定义植物

# CORS 配置
ALLOWED_ORIGINS=* # 允许的跨域来源（逗号分隔列表）