前端数据模拟的几种方法

     现在开发项目社会的主流是前后端分离，这样前端和后端就可以根据自己的进度开发，可以不同步。后端同学接口还没做好，前端同学怎么测试呢，这样就要用到模拟数据了。

    现在我就来说说我认为还不错的几种模拟数据方法。

方法1：用 mock.js

1. 安装：npm install --save mockjs

2. 写模拟数据

import Mock from 'mockjs';

Mock.mock('/v1/user', {
    'list|1-10': [{
        'id|+1': 1,
        'email': '@EMAIL'
    }]
})

3. 发起 ajax 请求

reqwest({
            url: '/v1/user',
            type: 'json'
        })
            .then(res => {
                console.log(res)
            })
            .fail(err => {
                console.log(err)
            })

     注意：如果模拟数据的代码是单独定义在一个 js 文件里的，一定要先运行定义模拟数据的 js，再发起请求，请求才会被mock.js 拦截。一般在入口页面运行定义模拟数据的 js。

方法2：用 Node.js 搭建一个服务器模拟后台

//ajax
reqwest({
            url: '/v1/user',
            method: 'get'
        })
            .then(res => {
                console.log(res)
            })
            .fail(err => {
                console.log(err)
            })

//node
var express = require('express');
var app = express();

var data = require('./mock/user');

app.get('/v1/user', function(req, res) {
    res.json(data.users);
    res.end();
});

app.listen(8081, function() {
    console.log('Server running in http://localhost:8081')
})

    注意：如果项目使用的是 webpack，要在 webpack 配置文件的 proxy 配置后台代理，本例是代理到 http://localhost:8081。

方法3：使用第三方平台提供的 mock 功能