重学vue(2)--mock数据和使用axios进行ajax请求

最新推荐文章于 2025-07-02 10:49:40 发布

weixin_43756060

最新推荐文章于 2025-07-02 10:49:40 发布

阅读量420

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/weixin_43756060/article/details/86479904

VUE 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍如何在Vue项目中设置本地Mock数据，包括在static目录下创建mock文件夹存放JSON文件，修改config/index.js配置文件实现请求转发，以及使用axios进行数据请求的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本地mock数据

在static存放静态文件的文件夹下创建mock文件夹存放mock的json文件
例如创建index.json文件

{
  "ret": true,
  "data": {
    "swiperList": [{
        "id": "0001",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg"
      },{
        "id": "0002",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1802/42/7c92b9a381e46402.jpg_640x200_1cdce2a4.jpg"
      },{
        "id": "0003",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1802/51/e78f936a5b404102.jpg_640x200_c14f0b3a.jpg"
      },{
        "id": "0004",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1712/91/a275569091681d02.jpg_640x200_0519ccb9.jpg"
      }],
    "iconList": [{
        "id": "0001",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png",
        "desc": "景点门票"
      }, {
        "id": "0002",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1711/df/86cbcfc533330d02.png",
        "desc": "滑雪季"
      }, {
        "id": "0003",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1710/a6/83f636bd75ae6302.png",
        "desc": "泡温泉"
      }, {
        "id": "0004",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1611/35/2640cab202c41b02.png",
        "desc": "动植园"
      }, {
        "id": "0005",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1611/d0/e09575e66f4aa402.png",
        "desc": "游乐园"
      }, {
        "id": "0006",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1611/59/569d3c096e542502.png",
        "desc": "必游榜单"
      }, {
        "id": "0007",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1611/17/4bd370f3eb1acd02.png",
        "desc": "演出"
      }, {
        "id": "0008",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1611/7f/b1ea3c8c7fb6db02.png",
        "desc": "城市观光"
      }, {
        "id": "0009",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1611/a9/ffc620dbda9b9c02.png",
        "desc": "一日游"
      }],
    "recommendList": [{
        "id": "0001",
        "imgUrl": "http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_140x140_80f63803.jpg",
        "title": "故宫",
        "desc": "东方宫殿建筑代表，世界宫殿建筑典范"
      }, {
        "id": "0002",
        "imgUrl": "http://img1.qunarzz.com/sight/p0/1511/d2/d2aec2dfc5aa771290.water.jpg_140x140_abb362a7.jpg",
        "title": "南山滑雪场",
        "desc": "北京专业级滑雪圣地"
      }, {
        "id": "0003",
        "imgUrl": "http://img1.qunarzz.com/sight/p0/1501/f4/f467729126949c3a.water.jpg_140x140_ef235b1c.jpg",
        "title": "天安门广场",
        "desc": "我爱北京天安门，天安门上太阳升"
      }, {
        "id": "0004",
        "imgUrl": "http://img1.qunarzz.com/sight/p0/1501/40/40b2b6c951b28fdd.water.jpg_140x140_1c863e5c.jpg",
        "title": "水立方",
        "desc": "中国的荣耀，阳光下的晶莹水滴"
      }, {
        "id": "0005",
        "imgUrl": "http://img1.qunarzz.com/sight/p0/201308/23/b283071686e64dfec8d65eac.jpg_140x140_8c5a7c49.jpg",
        "title": "温都水城养生馆",
        "desc": "各种亚热带植物掩映其间仿佛置身热带雨林"
      }],
    "weekendList": [{
        "id": "0001",
        "imgUrl": "http://img1.qunarzz.com/sight/source/1510/6e/1ea71e2f04e.jpg_r_640x214_aa6f091d.jpg",
        "title": "北京温泉排行榜",
        "desc": "细数北京温泉，温暖你的冬天"
      }, {
        "id": "0002",
        "imgUrl": "http://img1.qunarzz.com/sight/source/1505/aa/7baaf8a851d221.jpg_r_640x214_1431200f.jpg",
        "title": "北京必游TOP10",
        "desc": "来北京必去的景点非这些地方莫属"
      }, {
        "id": "0003",
        "imgUrl": "http://img1.qunarzz.com/sight/source/1505/9e/21df651e19af5d.jpg_r_640x214_3ea5bb38.jpg",
        "title": "寻找北京的皇城范儿",
        "desc": "数百年的宫廷庙宇，至今依旧威严霸气"
      }, {
        "id": "0004",
        "imgUrl": "http://img1.qunarzz.com/sight/source/1505/ce/bc89bc2f0e33ea.jpg_r_640x214_3e408453.jpg",
        "title": "学生最爱的博物馆",
        "desc": "周末干嘛？北京很多博物馆已经免费开放啦"
      }, {
        "id": "0005",
        "imgUrl": "http://img1.qunarzz.com/sight/source/1505/b2/fde1bfcd057a52.jpg_r_640x214_bbf3fa44.jpg",
        "title": "儿童剧场，孩子的乐园",
        "desc": "带宝贝观看演出，近距离体验艺术的无穷魅力"
      }]
  }
}

修改配置文件转发请求地址，是请求指向本地mock文件

修改config文件夹下的index.js文件

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // 添加的部分
    proxyTable: {
      '/api': {
        target: 'http://localhost:8081', // 本地ip
        pathRewrite: {
          '^/api': '/static/mock'  // mock数据的文件路径
        }
      }
    },
    // 添加的部分
    ....
   }
 }

重启服务
在项目中就可以通过以下地址请求对应的mock文件了
例如请求index.json文件

axios.get('/api/index.json').then()

axios使用

安装

npm install axios --save

引入axios

import axios from 'axios'

使用axios

mounted () {
  this.getHomeInfo()
},
methods: {
  getHomeInfo () {
  	 //跨域请求可以在config/index.js中进行配置
     axios.get('/zt/api/app_dujia/index.php')
       .then(this.getHomeInfoSucc)
  },
  getHomeInfoSucc (res) {
     console.log(res)
  }
}

开发环境配置请求接口config/index.js

配置多个跨域接口

proxyTable: {
 '/api' : {
    target: 'https://touch.dujia.qunar.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
 },
 '/zt' : {
    target: 'https://zt.dujia.qunar.com',
    changeOrigin: true,
    pathRewrite: {
      '^/zt': ''
    }
 }
},

参考链接：【VUE】一个简单常用的proxyTable配置
 参考链接：webpack中代理配置（proxyTable）
使用webpack+axios修改ProxyTable错误之504
axios与jsonp