達觀數據郭權：用好ngResource和postman，提升你的開發調試效率

本文將主要從angularjs下Resource與RESTful 接口初探，和調試工具postman的使用介紹這兩個方面，和你們分享方便開發與維護的技巧工具。若有不當之處，還請交流指正。

技巧１：減小開發與運維難度，angularjs下Resource與RESTful 接口初探

現代的項目中前端頁面展示的數據多數是動態變化的，展現數據會涉及到網絡請求，從後臺拿取數據，前端進行展現。最初的是ajax 請求,它的步驟原理以下：

建立過程以下步驟：

1.建立一個XMLHttpRequest對象。（不一樣的瀏覽器，方法不同，能夠檢查瀏覽器支持狀況）
2.使用 XMLHttpRequest 對象的 open() 和 send() 方法，創建與服務器的連接併發送請求。
3.請求被髮送到服務器時，咱們須要執行一些基於響應的任務。就是回調函數。每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState（5個狀態) 屬性存有 XMLHttpRequest 的狀態信息。根據readyState和status的值，使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性，得到來自服務器的響應。

這個過程仍是比較繁瑣,後來就出現了jQuery, 極大地簡化了JavaScript 編程.jQueryget() 和 post() 方法用於經過 HTTP GET 或 POST 請求從服務器請求數據,調用形式如：$.get(URL,callback) 或者$.post(URL,data,callback);

angularjs是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最爲核心的是：MVW（Model-View-Whatever）、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。而對於網絡請求，$http幾乎是全部ng開發中,都會用到的服務. 若是接口不是不少，直接使用$resource服務便可，可是對於不少的後端請求接口，那就頗有必要使用ngResource服務.該服務建立資源對象的工廠，該資源對象容許你與RESTful服務端數據資源進行交互。返回的資源對象擁有提供了高層行爲的動做方法，從而無需與底層的$http服務進行交互。具體調用以下：

$resource(url[,paramDefaults][, actions]);

返回一個資源「類」對象。該對象包含默認資源動做的方法，和可選的自定義的擴展動做。默認集合包含如下動做：

{ 'get': {method:'GET'},'save': {method:'POST'}, 'query': {method:'GET', isArray:true}, 'remove': {method:'DELETE'}, 'delete':{method:'DELETE'} };

在實際的項目開發中還能夠進行自定義的拓展，例如：

functionresourceConfig($resourceProvider) {

$resourceProvider.defaults.actions= {

 saveArray: {

 method: 'POST',

 isArray: true

 },

 modify: {

 method: 'PATCH'

 },

 create: {

 method: 'POST'

 },

 save: {

 method: 'POST'

 },

 get: {

 method: 'GET'

 },

 query: {

 method: 'GET',

 isArray: true

 },

 update: {

 method: 'PUT'

 },

 delete: {

 method: 'DELETE'

 },

 verify: {

 method: 'POST'

 }

 };

}

調用這些方法將以特定的http方法,目標和參數調用ng.$http。數據從服務器返回後，該對象將是該資源類的一個實例。save，remove，delete動做（$前綴）可做爲該對象的方法使用。這容許你很容易地對服務器端數據進行CRUD操做，如：

app.factory('Persons',['$resource', function($resource) {

return$resource('/person/:id', null, {

update: { method:'PUT' }

});

}]); 

var person =Persons.get({ id: 3}),

$id = person.id;

person.content = 'yyy';

Persons.update({ id:$id},person );

類對象或實例對象中的動做方法能夠用如下參數進行調用：

HTTP GET 「類」動做:Resource.action([parameters], [success], [error])  //
eg:Person.update({id: xxx})；

non-GET 「類」動做:Resource.action([parameters], postData, [success],
[error])

non-GET 實例動做: instance.$action([parameters],[success], [error])
//eg:person.$update()

Success回調以(value, responseHeaders)參數調用。Error回調以(httpResponse)參數回調。

那麼接下來問題來了，什麼是RESTful Api設計？

REST（表徵性狀態傳輸，Representational State Transfer）是RoyFielding博士在2000年他的博士論文中提出來的一種軟件架構風格。RESTful風格的設計不只具備更好的可讀性（Human Readable），並且易於作緩存以及服務器擴展。REST風格體如今URL設計上：

每一個URL對應一個資源

對資源的不一樣操做對應於HTTP的不一樣方法

資源表現形式（representation）經過Accept和Content-Type指定

對資源的操做有以下：

GET（SELECT）：從服務器取出資源（一項或多項）。

POST（CREATE）：在服務器新建一個資源。

PUT（UPDATE）：在服務器更新資源（客戶端提供改變後的完整資源）。

PATCH（UPDATE）：在服務器更新資源（客戶端提供改變的屬性）。

DELETE（DELETE）：從服務器刪除資源。

綜上所述,我的覺得不管是ngresouce的使用仍是Restful api 設計風格的使用，目的就是提升複用性，資源請求統一配置處理，提升代碼可讀性與服務的拓展性，減小開發與運維難度。

技巧2：跟蹤網頁請求，用好調試工具postman

用戶在開發或者調試網絡程序,須要一些方法來跟蹤網頁請求,Postman在發送網絡HTTP請求方面能夠說是Chrome插件類產品中的表明產品之一,使用十分方便,以下是其主界面 :

這裏着重說明下post 方法的使用:

請求頭是根據請求參數的形式自動生成的,

請求頭中的Content-Type與請求參數的格式之間是有關聯關係，好比：

1.表單提交form-data,x-www-form-urlencoded

2.json,xml 等提交,能夠在右邊設置請求頭屬性

 

3.二進制文件提交

有時候寫接口文檔須要使用到curl語句,或者要求有莫種語言的示例等,Postman也提供了相應的支持.以下:

選擇面板中標的12 後會出現這個面板,其中包含了C 、C# 、Java、 Go 、Python 等主流編程和腳本語言,十分方便.

其餘的功能不在此一一列舉,更多有關提升開發效率,與開發調試技巧歡迎關注達觀數據多多交流。

參考資料：
1.  http://www.ruanyifeng.com/blo...

2.https://learning.getpostman.c...

關於做者

郭權：達觀數據web前端工程師，負責達觀數據前端產品的開發、維護、優化，升級等具體工做。對數據的展現形式,後端數據交互處理有必定的研究和濃厚的興趣。