# opsx-web

**Repository Path**: k8s-devops/opsx-web

## Basic Information

- **Project Name**: opsx-web
- **Description**: 前端框架: vue3 +  pinia + element-plus 
后端框架:  drf + fastapi + gin
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-12-13
- **Last Updated**: 2025-12-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# OPSX Web 开发框架基础模板

这是一个完整的全栈 Web 开发基础模板项目，包含前端和三种后端框架的实现。

## 项目结构

```
opsx-web/
├── opsx-ui/          # 前端项目 (Vue3 + Pinia + Element Plus)
├── opsx-drf/         # Django REST Framework 后端
├── opsx-fastapi/     # FastAPI 后端
└── opsx-gin/         # Gin (Go) 后端
```

## 技术栈

### 前端
- **框架**: Vue 3 (Composition API)
- **状态管理**: Pinia
- **UI 组件库**: Element Plus
- **路由**: Vue Router 4
- **构建工具**: Vite
- **HTTP 客户端**: Axios

### 后端

#### Django REST Framework (DRF)
- **框架**: Django 4.x + Django REST Framework
- **数据库**: PostgreSQL / MySQL / SQLite
- **认证**: JWT (djangorestframework-simplejwt)
- **ORM**: Django ORM

#### FastAPI
- **框架**: FastAPI
- **数据库**: SQLAlchemy + PostgreSQL / MySQL
- **认证**: JWT (python-jose)
- **异步支持**: 原生异步支持

#### Gin (Go)
- **框架**: Gin Web Framework
- **数据库**: GORM + PostgreSQL / MySQL
- **认证**: JWT (golang-jwt)
- **性能**: 高性能 Go 语言实现

## 快速开始

### 前端开发

```bash
cd opsx-ui
npm install
npm run dev
```

前端服务将在 `http://localhost:3000` 启动

### 后端开发

#### Django REST Framework

```bash
cd opsx-drf
pip install -r requirements.txt
python manage.py migrate
python manage.py runserver
```

#### FastAPI

```bash
cd opsx-fastapi
pip install -r requirements.txt
uvicorn main:app --reload
```

#### Gin (Go)

```bash
cd opsx-gin
go mod download
go run main.go
```

## 功能特性

### 通用功能
- ✅ 用户认证 (JWT Token)
- ✅ 用户管理
- ✅ 权限控制
- ✅ RESTful API
- ✅ 跨域支持 (CORS)
- ✅ 统一错误处理
- ✅ API 文档 (Swagger/OpenAPI)

### 前端特性
- ✅ 响应式布局
- ✅ 路由守卫
- ✅ 权限控制
- ✅ 组件库集成
- ✅ 请求拦截器
- ✅ 状态管理

## API 接口规范

所有后端框架遵循统一的 API 接口规范：

### 认证接口
- `POST /api/auth/login` - 用户登录
- `POST /api/auth/logout` - 用户登出
- `GET /api/auth/me` - 获取当前用户信息
- `POST /api/auth/refresh` - 刷新 Token

### 用户管理接口
- `GET /api/users` - 获取用户列表
- `GET /api/users/{id}` - 获取用户详情
- `POST /api/users` - 创建用户
- `PUT /api/users/{id}` - 更新用户
- `DELETE /api/users/{id}` - 删除用户

### 响应格式

**成功响应**:
```json
{
  "code": 200,
  "message": "success",
  "data": {}
}
```

**错误响应**:
```json
{
  "code": 400,
  "message": "错误信息",
  "data": null
}
```

## 环境配置

### 前端环境变量

在 `opsx-ui/.env` 中配置：

```env
VITE_API_BASE_URL=http://localhost:8000/api
```

### 后端环境变量

各后端框架的环境变量配置请参考各自的 README 文档。

## 开发指南

### 代码规范
- 前端：遵循 Vue 3 官方风格指南
- 后端：遵循各框架的官方代码规范

### 提交规范
- feat: 新功能
- fix: 修复问题
- docs: 文档更新
- style: 代码格式调整
- refactor: 代码重构
- test: 测试相关
- chore: 构建/工具链相关

## 许可证

MIT License

## 贡献

欢迎提交 Issue 和 Pull Request！