Vite2+Vue3+TypeScript+Element-plus脚手架搭建系列
✅01-初始化 Vite 项目
✅02-配置 Vite2 环境变量
✅03-Vite2 配置及说明
✅04-Vue3 使用 SCSS
✅05-Vue3 路由配置
✅06-TypeScript 配置及说明
✅07-Vue3 使用 axios
✅08-Vue3 axios 对象封装
✅09-ESLint 配置及说明
✅10-ESLint 与 Prettier 集成配置及说明
✅11-Mock.js 模拟接口数据
✅12-Vite2 引入 Element-Plus 框架
✅13-渐变+透明样式实现清爽登录页
✅14-Element-Plus 实现后台管理系统布局
✅15-Pinia 实现 store 状态管理
✅16-Vue3 动态路由权限控制
文章目录
Mock.js 模拟接口数据
🎯 目标
引入 Mock.js ,模拟生成后端数据。
😴 功课
Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。提供了以下模拟功能:
- 根据数据模板生成模拟数据。
- 模拟 Ajax 请求,生成并返回模拟数据。
- 基于 HTML 模板生成模拟数据。
具体使用和配置 官方文档 很详细,并且也不难,我就不再重复一遍了。
🍸 准备
安装依赖
npm install -S mockjs @types/mockjs
调整文件&目录
在 src
目录下创建 mock
文件夹,用来存放 mock
文件。
mock 文件目录结构如下:
📁 src
----📁 mock
--------📁 sys
------------📄 user.ts
--------📄 index.ts
在 src
目录下创建 api
文件夹,用来存放 api
文件。
api 文件目录结构如下:
📁 src
----📁 api
--------📁 sys
------------📄 user.ts
添加 components/demos/Mock.vue
文件,用来测试 mock。
🌈 Coding
API 接口调用文件
在 /src/api/user.ts
编写后端 CRUD 接口调用方法:
import http from '@/utils/http/index'
export default {
// ↓分页查询
page: (params?: any) => {
return http.get('/sys/user', params)
},
// ↓新增
add: (data?: any) => {
return http.post('/sys/user', data)
},
// ↓修改
modify: (data?: any) => {
return http.put('/sys/user', data)
},
// ↓删除
del: (id: number | string, data?: any) => {
return http.delete('/sys/user/' + id, data)
},
}
Demo 组件
在 Mock.vue
中调用后台接口:
<template>
<!-- ↓Mock请求demo -->
<div>
<h2>Mock请求</h2>
<button @click="userPage">mock分页查询</button>
<button @click="addUser">mock新增</button>
<button @click="modifyUser">mock修改</button>
<button @click="delUser">mock删除</button>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import userApi from '@/api/sys/user'
export default defineComponent({
name: 'Mock',
setup() {
// ↓分页
const userPage = () => {
userApi.page({ current: 1, size: 10 }).then((response: any) => {
console.log(response)
})
}
// ↓新增
const addUser = () => {
userApi.add({ username: 'zhangsan', name: '张三', email: 'zhangsan@163.com' }).then((response: any) => {
console.log(response)
})
}
// ↓修改
const modifyUser = () => {
userApi.modify({ id: 2, username: 'lisi', name: '李四', email: 'lisi@163.com' }).then((response: any) => {
console.log(response)
})
}
// ↓删除
const delUser = () => {
userApi.del(2).then((response: any) => {
console.log(response)
})
}
return {
userPage,
addUser,
modifyUser,
delUser,
}
},
})
</script>
Demo 汇聚
将 Mock.vue
导入 Home.vue
:
<template>
<Env />
<Router />
<Axios />
<Mock />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import Env from '@/components/demos/Env.vue'
import Router from '@/components/demos/Router.vue'
import Axios from '@/components/demos/Axios.vue'
import Mock from '@/components/demos/Mock.vue'
export default defineComponent({
name: 'Home',
components: {
Env,
Router,
Axios,
Mock,
},
})
</script>
Mock 数据
在 /src/mock/user.ts
中 mock user api 的数据,后端请求和 mock 匹配时,请求会被 Mock 拦截,代码如下:
import Mock from 'mockjs'
// ↓mock数据
const data = Mock.mock({
'list|1-10': [
{
id: '@INCREMENT()',
username: '@STRING("lower", 6, 24)',
name: '@CNAME',
email: '@EMIAL',
},
],
})
export default [
// ↓分页
{
url: new RegExp('/sys/user'),
type: 'get',
result: () => {
return {
code: 200,
data: data.list,
message: '请求成功',
}
},
},
// ↓新增
{
url: new RegExp('/sys/user'),
type: 'post',
result: (config: any) => {
const obj = JSON.parse(config.body)
obj.id = data.list.length + 1
data.list.unshift(obj)
return {
code: 200,
data: data.list,
message: '新增成功',
}
},
},
// ↓修改
{
url: new RegExp('/sys/user'),
type: 'put',
result: (config: any) => {
const obj = JSON.parse(config.body)
for (let i = 0; i < data.list.length; i++) {
const item = data.list[i]
if (item.id === obj.id) {
data.list[i] = obj
}
}
return {
code: 200,
data: data.list,
message: '修改成功',
}
},
},
// ↓删除
{
url: new RegExp('/sys/user'),
type: 'delete',
result: (config: any) => {
const arr = config.url.split('/')
const id = parseInt(arr[arr.length - 1])
data.list = data.list.filter((item: any) => item.id !== id)
return {
code: 200,
data: data.list,
message: '删除成功',
}
},
},
]
Mock 聚合
在 /src/mocks/index.ts
聚合 mock ,作为统一入口:
import Mock from 'mockjs'
import userMock from './sys/user'
userMock.forEach((item) => {
Mock.mock(item.url, item.type, item.result)
})
引入 Mock
在 main.ts
中引入 所有mock:
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router/index'
import '@/mock/index'
createApp(App).use(router).mount('#app')
🎭 结果
- 页面效果
- 调用 CRUD 接口,请求被 Mock 拦截,控制台打印接口响应数据。
本文为博主原创文章,任何个人、团体、机构转载和摘录,请注明出处。