# jenkins-ci-demo-frontend

**Repository Path**: jun-wan/jenkins-ci-demo-frontend

## Basic Information

- **Project Name**: jenkins-ci-demo-frontend
- **Description**: jenkins-ci-demo-frontend 前端Vue3项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-05
- **Last Updated**: 2025-08-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Jenkins CI Demo Frontend

基于 Vue 3 + Vite 的前端项目，用于演示 Jenkins CI/CD 部署流程。

## 项目特性

- ✅ Vue 3 Composition API + script setup
- ✅ Vite 构建工具
- ✅ Tailwind CSS 样式框架
- ✅ Axios HTTP 客户端
- ✅ 响应式设计
- ✅ 错误处理和加载状态
- ✅ 实时时间显示
- ✅ 自动获取系统信息
- ✅ 自动刷新功能（30秒间隔）
- ✅ 连接状态监控
- ✅ 组件化开发

## 项目结构

```
jenkins-ci-demo-frontend/
├── public/                 # 静态资源
├── src/
│   ├── api/               # API 服务
│   │   └── systemApi.js   # 系统信息 API
│   ├── assets/            # 资源文件
│   │   └── style.css      # 全局样式
│   ├── components/        # 组件目录
│   │   ├── SystemInfoCard.vue  # 系统信息卡片组件
│   │   └── TimeDisplay.vue     # 时间显示组件
│   ├── App.vue           # 主组件
│   └── main.js           # 应用入口
├── index.html            # HTML 模板
├── package.json          # 项目配置
├── vite.config.js        # Vite 配置
└── README.md            # 项目说明
```

## 开发环境

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

访问 http://localhost:3000

### 构建生产版本

```bash
npm run build
```

构建产物输出到 `dist` 目录。

### 预览生产版本

```bash
npm run preview
```

## 功能说明

### 🕒 实时时间显示
- 页面顶部显示当前时间，每秒自动更新
- 使用中文格式显示日期和时间

### 🔄 自动获取系统信息
- 页面加载时自动获取后端系统信息
- 支持手动刷新按钮
- 自动刷新功能（默认30秒间隔）
- 可通过开关控制自动刷新

### 📊 连接状态监控
- 实时显示前端和后端连接状态
- 绿色：连接正常
- 红色：连接失败
- 黄色：检测中

### 🎨 用户体验优化
- 响应式设计，支持移动端
- 加载动画和状态提示
- 错误处理和重试机制
- 卡片式布局，界面简洁美观

## API 接口

项目调用后端 `/api/info` 接口获取系统信息：

```json
{
  "name": "jenkins-ci-demo",
  "version": "1.0",
  "author": "cpolar"
}
```

## 部署说明

### 开发环境

开发环境下，Vite 会自动代理 `/api` 请求到 `http://localhost:8080`。

### 生产环境

生产环境下，需要配置 Nginx 反向代理：

```nginx
location /api {
    proxy_pass http://backend-server:8080;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

location / {
    try_files $uri $uri/ /index.html;
}
```

### Jenkins 部署

1. 拉取代码
2. 安装依赖：`npm install`
3. 构建项目：`npm run build`
4. 部署 `dist` 目录到 Web 服务器

## 技术栈

- **Vue 3**: 渐进式 JavaScript 框架
- **Vite**: 下一代前端构建工具
- **Tailwind CSS**: 实用优先的 CSS 框架
- **Axios**: Promise 基于的 HTTP 客户端

## 作者

cpolar