前端模拟接口数据两种常用方法

方法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 功能
————————————————

版权声明：本文为CSDN博主「huangpb0624」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/huangpb123/article/details/79273316