From 262adf2a525eaa506244413a65e335a7e241de4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E7=81=BF=E4=BC=9F?= <1445484116@qq.com> Date: Mon, 1 Jun 2026 18:59:38 +0800 Subject: [PATCH] feat:zy --- ...256\344\270\216Vue\347\232\204CRUD.md.txt" | 287 ++++++++++++++++++ 1 file changed, 287 insertions(+) create mode 100644 "\351\273\204\347\201\277\344\274\237/2026.05.25-Mock\346\225\260\346\215\256\344\270\216Vue\347\232\204CRUD.md.txt" diff --git "a/\351\273\204\347\201\277\344\274\237/2026.05.25-Mock\346\225\260\346\215\256\344\270\216Vue\347\232\204CRUD.md.txt" "b/\351\273\204\347\201\277\344\274\237/2026.05.25-Mock\346\225\260\346\215\256\344\270\216Vue\347\232\204CRUD.md.txt" new file mode 100644 index 0000000..67ffa81 --- /dev/null +++ "b/\351\273\204\347\201\277\344\274\237/2026.05.25-Mock\346\225\260\346\215\256\344\270\216Vue\347\232\204CRUD.md.txt" @@ -0,0 +1,287 @@ +# Vue3 + Mock 模拟数据 + CRUD 完整实战笔记 +**适用场景**：前端独立开发、接口未就绪时模拟增删改查、本地测试业务逻辑 +**技术栈**：Vue3 + Vite + Mock.js + Element Plus + +## 一、环境搭建 +### 1. 创建/进入 Vue3 项目 +```bash +# 已有项目直接跳过 +npm create vite@latest my-vue-crud -- --template vue +cd my-vue-crud +npm install +``` + +### 2. 安装依赖 +```bash +# Mock 模拟数据 +npm install mockjs -S + +# UI 组件（CRUD 表格、表单） +npm install element-plus -S +``` + +### 3. 全局注册 Element Plus +`main.js` +```js +import { createApp } from 'vue' +import App from './App.vue' +// 引入 Element Plus +import ElementPlus from 'element-plus' +import 'element-plus/dist/index.css' + +const app = createApp(App) +app.use(ElementPlus) +app.mount('#app') +``` + +## 二、Mock 数据配置（核心） +### 1. 创建 mock 文件夹 +``` +src/ +├─ mock/ +│ ├─ index.js # mock 入口 +│ └─ user.js # 用户模块 CRUD 数据 +``` + +### 2. user.js（模拟用户接口 + 数据） +```js +import Mock from 'mockjs' + +// 生成 10 条模拟用户数据 +const userList = Mock.mock({ + 'list|10': [ + { + id: '@id', // 随机ID + name: '@cname', // 随机中文姓名 + age: '@integer(18, 60)', // 18-60随机年龄 + phone: /^1[3-9]\d{9}$/, // 手机号正则 + email: '@email', // 邮箱 + createTime: '@datetime' // 创建时间 + } + ] +}) + +// ==================== 模拟接口 ==================== +// 1. 查询所有用户 +Mock.mock('/api/user/list', 'get', () => { + return { + code: 200, + data: userList.list, + message: '查询成功' + } +}) + +// 2. 新增用户 +Mock.mock('/api/user/add', 'post', (options) => { + const user = JSON.parse(options.body) + user.id = Mock.mock('@id') + user.createTime = Mock.mock('@datetime') + userList.list.unshift(user) + return { code: 200, message: '新增成功' } +}) + +// 3. 修改用户 +Mock.mock('/api/user/update', 'put', (options) => { + const user = JSON.parse(options.body) + const index = userList.list.findIndex(item => item.id === user.id) + if (index !== -1) userList.list[index] = user + return { code: 200, message: '修改成功' } +}) + +// 4. 删除用户 +Mock.mock(/\/api\/user\/delete/, 'delete', (options) => { + const id = options.url.split('/').pop() + userList.list = userList.list.filter(item => item.id !== id) + return { code: 200, message: '删除成功' } +}) +``` + +### 3. mock 入口文件 +`mock/index.js` +```js +import './user' +console.log('✅ Mock 已启动，拦截接口请求') +``` + +### 4. 项目入口引入 mock +`main.js` +```js +import './mock' // 只需要加这一行 +``` + +> 说明：启动项目后，所有 `/api/xxx` 请求会被 Mock 拦截，无需后端 + +## 三、CRUD 页面组件（完整代码） +直接新建 `src/views/UserList.vue`，复制即可运行 + +```vue + + + +``` + +## 四、App.vue 挂载页面 +```vue + + + +``` + +## 五、启动项目 +```bash +npm run dev +``` + +打开浏览器即可看到： +- 自动加载 Mock 模拟用户列表 +- 新增、编辑、删除、查询完整功能 +- 所有数据存在内存中，刷新重置 + +--- + +# 核心知识点总结 +## 1. Mock 作用 +- 拦截 Ajax/fetch 请求 +- 生成随机数据（ID、姓名、时间、手机号等） +- 前端独立开发，不依赖后端接口 + +## 2. CRUD 对应请求方式 +- 查询：`GET` +- 新增：`POST` +- 修改：`PUT` +- 删除：`DELETE` + +## 3. Vue3 组合式 API 关键点 +- `ref`：定义响应式数据 +- `onMounted`：页面加载获取数据 +- 表单双向绑定：`v-model` +- 异步请求：`async/await` + +## 4. 开发流程（通用模板） +1. 定义数据列表 +2. 页面加载请求列表 +3. 新增/编辑弹窗 + 表单 +4. 提交（新增/修改） +5. 删除确认 +6. 每次操作后刷新列表 + +--- + +### 总结 +这份笔记是 **Vue3 + Mock + CRUD 最精简可运行版**，2026 年通用前端模拟接口开发标准流程： +- 无需后端、无需数据库、开箱即用 +- 适合课程作业、毕设、企业项目前期开发 +- 接口替换真实地址即可直接上线（只需改请求 URL） \ No newline at end of file -- Gitee