从零构建一个数据采集系统

背景：公司想要一个数据大屏 & 不想出钱不想出人 & 我是一个前端小白 & 我是一个后端小白 & 我是一个硬件小白
条件：AI工具（cursor）

0x00 安装cursor（略）

0x01 告诉cursor我想做什么：

我是一名给排水工程师...

0x02 让cursor按照软件设计说明帮我编排docker

version: '3.8'
services:
  collector:
    image: water-collector:latest
    restart: always
    volumes:
      - ./vue3/collector_data:/data
    # 如有配置文件可挂载到/data或其他目录

  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: root
    volumes:
      - ./vue3/mysql_data:/var/lib/mysql
    ports:
      - "3306:3306"

  influxdb:
    image: influxdb:2.6
    ports:
      - "8086:8086"
    volumes:
      - ./vue3/influxdb_data:/var/lib/influxdb2

  backend:
    image: water-backend:latest
    build: ./backend
    ports:
      - "8000:8000"
    depends_on:
      - mysql
      - influxdb
    volumes:
      - ./vue3/backend_data:/app/data

  frontend:
    image: water-frontend:latest
    build: ./vue3
    ports:
      - "8080:80"
    volumes:
      - ./vue3/frontend_data:/usr/share/nginx/html
    depends_on:
      - backend

  # nginx:
  #   image: nginx:latest
  #   ports:
  #     - "80:80"
  #     - "443:443"
  #   volumes:
  #     - ./vue3/nginx_conf:/etc/nginx/conf.d
  #     - ./vue3/nginx_html:/usr/share/nginx/html
  #   depends_on:
  #     - backend 

0x03 让cursor帮我补充缺失的dockerfile

FROM python:3.10-slim
WORKDIR /app
COPY . .
RUN pip install --no-cache-dir -r requirements.txt
EXPOSE 8000
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"] 

FROM python:3.10-slim
WORKDIR /app
COPY . .
RUN pip install --no-cache-dir -r requirements.txt
CMD ["python", "collector.py"] 

# 构建阶段
FROM node:18 AS build
WORKDIR /app
COPY . .
RUN npm install && npm run build

# 生产阶段
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80 

0x04 安装构建容器的所需的依赖文件

一、前端（Vue3 + Ant Design Vue）

1. 安装 Node.js

  sudo apt update
   sudo apt install nodejs npm

2. 初始化 Vue3 项目，推荐用官方脚手架（需要先安装 pnpm 或 npm，记得换源安装）：

 npm install -g @vue/cli
   mkdir -p vue3/frontend
   cd vue3/frontend
   vue create .

选择 Vue3，选择默认配置。

安装 Ant Design Vue 和 ECharts

  npm install ant-design-vue@next echarts

4. 确认目录结构
• package.json、src/、public/ 等会自动生成。

二、后端（FastAPI）

　　1. 初始化后端目录

 mkdir -p vue3/backend
   cd vue3/backend

2. 创建 requirements.txt

fastapi
uvicorn
sqlalchemy
pymysql
influxdb-client

3. 创建 main.py

   from fastapi import FastAPI

   app = FastAPI()

   @app.get("/")
   def read_root():
       return {"msg": "Hello, Water System!"}

三、采集端（Python 脚本）

　　1. 初始化采集端目录

   mkdir -p vue3/collector

   cd vue3/collector

2. 创建 requirements.txt

   pyserial
   pymodbus
   influxdb-client

3. 创建 main.py

   import time


   def main():
       while True:
           print("采集数据中...")
           time.sleep(5)



   if __name__ == "__main__":
       main()

五、下一步

运行  docker-compose up -d --build  启动所有服务。