vue中使用mock模拟数据

最新推荐文章于 2024-03-10 08:46:13 发布

@hello明天

最新推荐文章于 2024-03-10 08:46:13 发布

阅读量2k

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/Amau_xushiwei/article/details/124018345

版权

1、安装mock

npm install mockjs --save-dev

2、在src下创建mock目录添加mock.js文件

mock.js

const Mock = require('mockjs')

const getUserList = () => {
  let users = [
    {
      id:"1001",
      username:"zhangsan",
      password:"123456"
    },
    {
      id:"1002",
      username:"lisi",
      password:"123456"
    },
    {
      id:"1003",
      username:"wangwu",
      password:"123456"
    }
  ]
  return users
}
/**
 * 当请求到路由的时候mock会拦截并返回
 **/
Mock.mock('http://localhost:8080/getUserList', 'get', getUserList())

3、在main.js中引入mock

const mock=true;
if(mock){
  require('./mock/mock')
}

4、测试

<script>
export default {
  name: "home",
  data() {
    return {
      tableData:[]
    }
  },
  created() {
    this.getList()
  },
  methods:{
    getList(){
      let that = this
      this.axios.get('http://localhost:8080/getUserList').then(function (res){
        that.tableData = res.data
      })
    }
  }
}
</script>