基于NodeJS的前后端分離的思考與實踐(三)輕量級的接口配置建??蚣?/h1>
更新時間:2014年09月26日 09:59:34 作者:taobaoued
Node在整個環(huán)境中最重要的工作之一就是代理這些業(yè)務(wù)接口,以方便前端(Node端和瀏覽器端)整合數(shù)據(jù)做頁面渲染。如何做好代理工作,使得前后端開發(fā)分離之后,仍然可以在流程上無縫銜接,是我們需要考慮的問題。本文將就該問題做相關(guān)探討,并提出解決方案。
前言
使用Node做前后端分離的開發(fā)模式帶來了一些性能及開發(fā)流程上的優(yōu)勢, 但同時也面臨不少挑戰(zhàn)。在淘寶復(fù)雜的業(yè)務(wù)及技術(shù)架構(gòu)下,后端必須依賴Java搭建基礎(chǔ)架構(gòu),同時提供相關(guān)業(yè)務(wù)接口供前端使用。Node在整個環(huán)境中最重要的工作之一就是代理這些業(yè)務(wù)接口,以方便前端(Node端和瀏覽器端)整合數(shù)據(jù)做頁面渲染。如何做好代理工作,使得前后端開發(fā)分離之后,仍然可以在流程上無縫銜接,是我們需要考慮的問題。本文將就該問題做相關(guān)探討,并提出解決方案。

由于后端提供的接口方式可能多種多樣,同時開發(fā)人員在編寫Node端代碼訪問這些接口的方式也有可能多種多樣。如果我們在接口訪問方式及使用上不做統(tǒng)一架構(gòu)處理,則會帶來以下一些問題:
1. 每一個開發(fā)人員使用各自的代碼風(fēng)格編寫接口訪問代碼,造成工程目錄及編碼風(fēng)格混亂,維護相對困難。
2. 每一個開發(fā)人員編寫自己的mock數(shù)據(jù)方式,開發(fā)完畢之后,需要手工修改代碼移除mock。
3. 每一個開發(fā)人員為了實現(xiàn)接口的不同環(huán)境切換(日常,預(yù)發(fā),線上),可能各自維護了一些配置文件。
4. 數(shù)據(jù)接口調(diào)用方式無法被各個業(yè)務(wù)model非常方便地復(fù)用。
5. 對于數(shù)據(jù)接口的描述約定散落在代碼的各個角落,有可能跟后端人員約定的接口文檔不一致。
6. 整個項目分離開發(fā)之后,對于接口的聯(lián)調(diào)或者測試回歸成本依然很高,需要涉及到每一個接口提供者和使用者。
于是我們希望有這樣一個框架,通過該框架提供的機制去描述工程項目中依賴的所有外部接口,對他們進行統(tǒng)一管理,同時提供靈活的接口建模及調(diào)用方式,并且提供便捷的線上環(huán)境和生產(chǎn)環(huán)境切換方法,使前后端開發(fā)無縫結(jié)合。ModelProxy就是滿足這樣要求的輕量級框架,它是Midway Framework 核心構(gòu)件之一,也可以單獨使用。使用ModelProxy可以帶來如下優(yōu)點:
1. 不同的開發(fā)者對于接口訪問代碼編寫方式統(tǒng)一,含義清晰,降低維護難度。
2. 框架內(nèi)部采用工廠+單例模式,實現(xiàn)接口一次配置多次復(fù)用。并且開發(fā)者可以隨意定制組裝自己的業(yè)務(wù)Model(依賴注入)。
3. 可以非常方便地實現(xiàn)線上,日常,預(yù)發(fā)環(huán)境的切換。
4. 內(nèi)置river-mock和mockjs等mock引擎,提供mock數(shù)據(jù)非常方便。
5. 使用接口配置文件,對接口的依賴描述做統(tǒng)一的管理,避免散落在各個代碼之中。
6. 支持瀏覽器端共享Model,瀏覽器端可以使用它做前端數(shù)據(jù)渲染。整個代理過程對瀏覽器透明。
7. 接口配置文件本身是結(jié)構(gòu)化的描述文檔,可以使用river工具集合,自動生成文檔。也可使用它做相關(guān)自動化接口測試,使整個開發(fā)過程形成一個閉環(huán)。
ModelProxy工作原理圖及相關(guān)開發(fā)過程圖覽

