# aiAutoGen

**Repository Path**: zqf_yc/aiAutoGen

## Basic Information

- **Project Name**: aiAutoGen
- **Description**: 测试AI代码自动生成
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-26
- **Last Updated**: 2026-03-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 实时库存监控系统

<div align="center">

![Version](https://img.shields.io/badge/version-1.0.0-blue.svg)
![Spring Boot](https://img.shields.io/badge/Spring%20Boot-2.7.18-brightgreen.svg)
![Vue](https://img.shields.io/badge/Vue-3.3.4-42b883.svg)
![License](https://img.shields.io/badge/license-MIT-green.svg)

一个基于 Spring Boot + Vue 3 的实时库存监控系统，通过网页抓取技术实时监控服务器库存状态，并使用 WebSocket 实现数据实时推送。

[功能特性](#功能特性) • [技术栈](#技术栈) • [快速开始](#快速开始) • [项目结构](#项目结构) • [配置说明](#配置说明) • [API文档](#api文档)

</div>

---

## 📋 项目简介

实时库存监控系统是一个全栈Web应用，用于实时监控服务器产品的库存状态。系统通过定时抓取目标网站的产品信息，并通过WebSocket技术将库存变化实时推送到前端展示，帮助用户及时了解产品库存情况。

### 核心功能

- ✅ **实时数据抓取**：定时抓取目标网站的服务器产品信息
- ✅ **WebSocket实时推送**：库存变化实时推送到前端，无需刷新页面
- ✅ **可视化展示**：精美的UI界面，展示产品配置、价格、库存等信息
- ✅ **自动重连机制**：WebSocket断线自动重连，保证连接稳定性
- ✅ **手动刷新**：支持手动触发数据刷新
- ✅ **响应式设计**：适配不同屏幕尺寸，提供良好的用户体验

---

## 🎯 功能特性

### 后端功能

- **定时任务调度**：使用Spring Task实现定时数据抓取
- **网页数据抓取**：基于Jsoup库解析HTML页面，提取产品信息
- **WebSocket服务**：实现实时数据推送，支持多客户端连接
- **RESTful API**：提供标准的HTTP接口供前端调用
- **跨域支持**：配置CORS，支持前后端分离部署
- **健康检查**：提供系统健康状态检查接口

### 前端功能

- **实时数据展示**：通过WebSocket接收并展示实时库存数据
- **粒子动画背景**：精美的粒子系统动画效果
- **毛玻璃UI设计**：现代化的毛玻璃效果界面
- **状态监控**：实时显示WebSocket连接状态
- **自动重连**：连接断开时自动尝试重连
- **手动重连**：提供手动重连按钮
- **数据统计**：展示总产品数、有货产品数等统计信息
- **购买交互**：提供购买按钮交互（可扩展）

---

## 🛠 技术栈

### 后端技术

| 技术 | 版本 | 说明 |
|------|------|------|
| Java | 1.8 | 开发语言 |
| Spring Boot | 2.7.18 | 应用框架 |
| Spring WebSocket | 2.7.18 | WebSocket支持 |
| Jsoup | 1.15.4 | HTML解析库 |
| Lombok | Latest | 简化Java代码 |
| Jackson | Latest | JSON处理 |
| Maven | 3.x | 项目构建工具 |

### 前端技术

| 技术 | 版本 | 说明 |
|------|------|------|
| Vue.js | 3.3.4 | 前端框架 |
| Element Plus | 2.4.4 | UI组件库 |
| Vite | 5.0.0 | 构建工具 |
| Axios | 1.6.2 | HTTP客户端 |
| @element-plus/icons-vue | 2.3.1 | 图标库 |

---

## 🚀 快速开始

### 环境要求

- **JDK**: 1.8+
- **Node.js**: 16.x+
- **Maven**: 3.6+
- **浏览器**: Chrome/Firefox/Edge (支持WebSocket)

### 后端启动

1. **克隆项目**
```bash
git clone <repository-url>
cd aiAutoGen
```

2. **配置后端**
```bash
cd backend
```

修改 `src/main/resources/application.yml` 中的配置：
```yaml
server:
  port: 8080

target:
  url: https://www.heyunidc.cn/cart?fid=47&gid=87  # 目标网站URL
  interval: 10  # 抓取间隔（秒）
```

3. **启动后端服务**
```bash
# 使用Maven启动
mvn spring-boot:run

# 或者先打包再运行
mvn clean package
java -jar target/inventory-monitor-1.0.0.jar
```

4. **验证后端**
访问健康检查接口：
```bash
curl http://localhost:8080/api/inventory/health
```

### 前端启动

1. **安装依赖**
```bash
cd frontend
npm install
```

2. **配置Vite代理**

修改 `vite.config.js` 中的代理配置（如果需要）：
```javascript
export default defineConfig({
  server: {
    proxy: {
      '/ws': {
        target: 'http://localhost:8080',
        ws: true
      },
      '/api': {
        target: 'http://localhost:8080'
      }
    }
  }
})
```

3. **启动开发服务器**
```bash
npm run dev
```

4. **访问应用**
打开浏览器访问：`http://localhost:5173`

### 生产部署

#### 后端打包部署
```bash
cd backend
mvn clean package -DskipTests
java -jar target/inventory-monitor-1.0.0.jar
```

#### 前端打包部署
```bash
cd frontend
npm run build
```

打包后的文件在 `dist` 目录，可以部署到Nginx或其他Web服务器。

---

## 📁 项目结构

```
aiAutoGen/
├── backend/                          # 后端项目
│   ├── src/
│   │   └── main/
│   │       ├── java/com/inventory/
│   │       │   ├── config/          # 配置类
│   │       │   │   ├── CorsConfig.java       # 跨域配置
│   │       │   │   └── WebSocketConfig.java  # WebSocket配置
│   │       │   ├── controller/      # 控制器
│   │       │   │   └── InventoryController.java
│   │       │   ├── dto/             # 数据传输对象
│   │       │   │   └── ServerInfoDTO.java
│   │       │   ├── entity/          # 实体类
│   │       │   │   └── ServerInfo.java
│   │       │   ├── service/         # 服务层
│   │       │   │   ├── InventoryService.java
│   │       │   │   └── WebScrapingService.java
│   │       │   ├── websocket/       # WebSocket处理
│   │       │   │   ├── InventoryWebSocketHandler.java
│   │       │   │   └── WebSocketHandshakeInterceptor.java
│   │       │   └── InventoryMonitorApplication.java  # 启动类
│   │       └── resources/
│   │           └── application.yml  # 配置文件
│   └── pom.xml                      # Maven配置
│
├── frontend/                         # 前端项目
│   ├── src/
│   │   ├── api/                     # API接口
│   │   │   └── inventory.js
│   │   ├── utils/                   # 工具类
│   │   │   └── websocket.js         # WebSocket封装
│   │   ├── App.vue                  # 主组件
│   │   └── main.js                  # 入口文件
│   ├── index.html                   # HTML模板
│   ├── package.json                 # 依赖配置
│   └── vite.config.js               # Vite配置
│
├── README.md                        # 项目文档
└── 需求Spec.md                      # 需求文档
```

---

## ⚙️ 配置说明

### 后端配置 (application.yml)

```yaml
server:
  port: 8080  # 服务端口

spring:
  application:
    name: inventory-monitor

# 目标网站配置
target:
  url: https://www.heyunidc.cn/cart?fid=47&gid=87  # 要抓取的网站URL
  interval: 10  # 数据抓取间隔（秒）

# 日志配置
logging:
  level:
    com.inventory: DEBUG  # 应用日志级别
    org.jsoup: INFO       # Jsoup日志级别
```

### 前端配置

#### API配置 (src/api/inventory.js)
```javascript
const BASE_URL = '/api'  // API基础路径
```

#### WebSocket配置 (src/utils/websocket.js)
```javascript
// WebSocket连接URL会自动根据当前协议和主机生成
// 格式: ws://host/ws/inventory 或 wss://host/ws/inventory
```

---

## 📡 API文档

### 1. 获取所有服务器信息

**接口地址**: `GET /api/inventory/servers`

**请求参数**: 无

**响应示例**:
```json
{
  "code": 200,
  "message": "success",
  "data": [
    {
      "id": 1,
      "name": "服务器名称",
      "model": "型号",
      "cpu": "Intel Xeon E5-2680 v4",
      "memory": "32GB DDR4",
      "disk": "1TB SSD",
      "bandwidth": "100M",
      "datacenter": "北京机房",
      "stock": 5,
      "inStock": true,
      "price": "2999",
      "pricePeriod": "/月",
      "remark": "备注信息",
      "updateTime": "2024-01-01T12:00:00"
    }
  ],
  "count": 1
}
```

### 2. 手动刷新数据

**接口地址**: `POST /api/inventory/refresh`

**请求参数**: 无

**响应示例**:
```json
{
  "code": 200,
  "message": "数据刷新成功",
  "data": [...],
  "count": 10
}
```

### 3. 健康检查

**接口地址**: `GET /api/inventory/health`

**请求参数**: 无

**响应示例**:
```json
{
  "code": 200,
  "message": "系统运行正常",
  "timestamp": 1704110400000
}
```

### WebSocket连接

**连接地址**: `ws://localhost:8080/ws/inventory`

**消息格式**:
```json
{
  "type": "inventory_update",
  "data": [...],
  "count": 10
}
```

---

## 🎨 界面预览

### 主要界面元素

1. **顶部导航栏**
   - 系统标题
   - WebSocket连接状态指示器
   - 重新连接按钮

2. **统计卡片**
   - 总产品数
   - 有货产品数
   - 当前更新时间

3. **产品卡片网格**
   - 服务器名称
   - 库存状态标签
   - 配置信息（CPU、内存、硬盘、带宽、机房）
   - 价格信息
   - 购买按钮
   - 备注信息

4. **动画效果**
   - 粒子背景动画
   - 几何图形装饰
   - 毛玻璃效果
   - 悬停动画

---

## 🔧 开发指南

### 添加新的抓取规则

修改 `WebScrapingService.java` 中的解析逻辑：

```java
// 在 scrapeServerInfo() 方法中添加新的解析规则
Element newElement = card.selectFirst(".your-selector");
if (newElement != null) {
    String value = newElement.text().trim();
    serverInfo.setYourField(value);
}
```

### 修改抓取间隔

在 `application.yml` 中修改：
```yaml
target:
  interval: 30  # 改为30秒
```

### 自定义前端样式

修改 `App.vue` 中的 `<style>` 部分，所有样式都是全局样式。

---

## 🐛 常见问题

### 1. WebSocket连接失败

**问题**: 前端显示"已断开"状态

**解决方案**:
- 检查后端服务是否正常启动
- 检查防火墙是否阻止了WebSocket连接
- 检查Vite代理配置是否正确
- 查看浏览器控制台错误信息

### 2. 数据抓取失败

**问题**: 后端日志显示抓取失败

**解决方案**:
- 检查目标网站URL是否正确
- 检查网络连接是否正常
- 检查目标网站是否更改了HTML结构
- 查看后端日志中的详细错误信息

### 3. 跨域问题

**问题**: 前端无法访问后端API

**解决方案**:
- 确认后端已配置 `CorsConfig`
- 确认前端使用Vite代理或后端允许跨域
- 检查请求头是否正确

### 4. 端口冲突

**问题**: 启动失败，提示端口被占用

**解决方案**:
- 修改 `application.yml` 中的端口号
- 或停止占用该端口的其他服务

---

## 📝 更新日志

### v1.0.0 (2024-01-01)

- ✨ 初始版本发布
- ✅ 实现基础的数据抓取功能
- ✅ 实现WebSocket实时推送
- ✅ 实现前端可视化展示
- ✅ 实现自动重连机制
- ✅ 实现手动刷新功能

---

## 🤝 贡献指南

欢迎提交Issue和Pull Request！

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

---

## 📄 许可证

本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件

---

## 📧 联系方式

如有问题或建议，请通过以下方式联系：

- 提交 Issue
- 发送邮件

---

## 🙏 致谢

感谢以下开源项目：

- [Spring Boot](https://spring.io/projects/spring-boot)
- [Vue.js](https://vuejs.org/)
- [Element Plus](https://element-plus.org/)
- [Jsoup](https://jsoup.org/)
- [Vite](https://vitejs.dev/)

---

<div align="center">

**如果这个项目对你有帮助，请给个 ⭐️ Star 支持一下！**

Made with ❤️ by CodeFree

</div>