Mock 之搭建本地 MockJs

一、目的

模拟后端接口

二、发请求

    1. install

    npm install axios

    2. 配置

    > src/utils/request.js

    import axios from 'axios'; // axios 导入包

    const service = axios.create({}); // axios 简单配置

    // /api/user/id    token

    service.interceptors.request.use(

            config => {

                return config

            }

        ) // axios 请求拦截

    service.interceptors.response.use(

            response => {

                const { data } = response

                // if (data.status == 200) {

                // } else if (data.status == 403) {

                // }

                return data;

            }

        ) // axios 响应拦截

    export default service

    - [axios官网](https://www.axios-http.cn/docs/example).

    3. 对接口发起请求

    > src/api/index.js

    import request from '@/utils/request'

    export const getUsers = () => request({

        url: '/api/users',

        method: 'get'

    })

    - axios发起请求的代码都维护在api下。

三、Mock模拟响应

    1. install

    npm install mockjs

    2. 配置

    > src/mock/index.js

    import Mock from 'mockjs'

    // mall 相关

    Mock.mock(

        '/api/users',

        'get',

        function() {

            return Mock.mock({

                "status": "200",

                "msg": "请求成功",

                "data|3": [{

                    "name": "@cname", // Mock.Random.cname(),

                    "age": "@integer(20,50)"

                }]

            })

        }

    )

    - [MockJS官网](http://mockjs.com/examples.html).

    - [MockJs github 官网文档](https://github.com/nuysoft/Mock/wiki).

    3. 把 mock 导入main.js  

    导入才会执行，数据才会成功。  

    > main.js

    import '@/mock'

- 三、请求成功且 mock 成功  

    1. About.vue

    > src/views/About.vue

   

   

- 四、优化 mock 代码

    1. example 模块化

    > src/mock/example.js

    import Mock from 'mockjs'

    export default {

        getUsers: () => {

            return Mock.mock({

                "status": "200",

                "msg": "请求成功",

                "data|3": [{

                    "name": "@cname", // Mock.Random.cname(),

                    "age": "@integer(20,50)"

                }]

            })

        }

    }

    2. mock 入口文件配置

    > src/mock/index.js

    import Mock from 'mockjs'

    import example from './example'

    // mall 相关

    Mock.mock('/api/users', 'get', example.getUsers)

    export default Mock;