前端数据模拟的三种姿势

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

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

方法一：请求本地的 json 文件

项目里新建个文件夹用来存放测试用的 json 文件。

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

    这种方法不是很灵活，请求方式单一，而且联调的时候还得改请求 url。

方法二：用 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。

方法三：用 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-dev-server 起的本地服务器和你新建的 Node 服务器肯定不是同一个，必然会存在跨域问题，所以要在 webpack 配置文件的 proxy 配置后台代理，本例是代理到 http://localhost:8081。