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 ...
随机推荐
- vscode 利用正则 搜索标签 tags (?=.*关键字1)(?=.*关键字2).*
vscode 利用正则 搜索标签 (?=.关键字1)(?=.关键字2).* 这里关键词是可以多个并且不按照顺序搜索的,就是写起来需要 (?=.关键字) 最后. 结尾 我是不是需要制作一个转换的小工具呢 ...
- HTML <nav> 标签
定义和用法 标签定义导航链接的部分. 提示和注释 提示:如果文档中有"前后"按钮,则应该把它放到 元素中. 实例 <!DOCTYPE html> <html> ...
- iot梳理
近段时间一直在搞公司的iot项目,没啥时间学习新的知识(也是自己懒),这边记录下整体对iot知识领域的认识. 首先说到iot会想到物联网,对于我们开发来说物联网很明显要用到几个不太常用到的技术,如mq ...
- vim的使用进步
vim的使用进步 1.如果遇到命令行中无法退出的 狂按esc按键 或者也可以使用v模式下切换一下,之后按esc 保存退出 保存退出--:wq 保存:w 不保存退出:q! i--插入模式 v- 可视化模 ...
- 「AntV」Vue3与TS框架下使用L7
1. 引言 Vue是常用的前端框架,TypeScript(简称TS) 是 JavaScript 的超集,可以提高代码的可维护性和可读性 本文基于Vite.Vue3和TypeScript搭建L7开发环境 ...
- Spring Boot框架中使用Jackson的处理总结
1.前言 通常我们在使用Spring Boot框架时,如果没有特别指定接口的序列化类型,则会使用Spring Boot框架默认集成的Jackson框架进行处理,通过Jackson框架将服务端响应的数据 ...
- multisim中常见的显示器
multisim中常见的显示器 1.实验原理 multisim中做实验仿真一般需要各种各样的仿真器来模拟实验结果.这里列举几种比较常见的显示器以便后面快速选择. 2.实验操作 (1)LED[二极管] ...
- 为什么SOTA网络在你的数据集上不行?来看看Imagnet结果的迁移能力研究
论文通过实验证明,ImageNet上的模型并不总能泛化到其他数据集中,甚至可能是相反的,而模型的深度和宽度也会影响迁移的效果. 如果需要参考,可选择类别数与当前任务相似的数据集上的模型性能.论文通 ...
- KingbaseES数据库运维案例之---permission denied to create "sys_catalog.xxx"
KingbaseES数据库运维案例之---permission denied to create "sys_catalog.bdsj_bdgl_test" 案例说明: 在Kin ...
- Games101-作业5
说明 本次作业主要实现Whitted-光线追踪,作业框架只需要我们编写两个部分,一个是求解观测光线--从摄像机到每个像素的向量:第二个是判断射线与三角形的交点. 求解观测光线 需要对每个像素求解在实际 ...