1. 程式人生 > >實現前後端分離的mock!!!mock的使用

實現前後端分離的mock!!!mock的使用

今天,我們打算花幾分鐘時間建立一個自己用來測試的 MockUp 伺服器。

因為我是前端開發,所以這裡使用 Node.js 建立一個簡單的迷你工程來完成!

目標

用 curl 訪問 mockserver 可以獲得自己想要的結果

>>> node client1.js
>>> curl http://localhost:1080/api/demo
{"name":"value"}

>>> curl -X POST 'http://localhost:1080/api/demo2?test=true' -d someBody
{"name":"value"}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

我喜歡上程式碼

直接建立一個起步目錄

npm init
  • 1
  • 1

用 Java 安裝 mockserver(最簡單)

總結起來就是:

>>> wget http://search.maven.org/remotecontent?filepath=org/mock-server/mockserver-netty/3.10.1/mockserver-netty-3.10.1-jar-with-dependencies.jar -O mockserver-netty-3.10.1-jar-with-dependencies.jar

>>> java -jar mockserver-netty-3.10
.1-jar-with-dependencies.jar -serverPort 1080 -proxyPort 1090
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

用 Node.js 安裝 mockserver

安裝必要的 Grunt 工具和部件

# 全域性安裝 Grunt 客戶端
npm install -g grunt-cli

# NPM 工程安裝 Grunt 以及 Grunt 外掛
npm install grunt --save-dev
npm install mockserver-grunt --save-dev

# 建立 Gruntfile.js
參考官方文件進行配置
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

然後建立一個檔案 Gruntfile.js

 用來排程本地的 MockServer 服務

/*File: Gruntfile.js*/
module.exports = function(grunt) {

grunt.initConfig({
    start_mockserver: {
        start: {
            options: {
                serverPort: 1080,
                proxyPort: 1090
            }
        }
    },
    stop_mockserver: {
        stop: {
        }
    }
});

grunt.loadNpmTasks('mockserver-grunt');

  // 預設被執行的任務列表。
  grunt.registerTask('default', ['start_mockserver']);
  grunt.registerTask('stop', ['stop_mockserver']);
  grunt.registerTask('start', ['start_mockserver']);

};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

現在,通過執行下邊命令即可啟動一個 Mock Server 了

grunt start
  • 1
  • 1

建立 MockServer Client

那麼,接下來建立一個客戶端檔案 client1.js 用來註冊自己需要如何 MockUp 一個 API 介面。

首先安裝依賴:

npm install mockserver-client
  • 1
  • 1

然後建立檔案 client1.js

/*File: client1.js*/
var mockServer = require('mockserver-client'),
    mockServerClient = mockServer.mockServerClient, // MockServer client
    proxyClient = mockServer.proxyClient; // proxy client

var remote = mockServerClient('localhost', 1080),
    remoteProxy = proxyClient('localhost', 1090);

// 使用之前清除伺服器裡邊已經註冊的 mockup 資訊,因為可能會影響當前測試結果或者開發結果呢。
remote.reset();

// 簡單的設定想要的response資訊
// curl -X POST http://localhost:1080/api/demo
remote.mockSimpleResponse('/api/demo', { name: 'value'}, 203);

