在前后端对接中，有时后端的接口数据没有 那么快能给出，因此我们可以通过mock模拟自己的请求数据，在后端接口没有给出的同时，先使用mock请求的数据完成前端相关的逻辑。
安装依赖
通过命令行 npm install -D vite-plugin-mock mockjs 安装得vite-plugin-mock 之后发现再vite.config.ts里边报错viteMockServe({ localEnabled: command === 'serve', }) 类型“{ localEnabled: boolean; }”的参数不能赋给类型“ViteMockOptions”的参数。
npm install vite-plugin-mock mockjs -D
## npm uninstall vite-plugin-mock
## npm install mockjs vite-plugin-mock@2.9.6 -D
配置
mock数据十分简单的，无非就是提供数据的函数 + 对外暴露一个数组，数组中包含的对象便是接口。url是接口地址，method是请求方式，response是返回的数据。
// 新建mock测试文件 mock/example.ts
export default [
{
url: '/mock/getMapInfo',
method: 'get',
response: () => {
return {
code: 200,
title: 'mock请求测试'
}
}
}
]
// vue3 vite.config.js
import { UserConfigExport, ConfigEnv } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'
export default ({ command }: ConfigEnv): UserConfigExport => {
return {
plugins: [
vue(),
viteMockServe({
mockPath: 'mock', //设置mockPath为根目录下的mock目录,为根目录
localEnabled: command === 'serve', //设置是否监视mockPath对应的文件夹内文件中的更改
prodEnabled: true, //prod环境下是否可以使用mock
logger: true //是否在控制台显示请求日志
}),
],
}
}
使用axios获取本地mock数据
先下载axios依赖
npm install axios
axios测试
<template>
<button @click="listReq">listReq</button>
</template>
<script setup>
import axios from 'axios'
const listReq = () => {
axios.get('/mock/getMapInfo').then((res) => {
if (res.data) {
console.log(res.data)
alert(res.data.title)
}
})
}
</script>
用户登录->获取用户信息demo
<script setup lang="ts">
import axios from 'axios'
const userLogin = () => {
axios.post('/api/user/login',{
username: 'admin',
password: '111111'
}
).then((res) => {
if (res.data) {
alert(res.data.data.token)
}
})
}
const userInfo = () => {
axios.get('/api/user/info',{
params: {
userName: 'leo'
},
headers: {
'Content-Type': 'application/json',
'token': 'System Token'
}
}).then((res) => {
if (res.data) {
alert(res.data.data.checkUser.desc)
}
})
}
</script>
<template>
<button @click="userLogin">userLogin</button>
<button @click="userInfo">userInfo</button>
</template>
// user.ts
//用户信息数据
function createUserList() {
return [{
userId: 1,
avatar:
'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
username: 'admin',
password: '111111',
desc: '平台管理员',
roles: ['平台管理员'],
buttons: ['cuser.detail'],
routes: ['home'],
token: 'Admin Token',
},{
userId: 2,
avatar:
'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
username: 'system',
password: '111111',
desc: '系统管理员',
roles: ['系统管理员'],
buttons: ['cuser.detail', 'cuser.user'],
routes: ['home'],
token: 'System Token',
},]
}
export default [
// 用户登录接口
{
url: '/api/user/login',//请求地址
method: 'post',//请求方式
response: ({ body }) => {
//获取请求体携带过来的用户名与密码
const { username, password } = body;
//调用获取用户信息函数,用于判断是否有此用户
const checkUser = createUserList().find((item) => item.username === username && item.password === password,)
//没有用户返回失败信息
if (!checkUser) {
return { code: 201, data: { message: '账号或者密码不正确' } }
}
//如果有返回成功信息
const { token } = checkUser
return { code: 200, data: { token } }
},
},
// 获取用户信息
{
url: '/api/user/info',
method: 'get',
response: (request) => {
//获取请求头携带token
const token = request.headers.token;
//查看用户信息是否包含有次token用户
const checkUser = createUserList().find((item) => item.token === token)
//没有返回失败的信息
if (!checkUser) {
return { code: 201, data: { message: '获取用户信息失败' } }
}
//如果有返回成功信息
return { code: 200, data: {checkUser} }
},
},
]
封装axios
utils/http.ts
import axios from 'axios'
const service = axios.create({
baseURL: '/',
timeout: 100000
})
export default service
http.ts mock数据使用
import http from './utils/http'
const userLogin = () => {
http({ url: '/api/user/login', method: 'post',data:{
username: 'admin',
password: '111111'
} }).then((res) => {
if (res.data) {
console.log(res.data)
alert(res.data.data.token)
}
})
}
const userInfo = () => {
http({ url: '/api/user/info', method: 'get',
params: {
userName: 'leo'
},
headers: {
'Content-Type': 'application/json',
'token': 'System Token'
}
}).then((res) => {
if (res.data) {
console.log(res.data)
alert(res.data.data.checkUser.desc)
}
})
}
Mock的用法规则
import Mock from 'mockjs'
- 属性值是字符串 String
// (1)'name|min-max': string
// 随机生成1-10个a
// obj = { string:'aaa' }
let obj = Mock.mock({
'string|1-10': 'a'
})
// (2)'name|count': string
// 指定生成个a
// obj = { string:'aaaaa' }
let obj = Mock.mock({
'string|5': 'a'
})
- 属性值是数字 Number
// (1)'name|+1': number
// 属性自动加1,初始值为number
// (2)'name|min-max': number
// 随机生成大于1,小于10的整数，number仅用于确认类型
// obj = { id:8 }
let obj = Mock.mock({
'id|1-10': 1
})
// (3)'name|min-max.dmin-dmax': number
// 生成一个浮点数，整数部分大于等于1,小于等于100，小数部分保留1-8位，number仅用于确认类型
// obj = { num:44.555 }
let obj = Mock.mock({
'num|1-100.1-8': 1
})
- 属性值是布尔值 Boolean
// (1)'name|1': boolaen
// 随机生成布尔值，true/false，概率各占一半
// obj = { flag:true }
let obj = Mock.mock({
'flag|1': true
})
// (2)'name|min-max': boolaen
// 随机生成布尔值，值为为boolaen 的概率是min/(min+max),当前true的概率为1/3
// obj = { flag:true }
let obj = Mock.mock({
'flag|1-2': true
})
- 属性值是对象 Object
// (1)'name|min-max': object
// 从属性object 中随机选取1-3个属性
// obj = { curObj:{ a:1,b:2 } }
let obj = Mock.mock({
'curObj|1-3': {
a: 1,
b: 2,
c: 3
}
})
// (2)'name|count': object
// 从属性object 中随机选取3个属性
// obj = { curObj:{ a:1,b:2,c:3 } }
let obj = Mock.mock({
'curObj|3': {
a: 1,
b: 2,
c: 3
}
})
- 属性值是对象 Array
// (1)'name|min-max': array
// 随机生成属性值为array，长度1-3的数组
// obj = { arr:[{ id:1 }, { id:2 }}
let obj = Mock.mock({
'arr|1-3': [{
'id|+1': 1
}]
})
// (2)'name|count': array
// 生成属性值为array，长度3的数组
// obj = { arr:[{ id:1 }, { id:2 }, { id:3 }}
let obj = Mock.mock({
'arr|3': {
'id|+1': 1
}
})
- 属性值是正则表达式 RegExp
// (1)'name': regexp
// obj={regexp:1234567}
let obj = Mock.mock({
'regexp':/\d{5,10}/
})
- Mock.Random
let Random = Mock.Random
Random.email()
- 实例
let obj = Mock.mock({
'arr|1-20': [
{
'index|+1': 1,
'num|1-100.1-2': 1,
'status|1': ['进行中', '暂停中', '已完成'],
'string|1': 'ABCD' + Mock.Random.integer(0, 99),
}
]
})
