搭建简单的伪热更新Mock服务

3,738 阅读3分钟

简介

刚开始接触vue-cli,发现用它生成的框架代码是缺少Mock模拟的,于是自己摸索了许久,将自己的摸索的结果通过过程记录下来,希望对别人有所帮助,能少走弯路。

这不是关于vue-cli的,是单纯的模拟数据服务 这不是关于vue-cli的,是单纯的模拟数据服务 这不是关于vue-cli的,是单纯的模拟数据服务

同时希望获得更好的解决方案,有更好方案的不要吝啬分享啊。

实现目标

  • 1.ajax数据模拟,灵活的接口配置
  • 2.热更新(不用手动重启mock的服务,自动重启不知道算不算O(∩_∩)O哈哈~)

搭建

过程变化

  • 1.简单mock服务
  • 2.可配置的mock服务
  • 3.热更新的可配置的mock服务

简单mock服务

目录结构

project

  • node_modules
  • mockServer.js
  • package.json

代码

用到的node_modules

  • express
  • mockjs

代码如下mockServer.js

const express = require('express'); //引入express模块
const Mock = require('mockjs'); //引入mock模块
const app = express(); //实例化express

// 路由api对应的模拟数据
app.all('/api', function (req, res) {
// mockjs中属性名‘|’符号后面的属性为随机属性,数组对象后面的随机属性为随机数组数量,正则表达式表示随机规则,+1代表自增

  res.json(Mock.mock({
    "status": 200,
    "data|1-9": [{
      "name|5-8": /[a-zA-Z]/,
      "id|+1": 1,
      "value|0-500": 20
    }]
  }));
});

// 监听8090端口
app.listen('8090');

运行结果

图片描述


可配置的mock服务

最简单的mock服务实现了,但是想想加入后期接口数量增加,那代码函数岂不是函数式增长!!!∑(゚Д゚ノ)ノ。还能不能愉快的维护了。

所以改良版就来了,这里我通过多个json文件来模拟多个请求的数据,通过一个配置文件来映射文件和接口

用到的模块

  • express
  • mockjs
  • path
  • fs

目录结构

图片描述

代码

mockServer.js

const express = require('express'); //引入express模块
const Mock = require('mockjs'); //引入mock模块
const app = express(); //实例化express
const path = require("path"); //引入path模块 核心模块不许要npm
const fs = require('fs'); // 引入fs模块 核心模块不许要npm

// 读取配置文件 将路由和文件对应上
fs.readFile(__dirname + '/test/conf.json', 'utf-8', function (err, data) {
  if (err) {
    console.log(err);
  } else {
    let dataObject = JSON.parse(data);
    for (let key in dataObject) {
      app.all(dataObject[key].url, function (req, res) {
        fs.readFile(path.join(__dirname + '/test', dataObject[key].path), 'utf-8', function (err, data) {
          if (err) {
            console.log(err);
          } else {
            res.json(Mock.mock(JSON.parse(data)));
          }
        })
      });
    }
  }
});
// 监听8090端口
app.listen('8090');

conf.json

{
  "api1":{
    "url":"/api1",
    "path":"./api1/api1.json"
  },
  "api2":{
    "url": "/api2",
    "path": "./api2/api2.json"
  }
}

api1.json

{
  "data":"i am api1"
}

api2.json

{
  "api2":"hahah"
}

运行结果

图片描述

图片描述

热更新的可配置的mock服务

经过上面的修改,终于不用写那么多行代码了O(∩_∩)O哈哈~ 但是人(我)是很懒的生物,如果每次改个配置文件,改个模拟数据文件手动重启才能生效岂不是好累 所以我们来模拟一下热更新,有木有好高大上的感觉O(∩_∩)O哈哈~

目录结构

图片描述

你没有看错,就添加了一个mockStart.js文件而已哦

代码

这里借用了nodemon来检检测json文件,然后重启mock服务

mockStart.js

var nodemon = require('nodemon'); //引入nodemon模块

/**
 * script 重启的脚本
 * ext 检测的文件
 */
nodemon({
  script: 'mockServer.js',
  ext: 'json'
});

nodemon.on('start', function () {
  console.log('mockServer has started');
}).on('quit', function () {
  console.log('mockServer has quit');
  process.exit();
}).on('restart', function (files) {
  console.log('mockServer restarted due to: ', files);
});

运行结果

还是熟悉的接口,还是不一样的味(数)道(据),我没有手动重启服务哦O(∩_∩)O哈哈~,是不是很方便。

图片描述
图片描述

参考资料

  • https://github.com/nuysoft/Mock/wiki
  • https://github.com/remy/nodemon/blob/master/doc/requireable.md