当前位置: 首页 > 科技观察

大观数据:善用ngResource和postman,提高你的开发调试效率

时间:2023-03-14 15:22:54 科技观察

本文将主要探讨AngularJS下的Resource和RESTful接口,并介绍调试工具postman的使用,与大家分享便捷的开发和维护技能工具。如有不妥,欢迎交流指正。技巧一:降低开发运维难度,探索AngularJS下的Resource和RESTful接口现代项目前端页面展示的数据大多是动态变化的,展示数据会涉及到网络请求,从中获取数据背景,并将其显示在前端。最初的一个是ajax请求,其步骤如下:创建过程有以下步骤:创建一个XMLHttpRequest对象。(不同的浏览器有不同的方法,可以查看浏览器支持)使用XMLHttpRequest对象的open()和send()方法与服务器建立连接并发送请求。当向服务器发送请求时,我们需要根据响应执行一些任务。它是回调函数。每当readyState发生变化时,都会触发onreadystatechange事件。readyState(5个状态)属性存储了XMLHttpRequest的状态信息。根据readyState和status的值,使用XMLHttpRequest对象的responseText或responseXML属性从服务器获取响应。这个过程还是比较繁琐的,后来jQuery出现了,大大简化了JavaScript编程。jQueryget()和post()方法用于通过HTTPGET或POST请求从服务器请求数据。调用形式为:$.get(URL,callback)或$.post(URL,data,callback);AngularJS是一个优秀的前端JS框架,已经被谷歌的很多产品所采用。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},'删除':{方法:'DELETE'},'删除':{方法:'DELETE'}};在实际项目开发中,也可以进行自定义扩展,例如:functionresourceConfig($resourceProvider){$resourceProvider.defaults.actions={saveArray:{method:'POST',isArray:true},modify:{method:'PATCH'},创建:{method:'POST'},保存:{method:'POST'},获取:{method:'GET'},查询:{method:'GET',isArray:true},更新:{method:'PUT'},delete:{method:'DELETE'},verify:{method:'POST'}};}调用这些方法将使用指定的http方法、目标和参数调用ng.$http。从服务器返回数据后,该对象将是资源类的一个实例。保存、删除、删除操作($前缀)可用作此对象的方法。这使您可以轻松地对服务器端数据执行CRUD操作,例如:app.factory('Persons',['$resource',function($resource){return$resource('/person/:id',null,{更新:{方法:'PUT'}});}]);现在你可以在控制器中获取一个人并更新:varperson=Persons.get({id:3}),$id=person.id;person.content='yyy';Persons.update({id:$id},person);可以使用以下参数调用类对象或实例对象中的操作方法:HTTPGET"class"action:Resource.action([parameters],[success],[error])//eg:Person.update({id:xxx});非GET“类”操作:Resource.action([parameters],postData,[success],[error])非GET实例操作:instance.$action([parameters],[success],[error])//eg:person.$update()使用(value,responseHeaders)参数调用成功回调。带有(httpResponse)参数回调的错误回调。那么下一个问题来了,什么是RESTfulApi设计?REST(RepresentationalStateTransfer,具象状态传输)是RoyFielding博士在2000年的博士论文中提出的一种软件架构风格。RESTful风格的设计不仅具有更好的可读性(HumanReadable),而且易于做缓存和服务器扩展。REST风格体现在URL设计上:每个URL对应一个资源。对资源的不同操作对应HTTP的不同方法。资源表示(representation)由Accept和Content-Type指定。对资源的操作如下:GET(SELECT):从服务器获取资源。POST(CREATE):在服务器上创建一个新资源。PUT(UPDATE):更新服务器上的资源(客户端提供改变后的完整资源)。PATCH(UPDATE):更新服务器上的资源(客户端提供更改的属性)。删除(DELETE):从服务器中删除一个资源。总结一下,个人认为无论是使用ngresouce还是使用RestfulAPI设计风格,目的都是为了提高复用性,统一配置和处理资源请求,提高代码可读性和服务扩展性,减少开发和运维困难。.技巧二:跟踪网页请求,善用调试工具postman。用户在开发或调试网络程序时,需要一些方法来跟踪网页请求。Postman可以说是Chrome插件产品在发送网络HTTP请求方面的代表产品之一。使用起来非常方便,如下是它的主要界面:这里重点介绍post方法的使用:请求头是根据请求参数的形式自动生成的,与Content-Type中的有关系请求头和请求参数的格式,例如:(1)Form提交form-data,x-www-form-urlencoded(2)json,xml等提交,可以在右侧设置请求头属性(3)二进制文件提交有时候需要使用curl语句来编写接口文件,或者Postman也提供了相应的支持,如下:在面板中选择12就会出现这个面板,其中包括主流的编程和脚本语言等为C、C#、Java、Go、Python等方便。其他功能这里就不一一列举了。更多提高开发效率和开发调试技巧,欢迎关注大观数据,更多交流。参考资料:http://www.ruanyifeng.com/blog/2014/05/restful_api.htmlhttps://learning.getpostman.com/getting-started/作者简介郭泉:大观数据Web前端工程师,负责大观数据前端产品开发、维护、优化、升级等具体工作。对数据的展示形式和后端数据的交互处理有一定的研究和浓厚的兴趣。【本文为专栏作者“大观数据”原创稿件,如需转载可通过专栏取得联系】点此查看该作者更多好文