Vue示例之使用Mock模拟数据与Axios请求数据

简述

由于后端与前端同时开发，而后端接口还未开发完成，前端又急需数据进行测试。那么mock模拟数据就是很好的选择，当然还有其他方式，以下做一个mock模拟数据示例，供参考学习。

前期准备

1.此示例中用到了elementUI（安装引入方式可移步到我的其他文章）
2.axios插件
安装

npm install --save axios vue-axios
或
npm install axios

在main.js中引入

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

使用方式

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})

3.mock插件
安装

npm install mockjs
或者
npm install --save mockjs
(安装脚手架cli可使用)或者
cnpm install --save mockjs 

编写数据

1.创建文件夹
a.在src下面创建一个mock文件夹
b.在mock文件夹的下创建data文件夹(存放数据)
2.编写数据文件
a.在mock文件夹下创建index.js文件来写代码
b.data文件夹下创建home.json文件用来放返回来的数据
3.编写模拟数据
图示

图示数据

源码：

{
  "msg":"测试接口数据成功！",
  "data":[
    {"name":"abc","sex":"男", "age":"15","home":"北京"},
    {"name":"123","sex":"男","age":"20","home":"湖南"},
    {"name":"qwe","sex":"女","age":"25","home":"北京"},
    {"name":"wer","sex":"男","age":"30","home":"天津"},
    {"name":"sdf","sex":"女","age":"45","home":"上海"}
  ]
}

引入mock

在mock文件夹下的index.js中引入

引入数据文件

源码：

// 引入ANGLE_instanced_arrays
var Mock=require("mockjs")
// 请求地址，请求方法（post/get）,require(请求数据地址)
Mock.mock("/test/user","get",require("./data/home.json"))

入口文件中引入

在main.js中引用mock

//引用mock
//名字默认写index.js，在引入的时候就可以不用写文件名
//require(".mock/index.js")
//mock里面默认请求index.js
require("./mock")

图示

请求数据

1.局部引用：单独页面请求数据，渲染当前页
2.全局引用：在main.js中引入

// 全局引用axios
import axios from "axios"
Vue.prototype.$axios=axios

创建组件

<template>
  <!-- 测试mock数据 -->
  <el-table :data="testDatas" stripe style="width: 100%">
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="sex" label="性别" width="180">
    </el-table-column>
    <el-table-column prop="age" label="年龄">
    </el-table-column>
    <el-table-column prop="home" label="家庭住址">
    </el-table-column>
  </el-table>
</template>

<script>
  export default{
    data(){
      return{
        testDatas: []
      }
    },
    // 钩子函数，页面加载完成请求数据
   created() {
      this.$axios({
        url:"/test/user",     //请求地址
        method:"get"  //请求方式
      }).then(ok =>{
        // ok表示请求成功的数据
        console.log(ok)
        // 把请求到的数据给testDatas数组
        this.testDatas=ok.data.data
      });
    }
  }
</script>

<style>
</style>

特别提醒：

由于在此使用了elementui运行时报错
最初赋值数据如下：

this.testDatas=ok.data

报错：

Error in render: "TypeError: data.reduce is not a function"

解决方式：
在请求数据给数组时要加data

 // 把请求到的数据给testDatas数组
        this.testDatas=ok.data.data

效果显示：

效果图