接口平台开发经验

原创 走火爱上鱼 随笔 实战经验 600阅读 2017-05-27 16:06:51 举报

最近在做一个我们公司对外接口的开放平台,就是其他和我们公司有业务交际的公司开发人员可以通过这个api开放平台来获取相应接口的信息,还可以在该平台对接口进行测试。下面就对我在开发中遇到的坑做一个总结。

1.跨域

跨域,这是一个所有前端开发都会遇到的问题。这次的接口平台本身在一个域名下,被测试的接口位于N个域名下面,那么跨域范围就必不可少了。
常见的解决跨域方法由前端用jsonp,后端配置cors这2种。

A.JSONP:兼容IE8+,只能get请求

这东西面试的时候我不知道被问了多少次了,可是一直对他模糊,就是知道有这个方法,但是如果要我自己去做就不知道该怎么下手,索性这次给他弄个明白。
jsonp——网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。
来打一个比方。比如你在本地新建一个文件夹,里面有一个index.html, 里面有一个getJson(),然后你去请求其他域名下,比如淘宝https://www.taobao.com下面刚好也有一个资源叫做a.json, 里面有一个getJson({data}),那么你就可以对data数据进行加工制作了。下面用代码来演示一遍。
html 代码

javascript 代码

上面的html里面就有一个getJson()的函数,然后在下面的js里面也有一个对应的函数,那么在html里面你会发现会弹出test1.js里面的数据。在实际开发中,如果你是用jq这种内裤的话只用把data : 'json' 改成 data : 'jsonp' 就能实现jsonp了,其他的事情 伟大的jq都会帮你完成。

B.CORS:兼容IE10+,允许发任何类型的请求

CORS——跨源资源分享(Cross-Origin Resource Sharing)的缩写。它是W3C标准,是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求,CORS允许任何类型的请求。
如果要开启CORS,前端什么都不用改,只要后台改配置,注意不同的后台配置CORS是不一样的
A.PHP后台CORS:
1、允许单个域名访问
指定某域名(http://client.runoob.com)跨域访问,则只需在http://server.runoob.com/server.php文件头部添加如下代码
header('Access-Control-Allow-Origin:http://client.runoob.com');
2、允许多个域名访问
指定多个域名(http://client1.runoob.com、http://client2.runoob.com等)跨域访问,则只需在http://server.runoob.com/server.php文件头部添加如下代码
$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';
$allow_origin = array(
'http://client1.runoob.com',
'http://client2.runoob.com'
);
if(in_array($origin, $allow_origin)){
header('Access-Control-Allow-Origin:'.$origin);
}
3、允许所有域名访问
允许所有域名访问则只需在http://server.runoob.com/server.php文件头部添加如下代码:
header('Access-Control-Allow-Origin:*');

A.JAVA后台CORS:
首先需要下载cors-filter-1.7.jar,java-property-utils-1.9.jar这两个jar包;
然后配置工程项目中web.xml文件,配置信息如下:
json 代码

好了,后台的兄弟配置好了,我们就能愉快地玩耍了。

2.JS字符串False转Boolean

这次需要用户自己输入参数,就会遇到让用户输入true这种布尔值,如果我们不对它做任何处理的话,那么接口会把它当做字符串来处理,这显然不是我们想要的结果。
先来看几段代码
javascript 代码

javascript 代码

不管是true字符串还是false字符串 都是true。我们需要把字符串布尔值转为为布尔值。

javascript 代码

上面用了js===的性质,当然也可以用正则获取字符串里面的内容判断,这种小细节的地方在处理接口时候还有很多,比如接口参数有中文如果后台没有处理的话 前端要用encodeURI()转码才行。

3.分享一段今天看到的神奇的js代码

javascript 代码

把上面这段代码复制到谷歌浏览器的控制台里面,你就会发现自己进入了一个神奇的世界,原文可以看这里从一行代码里面学点 JavaScript

4.这次用到了一个面包屑导航,记录一下。

html 代码

5.利用localStorage将静态资源注入客户端(减少304,移动端对提高页面性能很有用的)

javascript 代码

评论 ( 1 )
最新评论
我是小虫57 2017-07-19 17:21:31 1F

显示不出来,是怎么回事