背景
在项目开发时，会存在前端界面已经画好了但是后端接口还在开发的情况，此时前端可以先根据接口文档明确自己需要的字段，然后使用mock模拟后端接口进行调试
安装
npm install mockjs使用
1. 创建vue项目之后，新建一个mock文件夹，定义一个index.js文件
2. 引入mock依赖，使用setup方法设置请求响应的时间
// index.js
// 导入mockjs 返回一个对象
const Mock = require('mockjs')
// 使用setup配置请求的响应时间，单位是毫秒
Mock.setup({
// timeout: 1000 // 意味着接口1s后返回
timeout: '200-1000' // 意味这接口响应时间介于200毫秒-1s之间
})3. Mock对象中有个mock方法生成响应的数据
// index.js
// 根据Mock.mock方法生成响应的数据
// Mock.mock( rurl请求的url, rtype请求的类型, template数据模板| function( options ) 生成响应数据的函数)
/*
一般数据模板传递的对象：
{
"key|生成规则": 响应的数据
}
生成的规则
m-n 生成m到n个
+n 每生成一次 数值都+1
*/
// 普通的示例
// 请求list接口，返回1-10条之间的数据，返回的结构是{ code: 0, data: [{},{}...]}
Mock.mock('/list', 'get', {
code: 0,
...{ 'data|1-10': [{}] }
})4. 在main.js中 引入mock文件夹下的index文件
// main.js
...
import '@/mock/index'5. 在需要使用接口的地方，用axios请求对应的接口地址即可获取数据
// Home.vue
async mounted () {
const res = await axios.get('/list')
console.log(res, 'resres')
}
打印出来的结果
常用的数据占位符
下面例举一些项目上常用的数据占位符，能快速随机生成数据结构
使用@string可以生成随机的字符串
@string(length) 可以输入数字指定长度
@string("lower|upper|number|symbol",length) 第一个参数可以指定是字母小写|大写|数字|符号，第二个参数可以输入数字指定长度
@string(min, max) 可以指定字符串的区间
eg：{ 'data|1-10': [{ 'id|+1': 1, name: '@string' }] }
使用@boolean可以生成随机的布尔值 true|false
eg：{ 'data|1-10': [{ 'id|+1': 1, sex: '@boolean' }] }
使用@integer随机生成一串数字
Random.integer( min, max )
eg：{ 'data|1-10': [{ 'id|+1': 1, count: '@integer(1, 20)' }] }
使用@date随机生成日期
@date("yyyy-MM-dd") "2022-11-28"
@date("yy-MM-dd") 22-11-28
eg：{ 'data|1-10': [{ 'id|+1': 1, date: '@date(yyyy-MM-dd)' }] }
使用@time随机生成时分秒
@time("HH:mm:ss") "00:15:29" 常用的是这个格式
eg：{ 'data|1-10': [{ 'id|+1': 1, time: '@time(HH:mm:ss)' }] }
使用@datetime 随机生成具体的日期至时分秒
@datetime("yyyy-MM-dd HH:mm:ss") "2018-11-29 09:25:16" 常用的是这个格式
eg：{ 'data|1-10': [{ 'id|+1': 1, time: '@datetime(yyyy-MM-dd HH:mm:ss)' }] }
使用@image 随机生成具体大小的图片
@image( size?, background?, foreground?, format?, text? )
可以指定图片的尺寸，底色，文案的颜色，图片的格式，图片上的文案展示
eg：{ 'data|1-10': [{ 'id|+1': 1, image: '@image' }] }
eg：{ 'data|1-10': [{ 'id|+1': 1, image: '@image(200x100, #50B347, #fff, hello)' }] }
使用@cparagraph 随机生成段落文案--中文
@cparagraph( min?, max? ) 可以指定生成多少句文案
eg：{ 'data|1-10': [{ 'id|+1': 1, cparagraph: '@cparagraph(2)' }] }
使用@ctitle 随机生成标题--中文
@ctitle( length ) 可以指定标题的长度
@ctitle( min, max ) 可以指定标题的长度的区间
eg：{ 'data|1-10': [{ 'id|+1': 1, title: '@ctitle(10)' }] }
使用@cname 随机生成姓名-中文
eg：{ 'data|1-10': [{ 'id|+1': 1, name: '@cname' }] }
使用@email 随机生成邮箱地址
eg：{ 'data|1-10': [{ 'id|+1': 1, email: '@email' }] }
使用@province 随机生成省份
eg：{ 'data|1-10': [{ 'id|+1': 1, province: '@province' }] }
使用@province 随机生成省份
使用@city 随机生成城市 @city(true) 则会把省份也显示出来
使用@county 随机生成地级 @county(true) 则会把省、市前缀显示出来
eg：{ 'data|1-10': [{ 'id|+1': 1, province: '@province' }] }
eg：{ 'data|1-10': [{ 'id|+1': 1, city: '@city' }] }
eg：{ 'data|1-10': [{ 'id|+1': 1, county: '@county' }] }
使用@pick 随机生成指定的范围数据
eg：{ 'data|1-10': [{ 'id|+1': 1, role: '@pick(["董事长", "总监", "经理", "组长"])' }] }通过extend可以拓展mockjs的属性
随机生成手机号码
Mock.Random.extend({
phone () {
// 自己随便写前缀
const phonePrefixs = ['135', '189', '136']
// 使用pick 随机返回前缀
return this.pick(phonePrefixs) + Mock.mock(/\d{8}/)
}
})
console.log(Mock.Random.phone())mockjs的综合使用-----增删改查
模拟获取列表数据 get
// mock/index.js
// 常用的表格数据结构
const list = Mock.mock({
'data|10': [{ // 生成10条数据
'id|+1': 1, // id会自增
name: '@cname', // 随机生成姓名 --中文名
sex: '@integer(0, 1)', // 性别一般是用数字表示 0男生 1女生
phone: Mock.Random.phone(), // 拓展mockjs 生成随机的手机号码
email: '@email', // 随机生成邮箱地址
account: '@name', // 随机生成账号名 -- 英文
status: '@boolean', // 随机生成布尔值 表示账户状态
profile: '@image( 50x50, #FF6600, #fff, png, 头像 )', // 随机生成头像
createTime: '@datetime(yyyy-MM-dd HH:mm:ss)', // 随机生成创建时间
role: '@pick(["董事长", "总监", "经理", "组长"])' // 随机生成角色
}]
})
Mock.mock('/list', 'get', {
code: 0,
...list,
total: 10
})在需要获取列表的页面请求接口
async mounted () {
const res = await axios.get('/list')
console.log(res, '===>getList')
}打印查询列表的数据结果
模拟根据id查询对应数据 get
// mock/index.js
// 使用响应数据的函数，含有 url、type 和 body 三个属性
// 根据url 获取参数
Mock.mock(/listById/, 'get', ({ url }) => {
// 获取？后面的参数
const query = url.split('?')[1]
// 解析参数
const queryStr = new URLSearchParams(query)
const id = queryStr.get('id')
return {
code: 0,
data: list.data.find(item => item.id === Number(id))
}
})在需要获取列表的页面请求接口
methods: {
async getDetailById () {
const res = await axios.get('listById', { params: { id: 1 } })
console.log(res, '===>getDetailById')
}
}打印查询的结果
模拟增加数据 post
// mock/index.js
// 如果是put ｜ post 的请求 参数是放在了body里面
Mock.mock(/addItem/, 'post', ({ body }) => {
// 获取请求体的数据
const { data } = JSON.parse(body)
// 对一些必填的字段做校验
const dataTips = {
name: '名字不能为空',
sex: '性别不能为空',
phone: '手机号码不能为空',
account: '账号不能为空'
}
for (const key of Object.keys(dataTips)) {
if (!data[key]) {
return { code: 500, message: dataTips[key] }
}
}
return { code: 0, data: '操作成功' }
})在需要增加数据的的页面请求接口
methods: {
async addItem () {
const params = {
name: 'lily',
sex: '女'
}
const res = await axios.post('/addItem', { data: params })
console.log(res, '===>addItem')
}
}打印的结果
methods: {
async addItem () {
const params = {
name: 'lily',
sex: '女',
phone: '15915888888',
account: 'aaa.com'
}
const res = await axios.post('/addItem', { data: params })
console.log(res, '===>addItem')
}
}
模拟根据id删除对应数据 delete
// mock/index.js
Mock.mock(/removeById/, 'delete', ({ url }) => {
// 获取？后面的参数
const query = url.split('?')[1]
// 解析参数
const queryStr = new URLSearchParams(query)
const id = queryStr.get('id')
const index = list.data.findIndex(item => item.id === id)
list.data.splice(index, 1)
return {
code: 0,
data: '操作成功'
}
})在需要删除数据的页面请求接口
methods: {
async removeItemlById () {
const res = await axios.delete('/removeById', { params: { id: 1 } })
console.log(res, '===>removeItemlById')
}
}打印删除的结果
模拟根据id修改对应数据 put
// mock/index.js
// 如果是put ｜ post 的请求 参数是放在了body里面
Mock.mock(/updateById/, 'put', ({ body }) => {
// 格式化body的参数
const { data } = JSON.parse(body)
// 找到对应的数据
const target = list.data.find(item => item.id === data.id)
if (!target) {
return { code: 500, message: '查询有误' }
}
for (const key in data) {
target[key] = data[key]
}
return { code: 0, data: target }
})在需要修改数据的页面请求接口
methods: {
async updatetemlById () {
const res = await axios.put('/updateById', { data: { id: 1, name: '我是修改的名字', role: '我是修改的role', account: '我是修改的账号' } })
console.log(res, '===>updatetemlById')
}
}打印修改后的结果文章来源：https://www.toymoban.com/news/detail-400868.html
文章来源地址https://www.toymoban.com/news/detail-400868.html
~~~end~~~
到了这里，关于前端在项目中使用mockjs模拟数据的增删改查的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
