mock2easy-middleware

这是一个非常容易使用的前端mock服务器中间件，它可以很方便地接入到你的开发中。

安装

npm install mock2easy-middleware

当然，你可以使用淘宝镜像提供的cnpm加速下载过程

背景简介

前端开发过程中，避免不了需要从后端接口获取数据，例如后端同学给出了/profile.json的API时，我们前端代码里可能会写到：

$.get('/profile.json').done(function(){
    // ...
})

但是是无法在浏览器里获取到数据的，而是直接报错。

我们的目标很简单，有一个能编写mock接口的服务，假设跑在8005端口下，前端静态资源被伺服在3005端口下，我们希望能够在增加了一个mock接口如/profile.json后，能够在localhost:3005/profile.json获取到数据。整体流程如图所示：

mock2easy-middleware基于mock2easy，它是一个express的中间件，能够在提供静态文件服务器服务的express基础上，增加了mock的功能。

开始使用

情景1：express作为静态资源服务器，想要增加mock服务

var mock2easyMiddleware = require('mock2easy-middleware');
var express = require('express');
var server = express();
server.use("/", express.static(__dirname + "/public")); // 静态资源所在目录
server.use(mock2easyMiddleware());
server.use(function (req, res, next) {
  console.log('I\'m a middleware after mock2easy');
});
server.listen(3005, function () {
  console.log('前端服务器已经启动')
});

情景2:使用middleware方式启动webpack-dev-server

大家使用webpack-dev-server时，在命令行执行一句话webpack-dev-server即可跑起服务，但是我们是不能往其中植入mock服务的，所以我们使用了express搭配webpack-dev-server-middleware服务来手动实现一个dev-server，并且植入mock服务

var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev'); // 导入webpack.config.js文件
var mock2easyMiddleware = require('../index.js');
var devServerPort = config.devServer.port;
var mockPort = 8005; // mock服务启动的端口
 
config.entry.unshift("webpack/hot/dev-server", "webpack-hot-middleware/client?reload=true");
var app = express();
var compiler = webpack(config);
app.use(require("webpack-dev-middleware")(compiler, config.devServer));
app.use(require("webpack-hot-middleware")(compiler));
app.use(mock2easyMiddleware({
  port: mockPort
}));
app.listen(devServerPort, function () {
  console.log('开发环境已经启动: http://127.0.0.1:' + devServerPort);
});
 

使用方式不变，原先是直接在命令行执行webpack-dev-server，现在更改为执行node dev.js

情景3：不手动启动webpack-dev-server，直接融入现有webpack.config.js

这种情况下，便不需要使用本中间件了，直接使用mock2easy即可，步骤如下：

1.在webpack.config.js中加入mockeasy的配置&运行代码

var mock2easy = require('mock2easy');
 
var defaultConfig = {
  port: 8005,
  lazyLoadTime: 3000,
  database: 'mock2easy',
  doc: 'doc',
  ignoreField: [],
  interfaceSuffix: '.json',
  preferredLanguage: 'en'
};
 
mock2easy(defaultConfig, function (app) {
  app.listen(defaultConfig.port, function () {
    console.log(('mock2easy is starting , please visit : http://127.0.0.1:' + defaultConfig.port).bold.cyan);
  });
});

2.在配置文件里的devServer字段增加如下内容

  devServer: {
    proxy:{
      '/*.json':{
        target:'http://localhost:8005', // 8005 为mock服务所绑定的端口号
        secure:false
      }
    }
  },

Demo

1.克隆本仓库

2.npm install

3.分别执行以下命令，体验不同mock融入方式

npm run dev # 前端资源使用express作为静态服务器 
npm run dev1 # 手动实现webpack-dev-server 
npm run dev2 # 不使用中间件，直接融入webpack.config.js 

后续

1. 目前在对于接口命名的支持上，暂时只支持**以.xxx**作为后缀的接口，这样主要是为了方便区分静态资源接口