在VUE项目中使用axios获取mockjs数据

jr_csdn_jr

于 2020-08-19 18:05:14 发布

阅读量857

点赞数 1

分类专栏： mock vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/jr_csdn_jr/article/details/108106472

版权

本文介绍了如何在Vue项目中结合axios和MockJS进行数据模拟。首先确保安装了axios和mockjs，接着在main.js中引入并配置MockJS，创建data.json存储模拟数据。在mockServer.js中定义接口路径，如'/goods', '/ratings', '/info'。最后，在需要数据的组件内通过axios调用这些接口，即可获取到MockJS返回的模拟数据。" 111423842,10295740,高考数据分析：揭秘985、211录取率,"['数据分析', 'Python', '高考', '教育', '数据可视化']

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

使用之前保证安装了axios和mockjs

npm install axios  --save
npm install mockjs --save

axios的配置就不说了，不懂的可以百度一下
下面说mock的配置

在main.js下
引入

import './mock/mockServer'

然后在src目录下创建mock,和下面两文件
在这里是图片描述

data.json放对应的数据如下（数据自己定义或者看http://mockjs.com/）：

{
  "info":{
    "name": "获得的info数据"
  },
  "goods":{
    "name": "获得的goods数据"
  },
  "ratings":{
    "name": "获得的ratings数据"
  }
}

mockServer.js放

/*
使用mock

最低0.47元/天解锁文章