成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

搭建簡單的偽熱更新Mock服務(wù)

morgan / 1052人閱讀

前言

剛開始接觸vue-cli，發(fā)現(xiàn)用它生成的框架代碼是缺少M(fèi)ock模擬的，于是自己摸索了許久，將自己的摸索的結(jié)果通過過程記錄下來，希望對別人有所幫助，能少走彎路。

這不是關(guān)于vue-cli的，是單純的模擬數(shù)據(jù)服務(wù)
這不是關(guān)于vue-cli的，是單純的模擬數(shù)據(jù)服務(wù)
這不是關(guān)于vue-cli的，是單純的模擬數(shù)據(jù)服務(wù)

同時(shí)希望獲得更好的解決方案，有更好方案的不要吝嗇分享啊。

實(shí)現(xiàn)目標(biāo)

1.ajax數(shù)據(jù)模擬，靈活的接口配置

2.熱更新（不用手動(dòng)重啟mock的服務(wù)，自動(dòng)重啟不知道算不算O(∩_∩)O哈哈~）

搭建

過程變化

1.簡單mock服務(wù)

2.可配置的mock服務(wù)

3.熱更新的可配置的mock服務(wù)

簡單mock服務(wù) 目錄結(jié)構(gòu)

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(); //實(shí)例化express

// 路由api對應(yīng)的模擬數(shù)據(jù)
app.all("/api", function (req, res) {
// mockjs中屬性名‘|’符號后面的屬性為隨機(jī)屬性，數(shù)組對象后面的隨機(jī)屬性為隨機(jī)數(shù)組數(shù)量，正則表達(dá)式表示隨機(jī)規(guī)則，+1代表自增

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

// 監(jiān)聽8090端口
app.listen("8090");
運(yùn)行結(jié)果

可配置的mock服務(wù)

最簡單的mock服務(wù)實(shí)現(xiàn)了，但是想想加入后期接口數(shù)量增加，那代碼函數(shù)豈不是函數(shù)式增長!!!∑(?Д?ノ)ノ。還能不能愉快的維護(hù)了。

所以改良版就來了，這里我通過多個(gè)json文件來模擬多個(gè)請求的數(shù)據(jù)，通過一個(gè)配置文件來映射文件和接口

用到的模塊

express

mockjs

path

fs

目錄結(jié)構(gòu)

代碼

mockServer.js

const express = require("express"); //引入express模塊
const Mock = require("mockjs"); //引入mock模塊
const app = express(); //實(shí)例化express
const path = require("path"); //引入path模塊 核心模塊不許要npm
const fs = require("fs"); // 引入fs模塊 核心模塊不許要npm

// 讀取配置文件 將路由和文件對應(yīng)上
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)));
          }
        })
      });
    }
  }
});
// 監(jiān)聽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"
}
運(yùn)行結(jié)果

熱更新的可配置的mock服務(wù)

經(jīng)過上面的修改，終于不用寫那么多行代碼了O(∩_∩)O哈哈~
但是人（我）是很懶的生物，如果每次改個(gè)配置文件，改個(gè)模擬數(shù)據(jù)文件手動(dòng)重啟才能生效豈不是好累
所以我們來模擬一下熱更新，有木有好高大上的感覺O(∩_∩)O哈哈~

目錄結(jié)構(gòu)

你沒有看錯(cuò)，就添加了一個(gè)mockStart.js文件而已哦

代碼

這里借用了nodemon來檢檢測json文件，然后重啟mock服務(wù)

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);
});
運(yùn)行結(jié)果

還是熟悉的接口，還是不一樣的味（數(shù)）道（據(jù)），我沒有手動(dòng)重啟服務(wù)哦O(∩_∩)O哈哈~，是不是很方便。

參考資料

https://github.com/nuysoft/Mo...

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90644.html