在上圖中,開發(fā)者首先需要將工程項目中所有依賴的后端接口描述,按照指定的json格式,寫入interface.json配置文件。必要時,需要對每個接口編寫一個規(guī)則文件,也即圖中interface rules部分。該規(guī)則文件用于在開發(fā)階段mock數(shù)據(jù)或者在聯(lián)調(diào)階段使用River工具集去驗證接口。規(guī)則文件的內(nèi)容取決于采用哪一種mock引擎(比如 mockjs, river-mock 等等)。配置完成之后,即可在代碼中按照自己的需求創(chuàng)建自己的業(yè)務(wù)model。
下面是一個簡單的例子:
【例一】
第一步 在工程目錄中創(chuàng)建接口配置文件interface.json, 并在其中添加主搜接口json定義
復(fù)制代碼 代碼如下:
{
"title": "pad淘寶項目數(shù)據(jù)接口集合定義",
"version": "1.0.0",
"engine": "mockjs",
"rulebase": "./interfaceRules/",
"status": "online",
"interfaces": [ {
"name": "主搜索接口",
"id": "Search.getItems",
"urls": {
"online": "
}
} ]
}
第二步 在代碼中創(chuàng)建并使用model
復(fù)制代碼 代碼如下:
// 引入模塊
var ModelProxy = require( 'modelproxy' );
// 全局初始化引入接口配置文件 (注意:初始化工作有且只有一次)
ModelProxy.init( './interface.json' );
// 創(chuàng)建model 更多創(chuàng)建模式請參后文
var searchModel = new ModelProxy( {
searchItems: 'Search.getItems' // 自定義方法名: 配置文件中的定義的接口ID
} );
// 使用model, 注意: 調(diào)用方法所需要的參數(shù)即為實際接口所需要的參數(shù)。
searchModel.searchItems( { q: 'iphone6' } )
// !注意 必須調(diào)用 done 方法指定回調(diào)函數(shù),來取得上面異步調(diào)用searchItems獲得的數(shù)據(jù)!
.done( function( data ) {
console.log( data );
} )
.error( function( err ) {
console.log( err );
} );
ModelProxy的功能豐富性在于它支持各種形式的profile以創(chuàng)建需要業(yè)務(wù)model:
使用接口ID創(chuàng)建>生成的對象會取ID最后'.'號后面的單詞作為方法名
復(fù)制代碼 代碼如下:
ModelProxy.create( 'Search.getItem' );
使用鍵值JSON對象>自定義方法名: 接口ID
復(fù)制代碼 代碼如下:
ModelProxy.create( {
getName: 'Session.getUserName',
getMyCarts: 'Cart.getCarts'
} );
使用數(shù)組形式>取最后 . 號后面的單詞作為方法名
下例中生成的方法調(diào)用名依次為: Cart_getItem, getItem, suggest, getName
復(fù)制代碼 代碼如下:
ModelProxy.create( [ 'Cart.getItem', 'Search.getItem', 'Search.suggest', 'Session.User.getName' ] );
前綴形式>所有滿足前綴的接口ID會被引入對象,并取其后半部分作為方法名
復(fù)制代碼 代碼如下:
ModelProxy.create( 'Search.*' );
同時,使用這些Model,你可以很輕易地實現(xiàn)合并請求或者依賴請求,并做相關(guān)模板渲染
【例二】 合并請求
復(fù)制代碼 代碼如下:
var model = new ModelProxy( 'Search.*' );
// 合并請求 (下面調(diào)用的model方法除done之外,皆為配置接口id時指定)
model.suggest( { q: '女' } )
.list( { keyword: 'iphone6' } )
.getNav( { key: '流行服裝' } )
.done( function( data1, data2, data3 ) {
// 參數(shù)順序與方法調(diào)用順序一致
console.log( data1, data2, data3 );
} );
【例三】 依賴請求
復(fù)制代碼 代碼如下:
var model = new ModelProxy( {
getUser: 'Session.getUser',
getMyOrderList: 'Order.getOrder'
} );
// 先獲得用戶id,然后再根據(jù)id號獲得訂單列表
model.getUser( { sid: 'fdkaldjfgsakls0322yf8' } )
.done( function( data ) {
var uid = data.uid;
// 二次數(shù)據(jù)請求依賴第一次取得的id號
this.getMyOrderList( { id: uid } )
.done( function( data ) {
console.log( data );
} );
} );
此外ModelProxy不僅在Node端可以使用,也可以在瀏覽器端使用。只需要在頁面中引入官方包提供的modelproxy-client.js即可。
【例四】瀏覽器端使用ModelProxy
復(fù)制代碼 代碼如下:
<!-- 引入modelproxy模塊,該模塊本身是由KISSY封裝的標(biāo)準(zhǔn)模塊-->
<script src="modelproxy-client.js" ></script>
<script type="text/javascript">
KISSY.use( "modelproxy", function( S, ModelProxy ) {
// !配置基礎(chǔ)路徑,該路徑與第二步中配置的攔截路徑一致!
// 且全局配置有且只有一次!
ModelProxy.configBase( '/model/' );
// 創(chuàng)建model
var searchModel = ModelProxy.create( 'Search.*' );
searchModel
.list( { q: 'ihpone6' } )
.list( { q: '沖鋒衣' } )
.suggest( { q: 'i' } )
.getNav( { q: '滑板' } )
.done( function( data1, data2, data3, data4 ) {
console.log( {
"list_ihpone6": data1,
"list_沖鋒衣": data2,
"suggest_i": data3,
"getNav_滑板": data4
} );
} );
} );
</script>
同時,ModelProxy可以配合Midway另一核心組件Midway-XTPL一起使用,實現(xiàn)數(shù)據(jù)和模板以及相關(guān)渲染過程在瀏覽器端和服務(wù)器端的全共享。關(guān)于ModelProxy的詳細(xì)教程及文檔請移步https://github.com/purejs/modelproxy
總結(jié)
ModelProxy以一種配置化的輕量級框架存在,提供友好的接口model組裝及使用方式,同時很好的解決前后端開發(fā)模式分離中的接口使用規(guī)范問題。在整個項目開發(fā)過程中,接口始終只需要定義描述一次,前端開發(fā)人員即可引用,同時使用River工具自動生成文檔,形成與后端開發(fā)人員的契約,并做相關(guān)自動化測試,極大地優(yōu)化了整個軟件工程開發(fā)過程。
【注】River 是阿里集團研發(fā)的前后端統(tǒng)一接口規(guī)范及相關(guān)工具集合的統(tǒng)稱
相關(guān)文章
-
nodejs對mongodb數(shù)據(jù)庫的增加修刪該查實例代碼
在本篇文章里小編給大家整理的是一篇關(guān)于nodejs對mongodb數(shù)據(jù)庫的增加修刪該查實例代碼,有需要的朋友們可以參考下。 2020-01-01
-
nodejs 整合kindEditor實現(xiàn)圖片上傳
這篇文章主要介紹了nodejs 整合kindEditor實現(xiàn)圖片上傳,需要的朋友可以參考下 2015-02-02
-
Mongoose經(jīng)常返回e11000 error的原因分析
這篇文章主要給大家分析了Mongoose經(jīng)常返回e11000 error的原因,文中介紹的非常詳細(xì),對大家具有一定的參考價值,需要的朋友可以們下面來一起看看吧。 2017-03-03
最新評論
前言
使用Node做前后端分離的開發(fā)模式帶來了一些性能及開發(fā)流程上的優(yōu)勢, 但同時也面臨不少挑戰(zhàn)。在淘寶復(fù)雜的業(yè)務(wù)及技術(shù)架構(gòu)下,后端必須依賴Java搭建基礎(chǔ)架構(gòu),同時提供相關(guān)業(yè)務(wù)接口供前端使用。Node在整個環(huán)境中最重要的工作之一就是代理這些業(yè)務(wù)接口,以方便前端(Node端和瀏覽器端)整合數(shù)據(jù)做頁面渲染。如何做好代理工作,使得前后端開發(fā)分離之后,仍然可以在流程上無縫銜接,是我們需要考慮的問題。本文將就該問題做相關(guān)探討,并提出解決方案。
由于后端提供的接口方式可能多種多樣,同時開發(fā)人員在編寫Node端代碼訪問這些接口的方式也有可能多種多樣。如果我們在接口訪問方式及使用上不做統(tǒng)一架構(gòu)處理,則會帶來以下一些問題:
1. 每一個開發(fā)人員使用各自的代碼風(fēng)格編寫接口訪問代碼,造成工程目錄及編碼風(fēng)格混亂,維護相對困難。
2. 每一個開發(fā)人員編寫自己的mock數(shù)據(jù)方式,開發(fā)完畢之后,需要手工修改代碼移除mock。
3. 每一個開發(fā)人員為了實現(xiàn)接口的不同環(huán)境切換(日常,預(yù)發(fā),線上),可能各自維護了一些配置文件。
4. 數(shù)據(jù)接口調(diào)用方式無法被各個業(yè)務(wù)model非常方便地復(fù)用。
5. 對于數(shù)據(jù)接口的描述約定散落在代碼的各個角落,有可能跟后端人員約定的接口文檔不一致。
6. 整個項目分離開發(fā)之后,對于接口的聯(lián)調(diào)或者測試回歸成本依然很高,需要涉及到每一個接口提供者和使用者。
于是我們希望有這樣一個框架,通過該框架提供的機制去描述工程項目中依賴的所有外部接口,對他們進行統(tǒng)一管理,同時提供靈活的接口建模及調(diào)用方式,并且提供便捷的線上環(huán)境和生產(chǎn)環(huán)境切換方法,使前后端開發(fā)無縫結(jié)合。ModelProxy就是滿足這樣要求的輕量級框架,它是Midway Framework 核心構(gòu)件之一,也可以單獨使用。使用ModelProxy可以帶來如下優(yōu)點:
1. 不同的開發(fā)者對于接口訪問代碼編寫方式統(tǒng)一,含義清晰,降低維護難度。
2. 框架內(nèi)部采用工廠+單例模式,實現(xiàn)接口一次配置多次復(fù)用。并且開發(fā)者可以隨意定制組裝自己的業(yè)務(wù)Model(依賴注入)。
3. 可以非常方便地實現(xiàn)線上,日常,預(yù)發(fā)環(huán)境的切換。
4. 內(nèi)置river-mock和mockjs等mock引擎,提供mock數(shù)據(jù)非常方便。
5. 使用接口配置文件,對接口的依賴描述做統(tǒng)一的管理,避免散落在各個代碼之中。
6. 支持瀏覽器端共享Model,瀏覽器端可以使用它做前端數(shù)據(jù)渲染。整個代理過程對瀏覽器透明。
7. 接口配置文件本身是結(jié)構(gòu)化的描述文檔,可以使用river工具集合,自動生成文檔。也可使用它做相關(guān)自動化接口測試,使整個開發(fā)過程形成一個閉環(huán)。
ModelProxy工作原理圖及相關(guān)開發(fā)過程圖覽
在上圖中,開發(fā)者首先需要將工程項目中所有依賴的后端接口描述,按照指定的json格式,寫入interface.json配置文件。必要時,需要對每個接口編寫一個規(guī)則文件,也即圖中interface rules部分。該規(guī)則文件用于在開發(fā)階段mock數(shù)據(jù)或者在聯(lián)調(diào)階段使用River工具集去驗證接口。規(guī)則文件的內(nèi)容取決于采用哪一種mock引擎(比如 mockjs, river-mock 等等)。配置完成之后,即可在代碼中按照自己的需求創(chuàng)建自己的業(yè)務(wù)model。
下面是一個簡單的例子:
【例一】
第一步 在工程目錄中創(chuàng)建接口配置文件interface.json, 并在其中添加主搜接口json定義
{
"title": "pad淘寶項目數(shù)據(jù)接口集合定義",
"version": "1.0.0",
"engine": "mockjs",
"rulebase": "./interfaceRules/",
"status": "online",
"interfaces": [ {
"name": "主搜索接口",
"id": "Search.getItems",
"urls": {
"online": " }
} ]
}
第二步 在代碼中創(chuàng)建并使用model
// 引入模塊
var ModelProxy = require( 'modelproxy' );
// 全局初始化引入接口配置文件 (注意:初始化工作有且只有一次)
ModelProxy.init( './interface.json' );
// 創(chuàng)建model 更多創(chuàng)建模式請參后文
var searchModel = new ModelProxy( {
searchItems: 'Search.getItems' // 自定義方法名: 配置文件中的定義的接口ID
} );
// 使用model, 注意: 調(diào)用方法所需要的參數(shù)即為實際接口所需要的參數(shù)。
searchModel.searchItems( { q: 'iphone6' } )
// !注意 必須調(diào)用 done 方法指定回調(diào)函數(shù),來取得上面異步調(diào)用searchItems獲得的數(shù)據(jù)!
.done( function( data ) {
console.log( data );
} )
.error( function( err ) {
console.log( err );
} );
ModelProxy的功能豐富性在于它支持各種形式的profile以創(chuàng)建需要業(yè)務(wù)model:
使用接口ID創(chuàng)建>生成的對象會取ID最后'.'號后面的單詞作為方法名
ModelProxy.create( 'Search.getItem' );
使用鍵值JSON對象>自定義方法名: 接口ID
ModelProxy.create( {
getName: 'Session.getUserName',
getMyCarts: 'Cart.getCarts'
} );
使用數(shù)組形式>取最后 . 號后面的單詞作為方法名
下例中生成的方法調(diào)用名依次為: Cart_getItem, getItem, suggest, getName
ModelProxy.create( [ 'Cart.getItem', 'Search.getItem', 'Search.suggest', 'Session.User.getName' ] );
前綴形式>所有滿足前綴的接口ID會被引入對象,并取其后半部分作為方法名
ModelProxy.create( 'Search.*' );
同時,使用這些Model,你可以很輕易地實現(xiàn)合并請求或者依賴請求,并做相關(guān)模板渲染
【例二】 合并請求
var model = new ModelProxy( 'Search.*' );
// 合并請求 (下面調(diào)用的model方法除done之外,皆為配置接口id時指定)
model.suggest( { q: '女' } )
.list( { keyword: 'iphone6' } )
.getNav( { key: '流行服裝' } )
.done( function( data1, data2, data3 ) {
// 參數(shù)順序與方法調(diào)用順序一致
console.log( data1, data2, data3 );
} );
【例三】 依賴請求
var model = new ModelProxy( {
getUser: 'Session.getUser',
getMyOrderList: 'Order.getOrder'
} );
// 先獲得用戶id,然后再根據(jù)id號獲得訂單列表
model.getUser( { sid: 'fdkaldjfgsakls0322yf8' } )
.done( function( data ) {
var uid = data.uid;
// 二次數(shù)據(jù)請求依賴第一次取得的id號
this.getMyOrderList( { id: uid } )
.done( function( data ) {
console.log( data );
} );
} );
此外ModelProxy不僅在Node端可以使用,也可以在瀏覽器端使用。只需要在頁面中引入官方包提供的modelproxy-client.js即可。
【例四】瀏覽器端使用ModelProxy
<!-- 引入modelproxy模塊,該模塊本身是由KISSY封裝的標(biāo)準(zhǔn)模塊-->
<script src="modelproxy-client.js" ></script>
<script type="text/javascript">
KISSY.use( "modelproxy", function( S, ModelProxy ) {
// !配置基礎(chǔ)路徑,該路徑與第二步中配置的攔截路徑一致!
// 且全局配置有且只有一次!
ModelProxy.configBase( '/model/' );
// 創(chuàng)建model
var searchModel = ModelProxy.create( 'Search.*' );
searchModel
.list( { q: 'ihpone6' } )
.list( { q: '沖鋒衣' } )
.suggest( { q: 'i' } )
.getNav( { q: '滑板' } )
.done( function( data1, data2, data3, data4 ) {
console.log( {
"list_ihpone6": data1,
"list_沖鋒衣": data2,
"suggest_i": data3,
"getNav_滑板": data4
} );
} );
} );
</script>
同時,ModelProxy可以配合Midway另一核心組件Midway-XTPL一起使用,實現(xiàn)數(shù)據(jù)和模板以及相關(guān)渲染過程在瀏覽器端和服務(wù)器端的全共享。關(guān)于ModelProxy的詳細(xì)教程及文檔請移步https://github.com/purejs/modelproxy
總結(jié)
ModelProxy以一種配置化的輕量級框架存在,提供友好的接口model組裝及使用方式,同時很好的解決前后端開發(fā)模式分離中的接口使用規(guī)范問題。在整個項目開發(fā)過程中,接口始終只需要定義描述一次,前端開發(fā)人員即可引用,同時使用River工具自動生成文檔,形成與后端開發(fā)人員的契約,并做相關(guān)自動化測試,極大地優(yōu)化了整個軟件工程開發(fā)過程。
【注】River 是阿里集團研發(fā)的前后端統(tǒng)一接口規(guī)范及相關(guān)工具集合的統(tǒng)稱
相關(guān)文章
nodejs對mongodb數(shù)據(jù)庫的增加修刪該查實例代碼
在本篇文章里小編給大家整理的是一篇關(guān)于nodejs對mongodb數(shù)據(jù)庫的增加修刪該查實例代碼,有需要的朋友們可以參考下。2020-01-01nodejs 整合kindEditor實現(xiàn)圖片上傳
這篇文章主要介紹了nodejs 整合kindEditor實現(xiàn)圖片上傳,需要的朋友可以參考下2015-02-02Mongoose經(jīng)常返回e11000 error的原因分析
這篇文章主要給大家分析了Mongoose經(jīng)常返回e11000 error的原因,文中介紹的非常詳細(xì),對大家具有一定的參考價值,需要的朋友可以們下面來一起看看吧。2017-03-03