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

morgan 发布于2019-08-21 18:37 / 944人阅读

前言

刚开始接触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

目录结构

代码

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/Mo...

https://github.com/remy/nodem...

海外云主机云服务器搭建云更新服务器大富豪更新服务器搭建简单的云服务器怎么搭建 mock服务

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90644.html

Angular-mock之使用$httpBackend服务测试$http

摘要：简介模块为单元测试提供模块定义加载注入等支持。为使用了的应用提供单元测试的伪后台。根据提示进行设置即可。将该文件保存为，测试时需按顺序将测试项目文件及依赖文件引入。最后在请求后执行就会立即执行完成请求。参考官方单元测试学习笔记 Angular-mock简介 Angular-mock模块为angular单元测试提供模块定义、加载、注入等支持。辅助Karma、Jasmine等JS测试工具来...

rockswang 2019-08-21 10:40 评论0 收藏0
手把手教你用es6+vue2+webpack2+vue-router2搭建个人blog

摘要：更新日志更新完成静态页面原型修复使用的正确姿势更新添加静态页面更新添加使用方法请戳我主要作用就是在你开发环节在后端同学还未开发完成的情况下，提供一个。底下评论说是标题党，或者是光扔个github地址上来的同学我就不说什么了。你们有看看仓库的提交记录么？我还没有吃撑到开个仓库去骗star.我的出发点就是每天更新一部分代码，教大家用我所提到的技术栈搭建一个blog，我的出发点就是这么简单...

weapon 2019-08-20 14:15 评论0 收藏0
搭建vue+webpack+mock脚手架（一）

摘要：前言仓库地址本文适合第一次搭建项目的朋友，讲讲我是怎么从零开始摸索着搭建一个项目框架的，属于总结归纳性质的文章。前言仓库地址：https://github.com/miaomiaozh... 本文适合第一次搭建项目的朋友，讲讲我是怎么从零开始摸索着搭建一个项目框架的，属于总结归纳性质的文章。基于vue的多页应用支持自定义mock数据支持热加载 js打包成多个项目结构介绍...

waltr 2019-08-21 11:29 评论0 收藏0
基于webpack的前后端分离开发环境实战

摘要：背景随着互联网应用工程规模的日益复杂化和精细化，我们在开发一个标准应用的早已开始告别单干模式，为了提升开发效率，前后端分离的需求越来越被重视，前端负责展现交互逻辑，后端负责业务数据接口，基本上也成为了我们日常项目分工中的标配，但是前后端分离背景随着互联网应用工程规模的日益复杂化和精细化，我们在开发一个标准web应用的早已开始告别单干模式，为了提升开发效率，前后端分离的需求越来越被重...

soasme 2019-08-22 11:03 评论0 收藏0
一行命令搭建简易静态文件http服务器

摘要：简易服务器在命令执行的所在路径启动一个服务器，然后你可以通过浏览器访问该路径下的所有文件。在局域网内传文件，或者自己测试使用都是非常方便的。简易服务器：在命令执行的所在路径启动一个http服务器，然后你可以通过浏览器访问该路径下的所有文件。在局域网内传文件，或者自己测试使用都是非常方便的。 1 基于python showImg(https://segmentfault.com/im...

Alan 2019-08-21 17:13 评论0 收藏0