node实现mock-plugin中间件的方法

Node.js是一个可以运行JavaScript的开发平台，可以用它来实现服务器端的编程，也可以使用它来开发命令行工具。Mock-plugin中间件是一个常用的Web前端开发工具，可以提供本地开发时的Mock数据服务，Webpack、Gulp、Grunt、Browserify等开源工具可以通过在构建阶段注入插件的方式实现Mock功能。

以下是实现Node实现mock-plugin中间件的完整攻略：

1. 安装Node.js

首先需要在本地安装Node.js，这里提供官方下载链接：Node.js官网。根据自己的操作系统版本选择对应的版本进行安装。

2. 创建项目目录

在本地电脑上创建一个项目目录，命名为mock-server。在该目录下执行以下命令：

npm init -y

该命令用于初始化一个npm项目，其中的-y表示使用默认设置。执行后会生成一个package.json文件，用于记录该项目的依赖信息。

3. 安装依赖

执行以下命令安装所需依赖：

npm install express cors body-parser --save-dev
npm install mockjs --save

以上命令分别安装了express、cors、body-parser、mockjs这些依赖模块。其中，express用于构建Web服务器；cors可以解决跨域问题；body-parser可以解析请求体中的JSON数据；mockjs是用于生成随机数据的工具。

4. 编写代码

在mock-server目录下创建一个名为index.js的文件，该文件内容如下：

const express = require('express')
const bodyParser = require('body-parser')
const mockjs = require('mockjs')

const app = express()
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: true}))

// 启用CORS
app.use(require('cors')())

// 添加路由
app.get('/api/test', (req, res) => {
  res.send('test mock service')
})

app.post('/api/user', (req, res) => {
  const data = mockjs.mock({
    'id': '@guid',
    'username': '@cname',
    'age|10-50': 1
  })
  res.send(data)
})

// 启动服务器
const port = 3000
app.listen(port, () => console.log(`Mock server listening on port ${port}!`))

以上代码用于创建一个简单的服务器，添加了两个路由。分别是：

1. /api/test：用于测试服务器是否正常启动，直接返回一个字符串。
2. /api/user：用于Mock用户信息。Mock的用户数据格式为：{"id": "xxxx-xxxx-xxxx", "username": "张三", "age": 18}。其中，id和username是随机生成的GUID和中文名字，age是随机生成的10-50之间的整数。

5. 启动服务器

在mock-server目录下执行以下命令：

node index.js

该命令用于启动Mock服务器，在控制台中可以看到“Mock server listening on port 3000!”这句话，表示服务器已经正常启动。

6. 验证Mock数据

在浏览器中输入http://localhost:3000/api/test，可以看到返回的字符串为“test mock service”，表示该路由能够正常工作。

使用Postman等软件向http://localhost:3000/api/user发送POST请求，请求体可以为空。可以看到返回的JSON数据格式正确，表示Mock数据已经成功生成。

示例1：express结合vue-cli中的mockjs

执行以下命令：

vue init webpack my-project 
cd my-project
npm install
npm install express body-parser cors --save-dev

新建mock-server目录，并新建文件 index.js：

const express = require('express')
const app = express()
const PORT = 8081;

//添加中间件，处理post请求body，允许跨域
const bodyParser = require('body-parser')
const cors = require('cors')
app.use(bodyParser.json());
app.use(cors())

//设置路由
app.all('/mock_api/*', (req, res) => {
  const result = require(`../mock_file/${req.method.toLowerCase()}s-mock`).handle(req);
  res,send(result);
});

app.listen(PORT, () => {
  console.log(`server is listening on http://localhost:${PORT}`);
});

mock_file目录下新建 POST-mock.js 文件：

class Mock{
  //模拟登录接口
  login() {
    const tmp = JSON.stringify({code: 1, msg: "success", data: null});
    const result = {code: 200, msg: "success", data: JSON.parse(tmp)}
    return result;
  }
}

module.exports={
  handle(req) {
    return new Mock()[req.url.split('/')[2].split('?')[0]]();
  },
};

在src目录下的main.js文件中添加以下代码：

if(process.env.NODE_ENV==='development'){
  const requireAll=requireContext=>requireContext.keys().map(requireContext);
  const req=require.context('@/api/mock/',true,/\.js$/);
  requireAll(req);//调用所有请求
}

在/api/mock目录下新建 login.js 文件：

import { _post } from '@/api/index' //封装axios

export const login = (username, password) => {
  return _post(`/mock_api/login?username=${username}&password=${password}`)
}

示例2：结合mockjs实现数据的随机生成

示例1中的代码结合了vue-cli，虽然是一个完整的项目的流程，但是在实际开发中不太使用这种方式。下面提供一种更加便捷、更加灵活的方式。

在某一目录下创建 index.js 文件：

let express = require('express');
let bodyParser = require('body-parser');
let mockjs = require('mockjs');
let app = express();
let router = express.Router();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use('/api', router);//挂载子路由

let server = app.listen(3000, () => {
  console.log(`listening at http://localhost:3000/`)
});

const getUser = (req, res) => {
  console.log(mockjs.mock({
    "id": "@guid",
    "username": "@cname",
    "email": "@EMAIL",
    "age|10-50": 1
  }));
  res.send(mockjs.mock({
    "id": "@guid",
    "username": "@cname",
    "email": "@EMAIL",
    "age|10-50": 1
  }));
};

router.get('/User/get', getUser);//getUser 是响应处理函数

在目录中执行 npm init -y 初始化，再安装 express, mickjs: npm i express mockjs --save-dev。

上述代码新建了一个简单的路由，我们通过mockjs模拟了一个用户数据。id 为字符串类型的 GUID，username 是姓名，email 是邮箱地址，age 在 10-50 之间。其中 age|10-50 解析为一个数字，随后数字被约束在 10 到 50 区间内。

启动该文件后，/api/User/get 接口返回了mock数据。

总结

上述两个示例展示了如何在Node.js中结合express、cors、body-parser、mockjs等工具实现Mock数据的方式。示例1结合了vue-cli使用，示例2单独使用。

Mock-plugin中间件在前端开发中具有广泛的应用，能够帮助我们快速地编写前端代码。希望本文对大家有所帮助，感谢阅读！