axios调取本地mock模拟数据详细讲解

需要与后台进行数据交互  这里使用本地json数据来模仿后台数据交互流程 我们使用了mock数据模拟后台数据)

作为前端经常需要模拟后台数据,我们称之为mock。mock 的真正意义在于简化测试环境。假如你现在要测试一个dao,但是你有不想构建数据库环境就可以用mock模拟数据库的返回结果。


进入正题:

一,在vuejs 2.0版本 在配置文件webpack.dev.conf.js进行本地数据访问,在const portfinder = require(‘portfinder’)后添加


//app.use是express“调用中间件的方法”。所谓“中间件(middleware),就是处理HTTP请求的函数,用来完成各种特定的任务,比如检查用户是否登录、分析数据、以及其他在需要最终将数据发送给用户之前完成的任务。”。这是阮一峰文章的原话。
//简而言之,app.use() 里面使用的参数,主要是函数。但这个使用,并不是函数调用,而是使能

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
您好,感谢您的提问。如果您想在 Vue 中使用线上 Mock 模拟图片路径,并通过 Axios 请求数据,可以按照以下步骤进行: 1. 在 Vue 项目中安装 AxiosMockjs: ``` npm install axios mockjs --save ``` 2. 在 Vue 项目的 main.js 中引入 AxiosMockjs: ``` import axios from 'axios'; import Mock from 'mockjs'; ``` 3. 在 main.js 中配置 Axios 的请求拦截器,用于 Mock 模拟图片路径: ``` // 配置 Axios 请求拦截器 axios.interceptors.request.use((config) => { // 如果请求的 URL 是图片路径,则使用 Mock 模拟图片路径 if (/^\/api\/images\/.+/.test(config.url)) { config.url = Mock.Random.image('200x100', Mock.Random.color(), '#FFF', 'Mock Image'); } return config; }); ``` 在这里,我们使用了 Mock.Random.image() 方法来生成一个 200x100 大小的图片,并将其作为 Mock 模拟的图片路径返回。 4. 在组件中使用 Axios 发送请求,并将返回的数据与本地图片结合显示: ``` <template> <div> <img :src="localImage" alt="Local Image" /> <img :src="remoteImage" alt="Remote Image" /> </div> </template> <script> import axios from 'axios'; export default { data() { return { localImage: require('@/assets/images/local-image.png'), remoteImage: '', }; }, mounted() { // 发送 Axios 请求,获取远程数据 axios.get('/api/data') .then((response) => { // 将远程数据与本地图片结合显示 this.remoteImage = response.data.image; }) .catch((error) => { console.error(error); }); }, }; </script> ``` 在这里,我们使用了 require() 方法将本地图片引入,并将其作为 Vue 组件中的 data 数据。然后,使用 Axios 发送请求,获取远程数据,并将返回的图片路径与本地图片路径结合显示。 希望这些步骤可以帮助您实现在 Vue 中使用线上 Mock 模拟图片路径,并通过 Axios 请求数据,结合本地图片进行显示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

积码成猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值