mock.js模拟数据

MOCK模拟后端数据

1.按照mock.js

npm install mockjs

2.在src目录下建立mock目录，在该目录下建立index.js文件，该文件中写上你所需要的数据，示例如下：

import Mock from 'mockjs'
let data = Mock.mock("/data/person","get",{
  "data":'@cname()',
  "age": "@integer(1,100)",
  "addr": "@city(true)",
  "email": "@email(qq.com)"
})

3.建立一个测试组件，本人这边是建立了一个deno01.vue测试组件，组件内容如下：

<template>
  <div>
    <button @click="getMessage">点击获取数据</button>
    <hr/>
    {{msg}}
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "demo01",
  data(){
    return{
      msg:''
    }
  },
  methods:{
    getMessage(){
        axios.get("/data/person").then(res=>{
          this.msg=(JSON.stringify(res.data));
        }).catch(error=>{
          alert(error.data())
        })
    }
  }
}
</script>

<style scoped>

</style>

注意点：axios中get的路径要与mock下的index.js中的url保持一直如下所示：