# OpsAdmin-vue

**Repository Path**: feng--hang/ops-admin-vue

## Basic Information

- **Project Name**: OpsAdmin-vue
- **Description**: 一个基于 Vue3 + Vite + Element Plus + Pinia + Less + Axios 的简易运维管理后台模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, vite, elementPlus

## README

# OpsAdmin Vue3 运维后台

一个基于 `Vue3 + Vite + Element Plus + Pinia + Less + Axios` 的简易运维管理后台模板，适合作为练手项目或实际项目脚手架。

> 主要面向：**Vue3 初学者 / 需要一套 Element Plus 后台模板的同学**。

## 功能概览

- 登录页（演示账号密码：`admin` / `admin`）
- 左侧菜单 + 顶栏布局 + 暗黑模式切换（Pinia 持久化）
- 首页仪表盘（统计卡片 / 快捷入口 / 告警 & 动态）
- 本地 Mock 数据（`src/mock/api.js`），方便前端自测
- 服务器 / 任务 / 用户 等典型 CRUD 示例
- 监控大屏示例页面
- Axios 请求封装（含拦截器与 token 刷新），方便对接真实后端

## 在线地址

项目预览地址：[OpsAdmin Vue3 运维后台](https://ee42cbed.pinme.dev)


## 项目预览

![首页仪表盘](./public/home.png)

![服务器管理](./public/servers.png)

![用户管理](./public/users.png)

![监控大屏](./public/monitor.png)


## 技术栈

| 类别 | 说明 |
|------|------|
| 框架 | Vue 3（`<script setup>`） |
| 构建 | Vite |
| UI | Element Plus |
| 路由 | Vue Router |
| 状态 | Pinia |
| 样式 | Less（页面样式在 `src/styles/views`） |
| HTTP | Axios（`@/utils/request`） |

## 快速开始

```bash
npm install
npm run dev
```

开发服务器默认端口：`http://localhost:3000`

## 构建与预览

```bash
npm run build
npm run preview
```

## 环境变量

复制 `.env.example` 为 `.env`（按需修改）：

| 变量 | 说明 |
|------|------|
| `VITE_API_BASE_URL` | 接口根路径，默认 `/api`，与 `src/utils/request.js` 中 `baseURL` 一致 |

Vite 仅暴露以 `VITE_` 开头的变量到前端代码。

## 路径别名

已配置 `@` → `src`，可在任意文件中：

```js
import request from '@/utils/request'
```

IDE 路径提示依赖根目录 `jsconfig.json`。

## 接口说明

### 当前：本地 Mock

业务数据来自 `src/mock/api.js`，通过 `Promise` + 内存数组模拟增删改查，页面里使用 `serverApi` / `taskApi` / `userApi` 等导出。  
**想快速跑前端，不需要后端就能看到完整流程。**

### 对接真实后端

1. 在项目根目录配置 `.env` 中的 `VITE_API_BASE_URL`（例如 `/api`）。
2. 开发环境可在 `vite.config.js` 的 `server.proxy` 里把 `/api` 代理到真实服务地址（示例里为 `http://localhost:8080`，请按实际修改 `target`）。
3. 将 `src/mock/api.js` 替换为「真接口版本」：统一用 `@/utils/request` 发请求，并保持与页面相同的导出（`serverApi`、`taskApi`、`userApi`），这样页面组件无需改动。

`src/utils/request.js` 已对响应做统一处理：默认认为后端返回体在 `response.data` 中，拦截器会直接返回 `data` 给业务层；若你方接口结构不同，请在该文件中调整。

### 真接口版本示例（替换 `src/mock/api.js` 内容）

下面约定 REST 风格：列表 `GET /{资源名}`，新增 `POST /{资源名}`，更新 `PUT /{资源名}/{id}`，删除 `DELETE /{资源名}/{id}`。资源名与当前 Mock 一致：`servers`、`tasks`、`users`。

```js
// 真接口版本
import request from '@/utils/request'

function list(key) {
  return request({
    url: `/${key}`, // 例如 /tasks
    method: 'get',
  })
}

function create(key, data) {
  return request({
    url: `/${key}`,
    method: 'post',
    data,
  })
}

function update(key, id, data) {
  return request({
    url: `/${key}/${id}`,
    method: 'put',
    data,
  })
}

function remove(key, id) {
  return request({
    url: `/${key}/${id}`,
    method: 'delete',
  })
}

export const serverApi = {
  list: () => list('servers'),
  create: (payload) => create('servers', payload),
  update: (id, payload) => update('servers', id, payload),
  remove: (id) => remove('servers', id),
}

export const taskApi = {
  list: () => list('tasks'),
  create: (payload) => create('tasks', payload),
  update: (id, payload) => update('tasks', id, payload),
  remove: (id) => remove('tasks', id),
}

export const userApi = {
  list: () => list('users'),
  create: (payload) => create('users', payload),
  update: (id, payload) => update('users', id, payload),
  remove: (id) => remove('users', id),
}
```

若后端路径前缀不是「根路径 + 资源名」，只需改 `url` 拼接规则，或在 `request` 拦截器里统一加前缀。

### 登录接口

当前登录在 `src/utils/auth.js` 中写死 `admin/admin`，仅用于演示。  
接入真实登录建议步骤：

1. 在 `src/utils/auth.js` 中，调用真实登录接口，例如：
   - `POST /auth/login`，拿到 `accessToken` 和 `refreshToken`
2. 使用 `setTokens(accessToken, refreshToken)` 写入本地（定义在 `src/utils/token.js`）
3. `src/utils/request.js` 的请求拦截器会自动带上 `Authorization`，并在 `401` 时尝试调用 `/auth/refresh` 无感刷新 token
4. 刷新失败会清空本地 token 并跳转到 `/login`

## 目录结构（节选）

```
src/
  App.vue
  main.js
  router/           # 路由与守卫
  stores/           # Pinia（如主题）
  views/            # 页面
  mock/api.js       # Mock 数据层（可替换为真接口）
  utils/
    auth.js         # 登录态
    request.js      # HTTP 封装
  styles/views/     # 页面级 Less
```

## 样式组织

- `src/style.less`：全局样式
- `src/styles/views/*.less`：各页面独立样式，在对应 `.vue` 中通过 `<style scoped lang="less" src="...">` 引入

## 相关文档

- [Vue 3](https://cn.vuejs.org/)
- [Vite](https://cn.vitejs.dev/)
- [Element Plus](https://element-plus.org/zh-CN/)
- [Pinia](https://pinia.vuejs.org/zh/)