相關(guān)文章

  • Angular-mock之使用$httpBackend服務(wù)測試$http

    摘要：簡介模塊為單元測試提供模塊定義加載注入等支持。為使用了的應(yīng)用提供單元測試的偽后臺。根據(jù)提示進(jìn)行設(shè)置即可。將該文件保存為，測試時(shí)需按順序?qū)y試項(xiàng)目文件及依賴文件引入。最后在請求后執(zhí)行就會立即執(zhí)行完成請求。參考官方單元測試學(xué)習(xí)筆記 Angular-mock簡介 Angular-mock模塊為angular單元測試提供模塊定義、加載、注入等支持。輔助Karma、Jasmine等JS測試工具來...

    rockswang 評論0 收藏0

  • 手把手教你用es6+vue2+webpack2+vue-router2搭建個(gè)人blog

    摘要：更新日志更新完成靜態(tài)頁面原型修復(fù)使用的正確姿勢更新添加靜態(tài)頁面更新添加使用方法請戳我主要作用就是在你開發(fā)環(huán)節(jié)在后端同學(xué)還未開發(fā)完成的情況下，提供一個(gè)。 底下評論說是標(biāo)題黨，或者是光扔個(gè)github地址上來的同學(xué)我就不說什么了。你們有看看倉庫的提交記錄么？我還沒有吃撐到開個(gè)倉庫去騙star.我的出發(fā)點(diǎn)就是每天更新一部分代碼，教大家用我所提到的技術(shù)棧搭建一個(gè)blog，我的出發(fā)點(diǎn)就是這么簡單...

    weapon 評論0 收藏0

  • 搭建vue+webpack+mock腳手架（一）

    摘要：前言倉庫地址本文適合第一次搭建項(xiàng)目的朋友，講講我是怎么從零開始摸索著搭建一個(gè)項(xiàng)目框架的，屬于總結(jié)歸納性質(zhì)的文章。 前言 倉庫地址：https://github.com/miaomiaozh... 本文適合第一次搭建項(xiàng)目的朋友，講講我是怎么從零開始摸索著搭建一個(gè)項(xiàng)目框架的，屬于總結(jié)歸納性質(zhì)的文章。 基于vue的多頁應(yīng)用 支持自定義mock數(shù)據(jù) 支持熱加載 js打包成多個(gè) 項(xiàng)目結(jié)構(gòu)介紹...

    waltr 評論0 收藏0

  • 基于webpack的前后端分離開發(fā)環(huán)境實(shí)戰(zhàn)

    摘要：背景隨著互聯(lián)網(wǎng)應(yīng)用工程規(guī)模的日益復(fù)雜化和精細(xì)化，我們在開發(fā)一個(gè)標(biāo)準(zhǔn)應(yīng)用的早已開始告別單干模式，為了提升開發(fā)效率，前后端分離的需求越來越被重視，前端負(fù)責(zé)展現(xiàn)交互邏輯，后端負(fù)責(zé)業(yè)務(wù)數(shù)據(jù)接口，基本上也成為了我們?nèi)粘ｍ?xiàng)目分工中的標(biāo)配，但是前后端分離 背景 隨著互聯(lián)網(wǎng)應(yīng)用工程規(guī)模的日益復(fù)雜化和精細(xì)化，我們在開發(fā)一個(gè)標(biāo)準(zhǔn)web應(yīng)用的早已開始告別單干模式，為了提升開發(fā)效率，前后端分離的需求越來越被重...

    soasme 評論0 收藏0

  • 一行命令搭建簡易靜態(tài)文件http服務(wù)器

    摘要：簡易服務(wù)器在命令執(zhí)行的所在路徑啟動(dòng)一個(gè)服務(wù)器，然后你可以通過瀏覽器訪問該路徑下的所有文件。在局域網(wǎng)內(nèi)傳文件，或者自己測試使用都是非常方便的。 簡易服務(wù)器：在命令執(zhí)行的所在路徑啟動(dòng)一個(gè)http服務(wù)器，然后你可以通過瀏覽器訪問該路徑下的所有文件。 在局域網(wǎng)內(nèi)傳文件，或者自己測試使用都是非常方便的。 1 基于python showImg(https://segmentfault.com/im...

    Alan 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<