安装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数据模拟和使用的更多相关文章

  1. 微信小程序开发——使用mock数据模拟api请求

    前言: 微信小程序开发中,后端提供了接口设计文档,前端可以先mock数据模拟api请求进行开发调试,而且可以根据需要设计mock文件的格式和内容,这样在后端接口开发完成之前,前端可以最大限度的完成前端 ...

  2. Vue如何mock数据模拟Ajax请求

    我们在做一个项目时前期可能没有后端提供接口模拟数据,那么作为前端就需要自己写json文件模拟数据加载.网上往往参考的都是不全面的,比如get请求没问题但是post请求就报错了.在Vue中只需要vue- ...

  3. Mock -- 数据模拟

    作者:张云龙链接:https://www.zhihu.com/question/35436669/answer/62753889来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  4. dva框架使用mock.js模拟数据 + fetch请求数据

    what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...

  5. mock 数据 解决方案

    前端工程化之--Mock解决方案   https://www.jianshu.com/p/720b12b5d120 一.为什么要使用mock数据: 1.后端接口数据没有的时候,前端根据接口文档,使用 ...

  6. 从零开始打造 Mock 平台 - 核心篇

    前言 最近一直在捣鼓毕设,准备做的是一个基于前后端开发的Mock平台,前期花了很多时间完成了功能模块的交互.现在进度推到如何设计核心功能,也就是Mock数据的解析. 根据之前的需求设定加上一些思考,用 ...

  7. Vuejs技术栈从CLI到打包上线实战全解析

    前言 本文是自己vue项目实践中的一些总结,针对Vue2及相关技术栈,实践中版本为2.3.3. 开发前须知 vue-cli 在开发前,我们要至少通读一遍vue官方文档和API(看官方文档是最重要的,胜 ...

  8. Vue踩坑记录册

    1.vue-cli+webpack项目 修改项目名称 解决办法: 1 删除 node_modules 文件夹(如果修改项目名称,需要在在package.json中修改对应的name) 2 重新安装依赖 ...

  9. vue-elem-配置静态模拟数据访问接口

    使用本地mock数据模拟真实数据配置 static/data.json dev.server.js中 var app=express();之后添加以下代码, var appData=require(' ...

  10. 五、Vue:使用axios库进行get和post、用拦截器对请求和响应进行预处理、Mock(数据模拟)

    一.axios [应用]进行请求和传表单 [axios中文档]:https://www.kancloud.cn/yunye/axios/234845 [vue-axios]:https://cn.vu ...

随机推荐

  1. 用Python编写自己的微型Redis

    building-a-simple-redis-server-with-python 前几天我想到,写一个简单的东西会很整洁 雷迪斯-像数据库服务器.虽然我有很多 WSGI应用程序的经验,数据库服务器 ...

  2. vite启动dev的项目,在nginx做代理的时候,二级目录尾要加/

    vite启动dev的项目,在nginx做代理的时候,二级目录尾要加/ vite dev开发启动的时候, url最后不加/,系统不能使用,所以代理的时候,没加/,代理跳转过去,就回导致页面加载不出来,j ...

  3. shell脚本中常用的自定义函数

    在Shell脚本中,你可以定义各种函数来执行不同的任务.以下是20个常用的自定义函数示例,涵盖了从文件操作.文本处理到系统监控等多个方面: 检查文件是否存在 file_exists() { [ -f ...

  4. 泰凌微2.4G无线私有协议芯片开发总结

    案例     近些年,团队一直围绕着无线这块来做产品方案.一个无意的举动,接触到了泰凌微的2.4G私有协议芯片,发现这颗芯片在好几个场景中使用非常合适.就把这个芯片推荐给了客户,经过几个案子的历练.积 ...

  5. cpprestsdk有bug.

    好不容易将cpprestsdk移植到MinGW,并编译通过,出于安全还是先将samples还有tests测试一下是否正常. 用samples/blackjack一测试就出现奇葩现象,server一端会 ...

  6. springMVC之对象中的基本类型数据绑定遇到的问题

    最进在开发关于SpringMVC框架的项目时,发现个数据绑定的问题,如果这个实体对象里的字段类型为long.int.double时,客户端就报400语法错误 源代码: controller: @Req ...

  7. 项目升级到Android31版本dlopen找不到系统so库文件

    简介 最近有个海外项目需要把之前项目从30版本升级到31版本,升级后发现就发现一个问题: 因为我们的项目是系统签名的apk,所以集成到系统中后是没有任何问题的,但是当我们手动安装后就会出现使用dlop ...

  8. 文旅新体验!3DCAT助力广州非遗“元宇宙”街区炫酷亮相

    2022年6月12日,2022年"文化和自然遗产日"广州非遗宣传展示主会场暨广州非遗街区(北京路)开街仪式在南越王博物院(王宫展区)举行. 本次活动由广州市文化广电旅游局主办,广州 ...

  9. 地理探测器R语言实现:geodetector

      本文介绍基于R语言中的geodetector包,依据多张栅格图像数据,实现地理探测器(Geodetector)操作的详细方法.   需要说明的是,在R语言中进行地理探测器操作,可以分别通过geod ...

  10. Solon Web 文件上传的最佳实践

    文件上传是 Web 开发中最常见的一个应用场景.一般在处理数据时,会有两种常见的方案:直接把文件流放在内存里,或者把文件流先缓冲到磁盘. 1.如果是高频且文件极小 使用纯内存模式,默认即可.如果高频小 ...