达观数据郭权：用好ngResource和postman，提高你的开发调试效率

本文将主要从angularjs下Resource与RESTful 接口初探&＃xff0c;和调试工具postman的使用介绍这两个方面&＃xff0c;和大家分享方便开发与维护的技巧工具。如有不当之处&＃xff0c;还请交流指正。
图片描述

技巧&＃xff11;&＃xff1a;减少开发与运维难度&＃xff0c;angularjs下Resource与RESTful 接口初探

现代的项目中前端页面展现的数据多数是动态变化的&＃xff0c;展示数据会涉及到网络请求&＃xff0c;从后台拿取数据&＃xff0c;前端进行展示。最初的是ajax 请求,它的步骤原理如下&＃xff1a;

图片描述

创建过程如下步骤&＃xff1a;

1.创建一个XMLHttpRequest对象。&＃xff08;不同的浏览器&＃xff0c;方法不一样&＃xff0c;可以检查浏览器支持情况&＃xff09;
2.使用 XMLHttpRequest 对象的 open() 和 send() 方法&＃xff0c;建立与服务器的链接并发送请求。
3.请求被发送到服务器时&＃xff0c;我们需要执行一些基于响应的任务。就是回调函数。每当 readyState 改变时&＃xff0c;就会触发 onreadystatechange 事件。

readyState&＃xff08;5个状态) 属性存有 XMLHttpRequest 的状态信息。根据readyState和status的值&＃xff0c;使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性&＃xff0c;获得来自服务器的响应。

这个过程还是比较繁琐,后来就出现了jQuery, 极大地简化了Javascript 编程.jQueryget() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据,调用形式如&＃xff1a;$.get(URL,callback) 或者$.post(URL,data,callback);

angularjs是一款优秀的前端JS框架&＃xff0c;已经被用于Google的多款产品当中。AngularJS有着诸多特性&＃xff0c;最为核心的是&＃xff1a;MVW&＃xff08;Model-View-Whatever&＃xff09;、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。而对于网络请求&＃xff0c;$http几乎是所有ng开发中,都会用到的服务. 如果接口不是很多&＃xff0c;直接使用$resource服务即可&＃xff0c;但是对于很多的后端请求接口&＃xff0c;那就很有必要使用ngResource服务.该服务创建资源对象的工厂&＃xff0c;该资源对象允许你与RESTful服务端数据资源进行交互。返回的资源对象拥有提供了高层行为的动作方法&＃xff0c;从而无需与底层的$http服务进行交互。具体调用如下&＃xff1a;

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

返回一个资源“类”对象。该对象包含默认资源动作的方法&＃xff0c;和可选的自定义的扩展动作。默认集合包含以下动作&＃xff1a;

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

在实际的项目开发中还可以进行自定义的拓展&＃xff0c;例如&＃xff1a;

functionresourceConfig($resourceProvider) {$resourceProvider.defaults.actions&＃61; {saveArray: {method: &＃39;POST&＃39;,isArray: true},modify: {method: &＃39;PATCH&＃39;},create: {method: &＃39;POST&＃39;},save: {method: &＃39;POST&＃39;},get: {method: &＃39;GET&＃39;},query: {method: &＃39;GET&＃39;,isArray: true},update: {method: &＃39;PUT&＃39;},delete: {method: &＃39;DELETE&＃39;},verify: {method: &＃39;POST&＃39;}};}

调用这些方法将以特定的http方法,目标和参数调用ng.$http。数据从服务器返回后&＃xff0c;该对象将是该资源类的一个实例。save&＃xff0c;remove&＃xff0c;delete动作&＃xff08;$前缀&＃xff09;可作为该对象的方法使用。这允许你很容易地对服务器端数据进行CRUD操作&＃xff0c;如&＃xff1a;

app.factory(&＃39;Persons&＃39;,[&＃39;$resource&＃39;, function($resource) {return$resource(&＃39;/person/:id&＃39;, null, {update: { method:&＃39;PUT&＃39; }});}]); var person &＃61;Persons.get({ id: 3}),$id &＃61; person.id;person.content &＃61; &＃39;yyy&＃39;;Persons.update({ id:$id},person );

类对象或实例对象中的动作方法可以用以下参数进行调用&＃xff1a;

HTTP GET “类”动作:Resource.action([parameters], [success], [error]) //
eg:Person.update({id: xxx})&＃xff1b;
non-GET “类”动作:Resource.action([parameters], postData, [success],
[error])

non-GET 实例动作: instance.$action([parameters],[success], [error])
//eg:person.$update()

Success回调以(value, responseHeaders)参数调用。Error回调以(httpResponse)参数回调。

那么接下来问题来了&＃xff0c;什么是RESTful Api设计&＃xff1f;

REST&＃xff08;表征性状态传输&＃xff0c;Representational State Transfer&＃xff09;是RoyFielding博士在2000年他的博士论文中提出来的一种软件架构风格。RESTful风格的设计不仅具有更好的可读性&＃xff08;Human Readable&＃xff09;&＃xff0c;而且易于做缓存以及服务器扩展。REST风格体现在URL设计上&＃xff1a;