vue中使用mock模拟数据

1、安装mock

npm install mockjs --save-dev

2、在src下创建mock目录添加mock.js文件

mock.js

const Mock = require('mockjs')const getUserList = () => {let users = [{id:"1001",username:"zhangsan",password:"123456"},{id:"1002",username:"lisi",password:"123456"},{id:"1003",username:"wangwu",password:"123456"}]return users
}
/*** 当请求到路由的时候mock会拦截并返回**/
Mock.mock('http://localhost:8080/getUserList', 'get', getUserList())

3、在main.js中引入mock

const mock=true;
if(mock){require('./mock/mock')
}

4、测试

<script>
export default {name: "home",data() {return {tableData:[]}},created() {this.getList()},methods:{getList(){let that = thisthis.axios.get('http://localhost:8080/getUserList').then(function (res){that.tableData = res.data})}}
}
</script>

vue中使用mock模拟数据相关推荐

在vue中使用Mock模拟数据
Q:为什么进行模拟数据? A:在做开发时,后端程序没有配齐,前端人员在做vue开发时,需要自己先模拟接口,模拟数据,等到后端数据配齐,提供好接口后,将项目中的接口换一下即可一.本地加载请求静态jso ...
【Vue】使用mock模拟数据
目录一.mock.js 二.vue项目使用mock.js 三.mock.js文档一.mock.js 对于前后端分离的项目,前端不得不等待后端接口写好后再请求数据.或者自己需要手写一些'死'数据来模 ...
vue项目使用mock模拟数据并实现列表的增、删、分页、批量操作功能
文章目录什么是mock vue项目引入mock mock模拟数据生成列表并模拟实现已发起表单页面表格分页功能 mock实现数据的新增 mock实现数据列表的删除列表数据批量处理(如审核通过) 总结 ...
mock模拟的数据能增删改查吗_如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...
vue项目中使用mock模拟数据
一.先在vue项目中安装依赖 # 使用axios发送ajax cnpm install axios --save # 使用mockjs产生随机数据 cnpm install mockjs --save ...
vite+vue3中使用mock模拟数据
1.安装mockjs和vite-plugin-mock npm i mockjs vite-plugin-mock --save-dev 2.在vite.config.ts文件中配置vite-plug ...
在微信小程序项目中使用mock模拟数据
之前对mockjs做了一个介绍,以及在js.vue中拦截ajax的方法,介绍是必看的,也是一些基础 mockjs介绍总结 mockjs拦截ajax 在vue项目中使用mock拦截axios请求这一篇 ...
前端开发中使用mock模拟数据
使用mock进行模拟数据开发第一步:npm i mockjs -D 这里必须加-D,因为我们只是开发环境使用第二步:在 main.js 文件中引入mock:import '@/mock' 第三步: ...
d2admin中使用mock模拟数据
第一次在d2admin中使用mock数据,花费了好长时间才知道怎么用,所以想要记录一下,但是其实很简单,只有简单的几步比如要生成一个虚拟的流程列表数据 step1: 在src–>mock–&g ...

vue中使用mock模拟数据

vue中使用mock模拟数据相关推荐

最新文章

热门文章