使用mock模拟get接口, 前端通过axios发起请求返回404,在mock中无法直接获取到参数。【分页请求和获取信息】

 一、使用mock定义get请求的接口,前端通过拼接的方式传递参数。

1.1 mock中的接口定义:

 1.2 页面中发起请求:

二、定义get请求接口,通过params传参数

2.1 mock:

 2.2 页面中发起请求

 

三、知识点:

  1. mock中不能自动获取到query参数
  2. 在get请求接口中,使用正则表达式定义url,通过url 获取到参数值。
  3. 如下图,想要直接通过query拿到参数,打印的query返回值为undefined。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
您好,感谢您的提问。如果您想在 Vue 使用线上 Mock 模拟图片名称,并通过 Axios 请求图片数据,结合本地图片,再通过 for 循环将图片显示出来,可以按照以下步骤进行: 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)) { const imageName = Mock.Random.word(10) + '.png'; config.url = '/api/images/' + imageName; } return config; }); ``` 在这里,我们使用Mock.Random.word() 方法来生成一个随机的图片名称,并将其作为 Mock 模拟的图片名称返回。 4. 在组件使用 Axios 发送请求,并将返回的图片数据与本地图片结合显示: ``` <template> <div> <img v-for="(image, index) in images" :key="index" :src="image" alt="Image" /> </div> </template> <script> import axios from 'axios'; export default { data() { return { localImage: require('@/assets/images/local-image.png'), images: [], }; }, mounted() { // 发送 Axios 请求获取远程数据 axios.get('/api/data') .then((response) => { // 将远程数据与本地图片结合显示 const remoteImages = response.data.images; for (let i = 0; i < remoteImages.length; i++) { this.images.push(require('@/assets/images/' + remoteImages[i])); } }) .catch((error) => { console.error(error); }); }, }; </script> ``` 在这里,我们使用了 require() 方法将本地图片引入,并将其作为 Vue 组件的 data 数据。然后,使用 Axios 发送请求获取远程数据,并将返回的图片名称与本地图片路径结合显示。在 for 循环,我们使用 require() 方法将每个图片路径引入,并将其 push 到 images 数组,最后使用 v-for 指令将所有图片显示出来。 希望这些步骤可以帮助您实现在 Vue 使用线上 Mock 模拟图片名称,并通过 Axios 请求图片数据,结合本地图片,再通过 for 循环将图片显示出来。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值