mock.js 配合vue+axios

准备工作

1. 泡茶
2. 打开电脑。
3. 创建一个项目。
4. 安装mock.js+axios

开始工作

这是我的文件目录 基本上都是在vue项目都长这样子，我随手下载了一个vue+Ivew的项目。 2. src文件夹内创建一个lib文件夹 3. lib文件夹下创建mock.js

4. 在mock.js 文件夹下

import Mock from 'mockjs';
 export default Mock.mock('http://g.cn','post',{
     'name': '@name',

    'age|1-100': 100,

    'color': '@color'
 });
复制代码

5. 全局引用axios
   • 在main.js文件上引用

import axios from 'axios'
Vue.prototype.$http = axios;
复制代码

这样一引用你就可以全局使用this.axios方法来调用接口。

6. 在你需要调用接口的地方就可以使用了 使用方法如下：

          axiosTest(){
 this.$http.post('http://g.cn').then( 
        (successData) => {console.log(successData.data);},

          (fileData) => {console.log(fileData);})
          },
复制代码

7. 打开谷歌浏览器你就可以看到返回过来的数据

{name: "Jennifer Young", age: 69, color: "#d0f279"}
复制代码

8. 看到这里基本上已经初步可以使用axios+mock.js进行开发。
9. 但是还是有一个要思考的问题：

• axios调用接口的时候会进行封装处理。但是这种写法只能出现一组数据。如果更多的接口难道要写更多的文件，有没有更简便的方法去处理。
• 我解决了~！