vue mock数据教程

1.mock简介

mock是一个模拟数据生成器，旨在帮助前端独立于后端进行开发，帮助编写单元测试。其可模拟 Ajax 并返回模拟数据，使前端不用去调用后端的接口，方便测试。

2.vue直接使用mock

（1）安装mock

npm install mockjs

（2）新建并引入mock.js，并编写mock接口（Mock.mock）。

【mock.js】
//引入mock模块
import Mock from 'mockjs';

Mock.mock('/login', { //输出数据
    'name': '@name', //随机生成姓名
    //还可以自定义其他数据
});
Mock.mock('/list', { //输出数据
    'name': '@name', //随机生成姓名
    'age|10-20': 10
    //还可以自定义其他数据
});

（3）在需要的地方引入编写后的接口js即可。

【App.vue】
<template>
    <div>
        <button @click="login">login</button>
        <button @click="list">list</button>
    </div>
    <!--App -->
</template>

<script>
    import mock from './mock.js'
    import axios from 'axios'
    export default {
        methods: {
            login() {
                axios.post("/login").then(response => {
                    if (response.data) {
                        console.log(response.data)
                        alert(response.data.name)
                    }
                })
            },
            
            list() {
                axios.post("/list").then(response => {
                    if (response.data) {
                        console.log(response.data)
                        alert(response.data.name + ',' + response.data.age)
                    }
                })
            }
        }
    }
</script>

<style>

</style>

完毕