Vue笔记:使用 mock.js 模拟数据
在我们的项目实际开发过程中,后端的接口往往是较晚才会提供出来,并且还要写接口文档,如果前端的开发都要等到接口开发完成才开始就非常影响项目整体开发进度了,mock.js 的出现使前后端分离并行开发成为可能。使用 mock.js,前端调试可以模拟后台接口调用,返回我们定义的数据,解放了前后端开发的屏障。使用 mock.js 的过程如下:
1. 安装 mock.js 到项目。
npm intsall mockjs --save-dev
2. 在src目录下建立文件夹mock,mock文件夹下建立mock.js文件,代码如下:
import Mock from 'mockjs'; // es6语法引入mock模块 export default Mock.mock('http://localhost/user', { // 输出数据 'name': '@name', // 随机生成姓名 'age|1-10': // 其他数据
});
3. 在 vue 组件中引入。
import mock from './mock/mock.js';
4. 请求接口, 如使用axios发送请求。
computed:{
created(){
Vue.prototype.$http.get('http://localhost/user')
.then(res => {
console.log(res.data);
this.msg=res.data.name;
console.log(this.msg)
})
}
}
这样在发送请求的时候,mock 就会拦截对应的请求,并返回我们定义的数据了。
作者:朝雨忆轻尘
出处:https://www.cnblogs.com/xifengxiaoma/
版权所有,欢迎转载,转载请注明原文作者及出处。
Vue笔记:使用 mock.js 模拟数据的更多相关文章
- dva框架使用mock.js模拟数据 + fetch请求数据
what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...
- mock.js 模拟数据
1. 劫持请求,返回模拟数据: 用于前后台对接前数据模拟 相比于静态json文件而言:代码完成后不必修改源文件对应的接口调用.可模拟增删改查 2.实例代码 <!doctype html> ...
- axios + mock.js模拟数据实现前后端分离开发的实例代码
首先就是必须安装axios和mock.js npm install axios npm install mockjs 1. 然后在文档src中新建一个mock.js文件,如图 2. 在main.js中 ...
- Vue+Mock.js模拟登录和表格的增删改查
有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...
- vue中使用axios(异步请求)和mock.js 模拟虚假数据
一.使用axios 1.安装 npm install --save axios 2.引用 import Axios from 'axios' Vue.prototype.Axios = Axios 二 ...
- vue 使用mock来模拟数据
首先,需要安装mock npm install mockjs --save-dev 在main.js中引入mock mock文件写法如下: const Mock = require('mockjs') ...
- mock.js模拟ajax数据请求
在我们开发过程中存在着前端页面ui完成了,但是没有接口进行联调数据的情况,现在介绍一下用mock.js来完成数据的请求.这样在后期我们的后台接口完成后只需要更改请求的接口名字即可!前提是你的模拟字段名 ...
- mock.js模拟生成假数据
mock使用方法很简单, 下面是简单的用法, 详细的用法可以看官方文档, 写的很清楚, 下面的代码直接拷贝到本地html文件, 双击打开即可生成你想要的数据 <!DOCTYPE html> ...
- vue项目配置Mock.js
扯在前面 最近一直在忙跳槽的事情,博客也好久没有更新了,上次更新还是去年,不出意外的话,从今天起继续今年的博客之旅. 今天继续完善我之前的项目架构,从零开始搭建vue移动端项目到上线,有需要的同学可以 ...
随机推荐
- Shell编程-08-Shell中的循环语句
目录 while语句 until语句 for语句 select语句 循环中断控制 循环语句总结 循环语句常用于重复执行一条命令或一组命令等,直到达到结束条件后,则终止执行.在Shell中常见的 ...
- (数论)LightOJ -- 1245
http://acm.hust.edu.cn/vjudge/contest/view.action?cid=98634#problem/B(acm14) Description I was tryin ...
- .net MongoDB使用
.net平台的MongoDB使用 CRL快速开发框架系列教程十二(MongoDB支持) MongoDB数据库 mongo-csharp-driver
- Android listview 侧滑 SwipeListView 详解 实现微信,QQ等滑动删除效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/28508769 今天看别人项目,看到别人使用了SwipeListView,Goog ...
- whu暑期集训#1
题号:SGU123----SGU131 Problem A: 题意:求斐波那契的前N项和.. 做法:直接模拟,注意得用long long Problem B: 题意:给定一个封闭的多边形,求一个点在不 ...
- 论EFMS模拟量部分采集电路的修改
论1:电阻R11的作用 如图1是2014-3-11之前模拟量采集的部分硬件电路,图2是纠正后的正确电路. D5是SA20CA,TVS双向二极管,有效防止外接电源的浪涌冲击情况,保护电路. D6是稳压 ...
- cpu信息查看
# 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理CPU个数 cat /proc/cpuinfo| ...
- .net MVC, webAPI,webForm集成steeltoe+springcloud实现调用服务中心服务的总结
开始之前,如果没接触过Autofac的,可以移步到Autofac官方示例学习一下怎么使用:https://github.com/autofac/Examples .net 下集成steeltoe进行微 ...
- MySQL--当mysqldump --single-transaction遇到alter table(1)
部分生产环境采用mysqldump --single-transaction的方式在夜间进行数据库备份,而同事恰好在备份期间执行了alter table操作,操作部分成功部分失败,为啥呢? ##=== ...
- C++动态(显式)调用 C++ dll
1.创建DLL新项目Dll1,Dll1.cpp: extern "C" __declspec(dllexport) const char* myfunc() { return &q ...