前端开发中使用mock模拟数据

使用mock进行模拟数据开发

第一步：npm i mockjs -D 这里必须加-D，因为我们只是开发环境使用
第二步：在 main.js 文件中引入mock：import ‘@/mock’
第三步：创建mock文件夹，里面模拟自己需要调接口返回的假数据

// 引入随机函数
import { Random } from 'mockjs'
// 引入Mock
const Mock = require('mockjs')const userListData = Mock.mock({'data|10': [{id: () => Random.id(),nickName: () => Random.cword('零一二三四五六七八九十', 3),phone: () => Random.integer(11111111111, 99999999999),tgCount: () => Random.integer(0, 200),earnings: () => Random.float(2000, 10000, 0, 2),},],
})function userList(res) {return {code: 200,data: userListData.data,message: '获取成功',total: 20,size: 10,user_count: 20,shop_count: 20,}
}const shopListData = Mock.mock({'data|10': [{shop_id: () => Random.id(),shop_name: () => Random.cword('零一二三四五六七八九十', 3),address: () => Random.city(true),shop_tel: () => Random.integer(11111111111, 99999999999),open_date: () => Random.date(),earnings: () => Random.float(2000, 10000, 0, 2),},],
})
function shopList(res) {return {code: 200,data: shopListData.data,message: '获取推广店铺成功',total: 20,size: 10,earnings_count: 20000,shopCount: 20,}
}
export default {userList,shopList,
}

这里切记要暴露出去才能，具体数据怎么模拟可以参考mock官方文档。
第四步：在api文件夹中定义自己要访问的方法，接口，请求方式，请求参数：

import http from '../../plugins/http'export const getUserList = (params) => {return http.get('/api/cuz/userList')
}export const getShopListById = (id) => {return http.get(`/api/cuz/shopList/${id}`)
}

第五步：在mock文件夹下创建index.js，用来拦截匹配自己在api中定义的请求，并对此返回模拟出的假数据：

// 引入mockjs
import Mock from 'mockjs'
// 引入模板函数类
import ratings from './modules/ratings'
import cuz from './modules/cuz'// Mock函数
const { mock } = Mock// 设置延时
Mock.setup({timeout: 400,
})// 使用拦截规则拦截命中的请求，mock(url, post/get, 返回的数据);
mock(/\/api\/ratings\/list/, 'post', ratings.list)mock(/\/api\/cuz\/userList/, 'get', cuz.userList)
mock(/\/api\/cuz\/shopList/, 'get', cuz.shopList)

第六步：将api文件中定义的各个方法导入相应组件中进行模拟发送请求，并获取返回数据

前端开发中使用mock模拟数据相关推荐

VUE开发环境下mock模拟数据与后端接口对接示例
在以往的前端开发中,前端严重依赖后端,必须等待后端接口开发出来才能继续开发.使用mock,可以使得前后端开发异步进行,互不影响.Mock.js 是一个模拟数据生成器,使用它可以拦截ajax请求,直接模 ...
在vue中使用Mock模拟数据
Q:为什么进行模拟数据? A:在做开发时,后端程序没有配齐,前端人员在做vue开发时,需要自己先模拟接口,模拟数据,等到后端数据配齐,提供好接口后,将项目中的接口换一下即可一.本地加载请求静态jso ...
在微信小程序项目中使用mock模拟数据
之前对mockjs做了一个介绍,以及在js.vue中拦截ajax的方法,介绍是必看的,也是一些基础 mockjs介绍总结 mockjs拦截ajax 在vue项目中使用mock拦截axios请求这一篇 ...
vite+vue3中使用mock模拟数据
1.安装mockjs和vite-plugin-mock npm i mockjs vite-plugin-mock --save-dev 2.在vite.config.ts文件中配置vite-plug ...
d2admin中使用mock模拟数据
第一次在d2admin中使用mock数据,花费了好长时间才知道怎么用,所以想要记录一下,但是其实很简单,只有简单的几步比如要生成一个虚拟的流程列表数据 step1: 在src–>mock–&g ...
vue项目中使用mock模拟数据
一.先在vue项目中安装依赖 # 使用axios发送ajax cnpm install axios --save # 使用mockjs产生随机数据 cnpm install mockjs --save ...
vue中使用mock模拟数据
1.安装mock npm install mockjs --save-dev 2.在src下创建mock目录添加mock.js文件 mock.js const Mock = require('mock ...
Vue脚手架中使用Mock模拟数据、aixos实现ecahrts
一 axios二次封装安装axios: npm i axios 在vue脚手架的main.js全局引入(axios不是插件,不能使用Vue.use方法引入) import http from &qu ...
mock模拟的数据能增删改查吗_如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...

前端开发中使用mock模拟数据

使用mock进行模拟数据开发

前端开发中使用mock模拟数据相关推荐

最新文章

热门文章