達觀資料：用好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' }
});
}]);
現在可以在一個controller中獲取一個person 並更新：
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與請求引數的格式之間是有關聯關係，比如：
post引數格式
Content-Type
引數示例
表單提交
application/x-www-form-urlencoded
username=root&password=123
json提交
application/json
{"username":"root","password":"123"}
xml提交
text/xml
<?xml version="1.0" encoding="utf-8"?>
1.表單提交form-data,x-www-form-urlencoded
2.json,xml 等提交,可以在右邊設定請求頭屬性
3.二進位制檔案提交
有時候寫介面文件需要使用到curl語句,或者要求有莫種語言的示例等,Postman也提供了相應的支援.如下:
選擇面板中標的12 後會出現這個面板,其中包含了C 、C# 、Java、 Go 、Python 等主流程式設計和指令碼語言，十分方便。
其他的功能不在此一一列舉,更多有關提高開發效率,與開發除錯技巧歡迎關注達觀資料多多交流。
參考資料
RESTful API 設計指南 www.ruanyifeng.com
Getting Started | Postman Learning Center learning.getpostman.com
關於作者
郭權： 達觀資料web前端工程師，負責達觀資料前端產品的開發、維護、優化，升級等具體工作。對資料的展示形式,後端資料互動處理有一定的研究和濃厚的興趣。