前端mock数据方法

在前后端分离项目中，很多时候接口还没有开发完成、或者存在限制导致无法访问接口，就需要前端自行根据需求模拟数据，可以采用硬编码、使用 json 文件、mock 拦截、创建 mock 服务等方式。

这篇文章主要分享通过 mock 拦截、创建 mock 服务来实现预期数据返回。

npm install mockjs

1.mock拦截

npm install axios

// main.js
import axios from 'axios';
import Mock from 'mockjs';

// 拦截路径为“/api/getData”的get请求，返回包含list属性（数组长度为4）的对象
Mock.mock('/api/getData', 'get', {
    // 4条数据
    'list|4': [
        {
            // id自增1
            'id|+1': 1,
            // name从数组顺序选1
            'name|+1': ['张三', '李四', '王五', '赵六'],
            // age从数组随机选1
            'age|1': [35, 22, 18, 54],
            'email': '@email',
            'province': '@province'
        }
    ]
});

axios.get('/api/getData').then((res)=>{
    console.log(res);
});

2.创建mock服务

① 结合webpack

// mock-server.js
import Mock from 'mockjs';

const list = [
    {
        url: '/api/list',
        method: 'get',
        result(req, res) {
            return Mock.mock({
                // 4条数据
                'list|4': [
                    {
                        // id自增1
                        'id|+1': 1,
                        // name从数组顺序选1
                        'name|+1': ['张三', '李四', '王五', '赵六'],
                        // age从数组随机选1
                        'age|1': [35, 22, 18, 54],
                        'email': '@email',
                        'province': '@province'
                    }
                ]
            });
        }
    }
];

function createRoutes(app) {
    list.forEach(item => {
        const { url, method, result } = item;
        app[method](url, (req, res) => {
            return result(req, res);
        });
    });
}

export default createRoutes;

// webpack.config.js
module.export = {
    //...
    devServer: {
        //...
        before: require('./mock-server.js')
    }
};

webpack serve

② 独立的mock服务器

npm install express

// mock-server.js
import express from 'express';
import Mock from 'mockjs';

const app = express();

const list = Mock.mock({
    // 4条数据
    'list|4': [
        {
            // id自增1
            'id|+1': 1,
            // name从数组顺序选1
            'name|+1': ['张三', '李四', '王五', '赵六'],
            // age从数组随机选1
            'age|1': [35, 22, 18, 54],
            'email': '@email',
            'province': '@province'
        }
    ]
});

app.get('/api/list', (req, res) => {
    res.send(list);
});

app.listen('8080', () => {
    console.log('Mock server running on port 8080!');
});

node mock-server.js