達觀動態

達觀愿與業內同行分享 助力各企業在大數據浪潮來臨之際一起破浪前行

達觀數據:用好ngResource和postman,提高你的開發調試效率

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

?0

技巧1:減少開發與運維難度,angularjs下Resource與RESTful 接口初探

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

q

?

創建過程如下步驟:

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)通過AcceptContent-Type指定

     

對資源的操作有如下:

  • GET(SELECT):從服務器取出資源(一項或多項)。

  • POST(CREATE):在服務器新建一個資源。

  • PUT(UPDATE):在服務器更新資源(客戶端提供改變后的完整資源)。

  • PATCH(UPDATE):在服務器更新資源(客戶端提供改變的屬性)。

  • DELETE(DELETE):從服務器刪除資源。

     

綜上所述,個人以為無論是ngresouce的使用還是Restful api?設計風格的使用,目的就是提高復用性,資源請求統一配置處理,提高代碼可讀性與服務的拓展性,減少開發與運維難度。

?

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

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

w

這里著重說明下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

e

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

r

3.二進制文件提交

?t

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

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

y

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

?

參考資料:

1.?http://www.ruanyifeng.com/blog/2014/05/restful_api.html

2.https://learning.getpostman.com/getting-started/

?

A

BOUT

關于作者

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