mock数据模拟和使用
安装mock,和案axios
npm i mockjs
npm i axios
后再vue组件中使用
<script>
import axios from 'axios'
import Mock from 'mockjs'
const Random = Mock.Random;
Mock.mock('http://123.com', {
// 'name|3': 'fei', //这个定义数据的模板形式下面会介绍
'shuju|10':[{
'ip':'@ip',
'dizhi':'@province',
"number|1-100.1-10": 1,
'age|20-30': 1,
'id|+1': 1,
"city|56":[{"city":'@city(true)'}],
"star|1-10": "★",
"goodName": "@cname()",
"goodsPrice|100-1000": 100,
"goodsurl":"@image('200x100', '#894FC4', '#FFF', 'png', '')",
"object|2": {
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
}
}]
})
export default {
data(){
return {
cunru:[]
}
},
created() {},
methods: {
dianji() {
axios.get("http://123.com").then(res => {
console.log(res.data.shuju);
this.cunru=res.data.shuju
})
}
}
}
</script>
或者
写入mockbase.js :
使用:
mock数据模拟和使用的更多相关文章
- 微信小程序开发——使用mock数据模拟api请求
前言: 微信小程序开发中,后端提供了接口设计文档,前端可以先mock数据模拟api请求进行开发调试,而且可以根据需要设计mock文件的格式和内容,这样在后端接口开发完成之前,前端可以最大限度的完成前端 ...
- Vue如何mock数据模拟Ajax请求
我们在做一个项目时前期可能没有后端提供接口模拟数据,那么作为前端就需要自己写json文件模拟数据加载.网上往往参考的都是不全面的,比如get请求没问题但是post请求就报错了.在Vue中只需要vue- ...
- Mock -- 数据模拟
作者:张云龙链接:https://www.zhihu.com/question/35436669/answer/62753889来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- dva框架使用mock.js模拟数据 + fetch请求数据
what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...
- mock 数据 解决方案
前端工程化之--Mock解决方案 https://www.jianshu.com/p/720b12b5d120 一.为什么要使用mock数据: 1.后端接口数据没有的时候,前端根据接口文档,使用 ...
- 从零开始打造 Mock 平台 - 核心篇
前言 最近一直在捣鼓毕设,准备做的是一个基于前后端开发的Mock平台,前期花了很多时间完成了功能模块的交互.现在进度推到如何设计核心功能,也就是Mock数据的解析. 根据之前的需求设定加上一些思考,用 ...
- Vuejs技术栈从CLI到打包上线实战全解析
前言 本文是自己vue项目实践中的一些总结,针对Vue2及相关技术栈,实践中版本为2.3.3. 开发前须知 vue-cli 在开发前,我们要至少通读一遍vue官方文档和API(看官方文档是最重要的,胜 ...
- Vue踩坑记录册
1.vue-cli+webpack项目 修改项目名称 解决办法: 1 删除 node_modules 文件夹(如果修改项目名称,需要在在package.json中修改对应的name) 2 重新安装依赖 ...
- vue-elem-配置静态模拟数据访问接口
使用本地mock数据模拟真实数据配置 static/data.json dev.server.js中 var app=express();之后添加以下代码, var appData=require(' ...
- 五、Vue:使用axios库进行get和post、用拦截器对请求和响应进行预处理、Mock(数据模拟)
一.axios [应用]进行请求和传表单 [axios中文档]:https://www.kancloud.cn/yunye/axios/234845 [vue-axios]:https://cn.vu ...
随机推荐
- 一个简单的spdlog使用示例
目录 引用源码 封装Log头文件 使用方法 spdlog是一个开源.跨平台.无依赖.只有头文件的C++11日志库,网上介绍的文章有很多这里就不过多的介绍了,GitHub链接:https://githu ...
- 网络流媒体协议的联系与区别 (RTP RTCP RTSP RTMP HLS)(转)
网络流媒体协议的联系与区别(RTP RTCP RTSP RTMP HLS) RTP RTCP RTSP RTMP HLS 区别与联系 RTP传输流媒体数据.RTCP对RTP进行控制,同步.RTSP发起 ...
- 再见了 Pages
再见 Pages 之前一直用 GitHub Pages + Hexo 写博客,但是这段时间又出现了无法访问的问题,非常闹心,于是想把博客迁移到博客园,继续简简单单地写东西 挺感激 Pages ,这个博 ...
- java中 YYYY与yyyy 区别
大多数情况下格式日期都是用的SimpleDateFormat,比如说把一个日期格式成"yyyy-MM-dd"的形式. 对于年份来说,大写的Y和小写的y其意义是不同的. y 是Yea ...
- 京东一面挂在了CAS算法的三大问题上,痛定思痛不做同一个知识点的小丑
写在开头 在介绍synchronized关键字时,我们提到了锁升级时所用到的CAS算法,那么今天我们就来好好学一学这个CAS算法. CAS算法对build哥来说,可谓是刻骨铭心,记得是研二去找实习的时 ...
- Makefile 简单学习
一.Makefile 简介 Makefile 是一种常用于编译的脚本语言.它可以更好更方便的管理你的项目的代码编译,节约编译时间(没改动的文件不编译).注意 Makefile 文件命令必须是 Make ...
- JWT 安全令牌
1 package com.reliable.yang.utils; 2 3 import io.jsonwebtoken.Jwt; 4 import io.jsonwebtoken.JwtBuild ...
- 《MySQL技术内幕:InnoDB存储引擎》读书笔记
SQL语句优化策略 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 WHERE 及 ORDER BY 涉及的列上建立索引. 2.应尽量避免在 WHERE 子句中对字段进行 NULL 值判断,创建 ...
- C++设计模式 - 工厂方法(Factory Method)
对象创建模式 通过"对象创建"模式绕开new ,来避免对象创建( new )过程中所导致的紧耦合(依赖具体类) , 从而支持对象创建的稳定.它是接口抽象之后的第一步工作. 典型模式 ...
- #根号分治,动态规划#洛谷 5616 [MtOI2019]恶魔之树
题目传送门 分析 最小公倍数最终一定会被表示成若干个质数指数幂的情况(1的情况就直接乘上二的次幂) 然后每个数的加入相当于对每个质数的指数取最大值,但是如果将每个质数的次数都表示出来状态数很多, 考虑 ...