# mock

**Repository Path**: waaww/mo-c

## Basic Information

- **Project Name**: mock
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-09
- **Last Updated**: 2026-06-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 Axios Mock - 用户管理系统

## 项目介绍
这是一个基于Vue3 + Vite + JavaScript + Element Plus + Axios的前端应用框架实验项目，实现了网络请求与Mock数据的用户管理CRUD功能。

## 技术栈
- Vue3
- Vite
- JavaScript
- Element Plus
- Axios

## 项目结构
```
vue3-axios-mock/
├── src/
│   ├── utils/
│   │   └── request.js       # axios全局封装（请求/响应拦截、loading、异常处理）
│   ├── api/
│   │   └── user.js           # 用户接口（GET列表、GET详情、POST新增、PUT编辑、DELETE删除）
│   ├── models/
│   │   └── userModel.js      # 数据模型+默认表单
│   ├── views/
│   │   └── UserManage.vue    # 用户管理页面（表格、新增/编辑弹窗、删除确认）
│   ├── App.vue               # 根组件
│   └── main.js               # 入口文件，全局注册Element Plus
├── mock-server.js            # Mock服务器
├── package.json              # 项目依赖配置
├── vite.config.js            # Vite配置
└── index.html                # HTML模板
```

## 功能特性
- ✅ Axios全局封装（请求/响应拦截、loading、异常处理）
- ✅ 用户列表展示
- ✅ 新增用户（表单校验）
- ✅ 编辑用户（表单校验）
- ✅ 删除用户（二次确认）
- ✅ 加载状态提示
- ✅ 成功/失败消息提示
- ✅ Mock数据接口

## 安装依赖
```bash
npm install
```

## 启动项目

### 1. 启动Mock服务器（端口3001）
```bash
npm run mock
```

### 2. 启动前端开发服务器（端口3000）
```bash
npm run dev
```

## 接口说明

### 用户管理接口
- `GET /api/user/list` - 获取用户列表
- `GET /api/user/detail/:id` - 获取用户详情
- `POST /api/user/add` - 新增用户
- `PUT /api/user/update/:id` - 编辑用户
- `DELETE /api/user/delete/:id` - 删除用户

## Apifox Mock对接
要对接Apifox Mock接口，请修改 `src/utils/request.js` 中的 `baseURL`：

```javascript
const service = axios.create({
  baseURL: 'https://mock.apifox.cn/m1/xxx-xxx-xxx', // 替换为你的Apifox Mock地址
  timeout: 5000
})
```

## 代码规范
- ✅ 变量语义化命名
- ✅ 详细的代码注释
- ✅ 使用async/await处理异步
- ✅ 使用try/catch捕获异常
- ✅ 表单校验规则完善

## 测试数据
Mock服务器默认提供3个测试用户：
- 张三 (13800138001, 25岁)
- 李四 (13800138002, 30岁)
- 王五 (13800138003, 28岁)

## 注意事项
1. 确保先启动Mock服务器再启动前端项目
2. Mock服务器运行在3001端口，前端开发服务器运行在3000端口
3. 如需对接Apifox Mock，请修改baseURL配置