建站
咨詢
售后
建站咨詢
新聞中心
本文將主要從AngularJS下Resource與RESTful 接口初探，和調(diào)試工具postman的使用介紹這兩個(gè)方面，和大家分享方便開(kāi)發(fā)與維護(hù)的技巧工具。如有不當(dāng)之處，還請(qǐng)交流指正。
為蘇尼特左等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及蘇尼特左網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、蘇尼特左網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
技巧1：減少開(kāi)發(fā)與運(yùn)維難度，AngularJS下Resource與RESTful 接口初探
現(xiàn)代的項(xiàng)目中前端頁(yè)面展現(xiàn)的數(shù)據(jù)多數(shù)是動(dòng)態(tài)變化的，展示數(shù)據(jù)會(huì)涉及到網(wǎng)絡(luò)請(qǐng)求，從后臺(tái)拿取數(shù)據(jù)，前端進(jìn)行展示。最初的是ajax 請(qǐng)求,它的步驟原理如下：
創(chuàng)建過(guò)程有如下步驟：
- 創(chuàng)建一個(gè)XMLHttpRequest 對(duì)象。(不同的瀏覽器，方法不一樣，可以檢查瀏覽器支持情況)
- 使用 XMLHttpRequest 對(duì)象的 open() 和 send() 方法，建立與服務(wù)器的鏈接并發(fā)送請(qǐng)求。
- 請(qǐng)求被發(fā)送到服務(wù)器時(shí)，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。就是回調(diào)函數(shù)。每當(dāng) readyState 改變時(shí)，就會(huì)觸發(fā) onreadystatechange 事件。
readyState(5個(gè)狀態(tài)) 屬性存有 XMLHttpRequest 的狀態(tài)信息。根據(jù)readyState和status的值，使用 XMLHttpRequest 對(duì)象的 responseText 或 responseXML 屬性，獲得來(lái)自服務(wù)器的響應(yīng)。
這個(gè)過(guò)程還是比較繁瑣，后來(lái)就出現(xiàn)了jQuery, 極大地簡(jiǎn)化了 JavaScript 編程。jQuery get() 和 post() 方法用于通過(guò) HTTP GET 或 POST 請(qǐng)求從服務(wù)器請(qǐng)求數(shù)據(jù),調(diào)用形式如:$.get(URL,callback) 或者$.post(URL,data,callback);
AngularJS是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。AngularJS有著諸多特性，最為核心的是：MVW(Model-View-Whatever)、模塊化、自動(dòng)化雙向數(shù)據(jù)綁定、語(yǔ)義化標(biāo)簽、依賴注入等等。而對(duì)于網(wǎng)絡(luò)請(qǐng)求，$http幾乎是所有ng開(kāi)發(fā)中，都會(huì)用到的服務(wù)。如果接口不是很多，直接使用$resource服務(wù)即可，但是對(duì)于很多的后端請(qǐng)求接口，那就很有必要使用ngResource服務(wù)。該服務(wù)創(chuàng)建資源對(duì)象的工廠，該資源對(duì)象允許你與RESTful服務(wù)端數(shù)據(jù)資源進(jìn)行交互。返回的資源對(duì)象擁有提供了高層行為的動(dòng)作方法，從而無(wú)需與底層的$http服務(wù)進(jìn)行交互。具體調(diào)用如下：
- $resource(url[, paramDefaults][, actions]);
返回一個(gè)資源“類”對(duì)象。該對(duì)象包含默認(rèn)資源動(dòng)作的方法，和可選的自定義的擴(kuò)展動(dòng)作。默認(rèn)集合包含以下動(dòng)作：
- { 'get': {method:'GET'}, 'save': {method:'POST'}, 'query': {method:'GET', isArray:true}, 'remove': {method:'DELETE'}, 'delete': {method:'DELETE'} };
在實(shí)際的項(xiàng)目開(kāi)發(fā)中還可以進(jìn)行自定義的拓展，例如：
- function resourceConfig($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'
- }
- };
- }
調(diào)用這些方法將以特定的http方法，目標(biāo)和參數(shù)調(diào)用ng.$http。數(shù)據(jù)從服務(wù)器返回后，該對(duì)象將是該資源類的一個(gè)實(shí)例。save，remove，delete動(dòng)作($前綴)可作為該對(duì)象的方法使用。這允許你很容易地對(duì)服務(wù)器端數(shù)據(jù)進(jìn)行CRUD操作，如：
- app.factory('Persons', ['$resource', function($resource) {
- return $resource('/person/:id', null, {
- update: { method:'PUT' }
- });
- }]);
現(xiàn)在可以在一個(gè)controller中獲取一個(gè)person 并更新：
- var person = Persons.get({ id: 3}),
- $id = person.id;
- person.content = 'yyy';
- Persons.update({ id:$id },person );
類對(duì)象或?qū)嵗龑?duì)象中的動(dòng)作方法可以用以下參數(shù)進(jìn)行調(diào)用：
- HTTP GET “類”動(dòng)作: Resource.action([parameters], [success], [error]) // eg:Person.update({id: xxx})；
- non-GET “類”動(dòng)作: Resource.action([parameters], postData, [success], [error])
- non-GET 實(shí)例動(dòng)作: instance.$action([parameters], [success], [error]) //eg:person.$update()
Success回調(diào)以(value, responseHeaders)參數(shù)調(diào)用。Error回調(diào)以(httpResponse)參數(shù)回調(diào)。
那么接下來(lái)問(wèn)題來(lái)了，什么是RESTful Api設(shè)計(jì)?
REST(表征性狀態(tài)傳輸，Representational State Transfer)是Roy Fielding博士在2000年他的博士論文中提出來(lái)的一種軟件架構(gòu)風(fēng)格。RESTful風(fēng)格的設(shè)計(jì)不僅具有更好的可讀性(Human Readable)，而且易于做緩存以及服務(wù)器擴(kuò)展。REST風(fēng)格體現(xiàn)在URL設(shè)計(jì)上：
- 每個(gè)URL對(duì)應(yīng)一個(gè)資源
- 對(duì)資源的不同操作對(duì)應(yīng)于HTTP的不同方法
- 資源表現(xiàn)形式(representation)通過(guò)Accept和Content-Type指定
對(duì)資源的操作有如下：
- GET(SELECT)：從服務(wù)器取出資源(一項(xiàng)或多項(xiàng))。
- POST(CREATE)：在服務(wù)器新建一個(gè)資源。
- PUT(UPDATE)：在服務(wù)器更新資源(客戶端提供改變后的完整資源)。
- PATCH(UPDATE)：在服務(wù)器更新資源(客戶端提供改變的屬性)。
- DELETE(DELETE)：從服務(wù)器刪除資源。
綜上所述，個(gè)人以為無(wú)論是ngresouce的使用還是Restful api 設(shè)計(jì)風(fēng)格的使用，目的就是提高復(fù)用性，資源請(qǐng)求統(tǒng)一配置處理，提高代碼可讀性與服務(wù)的拓展性，減少開(kāi)發(fā)與運(yùn)維難度。
技巧2：跟蹤網(wǎng)頁(yè)請(qǐng)求，用好調(diào)試工具postman
用戶在開(kāi)發(fā)或者調(diào)試網(wǎng)絡(luò)程序，需要一些方法來(lái)跟蹤網(wǎng)頁(yè)請(qǐng)求，Postman在發(fā)送網(wǎng)絡(luò)HTTP請(qǐng)求方面可以說(shuō)是Chrome插件類產(chǎn)品中的代表產(chǎn)品之一,使用十分方便，如下是其主界面 ：
這里著重說(shuō)明下post 方法的使用：
請(qǐng)求頭是根據(jù)請(qǐng)求參數(shù)的形式自動(dòng)生成的，請(qǐng)求頭中的Content-Type與請(qǐng)求參數(shù)的格式之間有關(guān)聯(lián)關(guān)系，比如：
(1)表單提交 form-data,x-www-form-urlencoded
(2)json,xml 等提交,可以在右邊設(shè)置請(qǐng)求頭屬性
(3)二進(jìn)制文件提交
有時(shí)候?qū)懡涌谖臋n需要使用到curl語(yǔ)句，或者要求有莫種語(yǔ)言的示例等，Postman也提供了相應(yīng)的支持，如下：
選擇面板中標(biāo)的12 后會(huì)出現(xiàn)這個(gè)面板，其中包含了C 、C# 、Java、 Go 、Python 等主流編程和腳本語(yǔ)言，十分方便。
其他的功能不在此一一列舉,更多有關(guān)提高開(kāi)發(fā)效率,與開(kāi)發(fā)調(diào)試技巧歡迎關(guān)注達(dá)觀數(shù)據(jù)多多交流。
參考資料：
http://www.ruanyifeng.com/blog/2014/05/restful_api.html
https://learning.getpostman.com/getting-started/
作者簡(jiǎn)介
郭權(quán)：達(dá)觀數(shù)據(jù)Web前端工程師，負(fù)責(zé)達(dá)觀數(shù)據(jù)前端產(chǎn)品的開(kāi)發(fā)、維護(hù)、優(yōu)化，升級(jí)等具體工作。對(duì)數(shù)據(jù)的展示形式，后端數(shù)據(jù)交互處理有一定的研究和濃厚的興趣。
【本文為專欄作者“達(dá)觀數(shù)據(jù)”的原創(chuàng)稿件，轉(zhuǎn)載可通過(guò)專欄獲取聯(lián)系】
當(dāng)前標(biāo)題：達(dá)觀數(shù)據(jù)：用好ngResource和postman，提高你的開(kāi)發(fā)調(diào)試效率
本文地址：http://m.5511xx.com/article/cdsgpeo.html
