vue关于mock的简单使用

拼搏现实的明天。 2021-07-26 19:57 308阅读 0赞

## **阅读目录** ##

*  [一、mock][mock]
    
     *  [1、简介][1]
     *  [2、vue直接使用mock][2_vue_mock]

## 一、mock ##

### 1、简介 ###

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

### 2、vue直接使用mock ###

step1：安装mock

npm install mockjs

step2：直接引入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
        //还可以自定义其他数据
    });

step3：在需要的地方引入编写后的接口js即可。

【App.vue】

<template>
        <div>
            <button @click="login">login</button>
            <button @click="list">list</button>
        </div>
        
    </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>

[mock]: https://www.cnblogs.com/l-y-h/p/11691110.html#_label0
[1]: https://www.cnblogs.com/l-y-h/p/11691110.html#_label0_0
[2_vue_mock]: https://www.cnblogs.com/l-y-h/p/11691110.html#_label0_1