// 精確的設定想要的response訊息,會參考輸入的情況來判斷怎麼跑
// curl -X POST 'http://localhost:1080/api/demo2?test=true' -d someBody
remote.mockAnyResponse({
  'httpRequest': {
    'method': 'POST',
    'path': '/api/demo2',
    'queryStringParameters': [
      {
        'name': 'test',
        'values': [ 'true' ]
      }
    ],
    'body': {
      'type': "STRING",
      'value': 'someBody'
    }
  }, /*httpRequest*/
  'httpResponse': {
    'statusCode': 200,
    'body': JSON.stringify({name: 'value'}),
    'delay': {
      'timeUnit': 'MILLISECONDS',
      'value': 250
    }
  }, /*httpResponse*/
  'times': {
    'remainingTimes': 1,
    'unlimited': false
  }
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45

好了,搞定!

使用一下試試

$ npm install

$ node client1.js

# 再在此使用我們的目標命令即可,見文章最上邊
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

想某些請求被現網伺服器呼叫?

也許想同時使用現網伺服器的登陸功能?

>>> curl -X POST http://localhost:1080/user/login -d account=demo_user -d password=demo_password
{"status":"LOGIN_SUCCESS","token":"abcdefgxxxxxxxx"}
# 期望這個請求被配置好的現網伺服器處理
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

配置一個新的請求,放到 client1.js 中:

/*File: client1.js*/

// 建立 bypass 請求,符合要求的請求會透傳給真的伺服器處理。
// curl -X POST http://localhost:1080/user/login -d account=demo_user -d password=demo_password
remote.mockAnyResponse({
  httpRequest: {
    method: 'POST',
    path: '/user/login'
  },
  httpForward: {
    host: '192.168.1.101',
    port: 8080,
    schema: "HTTP"
  },
  times: {
    remainingTimes: 1,
    unlimited: false
  }
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

然後再重新註冊一下 mock 訊息試試:

>>> node client1.js
>>> # 執行curl命令
  • 1
  • 2
  • 1
  • 2

支援跨域

如果需要跨域的話,需要在 Reponse 訊息中配置:

{ // Response 新增 headers 配置
  'httpResponse': {
    'headers': [
      {name: 'Access-Control-Allow-Origin', values: ['*']},
      {name: 'Access-Control-Allow-Methods', values: ['POST', 'GET', 'OPTIONS']}
    ]
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

搞定!

相關推薦

實現前後分離mockmock的使用

今天,我們打算花幾分鐘時間建立一個自己用來測試的 MockUp 伺服器。 因為我是前端開發,所以這裡使用 Node.js 建立一個簡單的迷你工程來完成! 目標 用 curl 訪問 mockserver 可以獲得自己想要的結果 >>> node cl

axios + mock.js模擬數據實現前後分離開發的實例代碼

log image 圖片 mage npm 新建 clas 就是 sta 首先就是必須安裝axios和mock.js npm install axios npm install mockjs 1. 然後在文檔src中新建一個mock.js文件,如圖 2. 在main.j

WebAPI 實現前後分離

工程 密碼 困難 跨域問題 內容 細節 -a errcode json 隨著Web技術的發展,現在各種框架,前端的,後端的,數不勝數。全棧工程師的壓力越來越大。 現在的前端的框架,既可以做各種Web,又可以做各種APP,前端框架更新換代越來越快,越來越多。 傳統的模式 前端

SSM:Spring+SpringMVC+MyBatis(實現前後分離

背景介紹 前段時間開發涉及到了前後端分離思想,本人涉及到開發後端以及資料庫連線處理部分,測試使用postman進行請求,之後對前端請求瞭解了一部分後完成了一個小的頁面,現在分享並記錄下來。 分享 話不多說,maven建立工程在之前的文章中已經存在:maven專案建立。建立好的專案

Node+Express+Vue+Element+MySQL簡易實現前後分離

原始碼 1、安裝node環境 具體安裝教程請參考http://nodejs.cn/ 2、塔建Vue前端專案 使用Vue官網提供的vue-cli腳手架vue-cli命令列工具 # 全域性安裝 vue-cli $ npm install --global vue-cli # 建立一個

nginx反向代理html,實現前後分離部署

前後端分離開發、部署,融到一個專案中部署,修改程式碼部署較為頻繁,前端改動一小點也都需要後端一起打包部署。固想了nginx部署一個代理即可。  下載好nginx後在nginx.conf中增加如下程式碼: server { listen 8082;

SpringBoot 整合 Thymeleaf 實現增刪改查,實現前後分離做法

通過一個簡單的與Springboot整合Demo認識Thymeleaf模板 文章目錄 通過一個簡單的與Springboot整合Demo認識Thymeleaf模板 什麼是Thymeleaf Thymeleaf 的基礎使用 前後端分離

SpringBoot 實現前後分離的跨域訪問(Nginx)

序言:使用Nginx反向代理,可以解決跨域無權和Session丟失的問題,十分方便。下面我們以前後端分離為案例,展開Nginx的使用教程。 一. 配置和啟動Nginx 下載地址 注意事項:下載之後,記得解壓到全英文路徑,避免中文路徑導致Nginx啟動失敗。 修改配

如何實現前後分離開發

為什麼要做分離開發:      現在很多公司的web開發模式都是用jsp、php、asp等等開發,由服務端渲染,而前端工程師的工作就是完成切圖及靜態頁面的搭建,他們的精力都放在了輔助別人完成專案的工作,背鍋還不討好,責任劃分不明確。因此今天要討論的話題就是前後端分離的開發,讓

express的proxy實現前後分離

var express = require('express') var proxy = require('http-proxy-middleware') var app = express() app.use('/api', proxy({ target: 'http://xxxxx', //

在vue-lic腳手架中安裝mockjs,實現前後分離開發

創建 uri 圖片編碼 處理 exp 學會 spl rom component 在項目開發前期,前端開發中,頁面布局基本開發完畢,但是後臺還接口還沒有開發完,等待後臺開發完接口,在進行接口聯調,浪費了等待時間,也壓縮的測試的時間。所以實現請求攔截,前端模擬後臺請求數據就是一

Springboot整合Kaptcha實現前後分離的驗證碼功能

1、簡介kaptcha     Kaptcha是一個基於SimpleCaptcha的驗證碼開源專案。 2、實現原理     首先,使用Kaptcha生成一個驗證碼captcha;     然後,為這個驗證碼生成一個token,以token為key,captcha為va

(二)nginx反向代理html,實現前後分離(部署一套html呼叫多個服務)

上篇部落格是一套頁面呼叫一個後端提供的服務,但是很多時候  我們後端會部署多個服務,為此部署配置一套nginx代理。 可以實現為nginx配置多種策略,如下說明: 負載均衡策略 1、輪詢(預設) 每個請求按時間順序逐一分配到不同的後端伺服器,如果後端伺服器down掉,能

輕量級artTemplate引擎 實現前後分離—基礎篇(實戰)

本系列文章分三篇:基礎篇、語法篇、實戰篇。 通過本系列文章,你將獲得以下問題的答案: 1、什麼是前後端分離 2、如何用artTemplate實現前後端分離 3、SpringMVC 實現後端 rest 介面 4、徹底解決ajax跨域訪問 5、效果演示、demo原始碼下載

Mockjs配合nodejs實現前後分離開發

前後端分離開發的前端開發工具Mockjs 作用: 前後端分離開發過程中,由於同時進行的原因,後臺相應介面還沒出來,我們只能先模擬介面的資料格式,進行前端開發工作。Mockjs可以攔截本地發起的ajax請求並隨機生成相應的模擬資料返回給前端,暫時充當後臺介

圖解基於node.js實現前後分離

轉自:https://github.com/yalishizhude/front-back-separation 基本介紹 首先從一個重要的概念“模板”說起。 廣義上來說,web中的模板就是填充資料後可以生成檔案的頁面。 嚴格意義上來說,應該是模板引擎利用特定格式

(一)nginx反向代理html,實現前後分離部署

前後端分離開發、部署,融到一個專案中部署,修改程式碼部署較為頻繁,前端改動一小點也都需要後端一起打包部署。固想了nginx部署一個代理即可。  下載好nginx後在nginx.conf中增加如下程式碼: server { listen 8082

輕量級artTemplate引擎 實現前後分離—語法篇(實戰)

通過本系列文章,你將獲得以下問題的答案: 1、什麼是前後端分離 2、如何用artTemplate實現前後端分離 3、SpringMVC 實現後端 rest 介面 4、徹底解決ajax跨域訪問 5、效果演示、demo原始碼下載 語法篇 上篇文章主要介紹了前後端分離與不

Django +vue.js實現前後分離(十三)

建立django專案 django-admin startproject ulb_manager 建立django下app作為專案後端 python manage,py startapp backend 在setting,py下的INSTALLED_APP配置下新增 backend 使用vue-init

CI框架3.x 之實現前後分離

control dir() public 技術 前後端 function ase ant html 一、建立合理的目錄結構    admin與home為後臺和前臺的控制器和模板文件夾 二、定義前後臺視圖路徑常量 在constants.php中添加如下代碼: //定義前臺視