Node.js服务器环境下使用Mock.js拦截AJAX请求的教程

以下是详细讲解“Node.js服务器环境下使用Mock.js拦截AJAX请求的教程”的完整攻略。

什么是Mock.js？

Mock.js是一个生成随机数据的库，可以用于模拟数据接口以方便前端开发测试及数据 mock。Mock.js支持随机生成文本、数字、日期、布尔、数组、对象等数据类型，而且可以根据模板生成指定数据。Mock.js还提供了api，能够与 axios、fetch、superagent等http库配合使用，使mock数据和真实请求数据的结构完全一致。

使用Node.js搭建Mock服务器

1. 在项目目录下新建一个mock文件夹，用于存储所有的mock数据接口。

2. 使用express框架搭建服务器模板，并在其中配置express插件包、路由流程、跨域支持等。

const express = require('express');
const app = express();
const port = 3000;

// bodyParser中间件用于解析post请求的参数
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// 允许跨域
const cors = require('cors');
app.use(cors());

// 设置mock数据接口
app.use('/api', require('./mock'));

// 监听端口
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
})

1. 在mock文件夹中新建一个index.js文件，用于存放所有的mock数据接口，导入Mock.js并设置mock数据模板，最后使用express路由返回对应的mock数据。

const express = require('express');
const Mock = require('mockjs');
const router = express.Router();

// 指定接口路径，并返回对应的mock数据
router.get('/userInfo', (req, res) => {
    const data = Mock.mock({
        'code': 0, // 返回状态码
        'data|1-10': [{
            'id|+1': 1, // id为1-10之间的整型，步长为1
            'name': '@cname', // 中文名
            'age|18-60': 20, // 年龄为18-60之间的整型，值为20
            'address': '@city' // 城市名
        }]
    });
    res.json(data);
})

module.exports = router;

1. 启动node服务器，打开浏览器访问http://localhost:3000/api/userInfo即可返回mock数据。

使用Mock.js拦截AJAX请求

1. 使用axios作为http请求库，npm安装axios和mockjs库。

npm install axios --save
npm install mockjs --save-dev

1. 在API.js文件中新建一个API对象，使用axios发送请求并使用Mock.js拦截数据响应。

import axios from 'axios';
import Mock from 'mockjs';

const API = {
    // 获取用户信息接口
    getUserInfo() {
        return axios.get('/api/userInfo').then(res => {
            // 使用mockjs拦截数据并返回
            const data = Mock.mock(res.data);
            return data;
        });
    }
}

export default API;

1. 在需要获取mock数据的组件中，导入API对象并调用用户信息接口。

import React, { Component } from 'react';
import API from './API';

class UserInfo extends Component {
    state = {
        userInfo: []
    }

    componentDidMount() {
        API.getUserInfo().then(res => {
            this.setState({
                userInfo: res.data
            })
        })
    }

    render() {
        const { userInfo } = this.state;
        return (
            <div>
                {userInfo.map(item => (
                    <p key={item.id}>{item.name}，{item.age}岁，{item.address}</p>
                ))}
            </div>
        )
    }
}

export default UserInfo;

这样，我们就可以在Node.js服务器的环境下使用Mock.js拦截AJAX请求，并返回mock数据了。

示例1-拦截POST请求

现在需要在Node.js服务器环境下使用Mock.js模拟一条POST请求，并返回mock数据给axios前端请求。

1. 修改API.js代码，在getUserInfo接口中将请求方式改为POST。

const API = {
    // 获取用户信息接口
    getUserInfo() {
        return axios.post('/api/userInfo').then(res => {
            // 使用mockjs拦截数据并返回
            const data = Mock.mock(res.data);
            return data;
        });
    }
}

1. 在mock文件夹下的index.js新建一个接口，并返回mock数据。

// 指定接口路径，并返回对应的mock数据
router.post('/userInfo', (req, res) => {
    const data = Mock.mock({
        'code': 0, // 返回状态码
            'data|1-10': [{
            'id|+1': 1, // id为1-10之间的整型，步长为1
            'name': '@cname', // 中文名
            'age|18-60': 20, // 年龄为18-60之间的整型，值为20
            'address': '@city' // 城市名
        }]
    });
    res.json(data);
})

现在，若是前端代码使用axios.post('/api/userInfo')请求该接口，就能返回mock数据了。

示例2-设置Mock.js数据部分生成规则

现在我们已经可以拦截HTTP请求，并返回随机数据，但是某些情况下，生成的mock数据不能完全随意。例如，我们需要为性别属性设定固定值为“男/女”。下面就演示一下，如何为mock数据的部分属性设定规则。

1. 修改index.js中获取用户信息接口，设定部分生成规则。

// 指定接口路径，并返回对应的mock数据
router.post('/userInfo', (req, res) => {
    const data = Mock.mock({
        'code': 0, // 返回状态码
            'data|1-10': [{
            'id|+1': 1, // id为1-10之间的整型，步长为1
            'name': '@cname', // 中文名
            'age|18-60': 20, // 年龄为18-60之间的整型，值为20
            'address': '@city', // 城市名
            'gender|1-2': '男' // 性别，返回1的概率为50%，返回2的概率为50%，故而平均会返回一半男性，一半女性
        }]
    });
    res.json(data);
})

现在，在前端页面中调用该接口，虽然其他属性依然随机生成，但是性别属性会有固定的值。同时，也可以使用Mock.js设定其他属性的特殊生成规则，以满足不同的mock数据需求。

以上就是“Node.js服务器环境下使用Mock.js拦截AJAX请求的教程”的完整攻略，希望能够对您有所帮助。