搭建簡單的偽熱更新Mock服務

morgan 發布于2019-08-21 18:37 / 1048人閱讀

前言

剛開始接觸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...

云服務器 GPU云服務器搭建云更新服務器大富豪更新服務器搭建簡單的云服務器怎么搭建 mock服務

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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