找回密码
当前位置：前端开发者 > 教程 > 正文

WEB接口平台开发经验

2018-10-14 分类：教程 阅读(610) 评论(0)

前端开发的表格模板 前端开发 template模板 前端开发离职证明模板

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 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Document</title>
</head>
<body>
    <script>
        var getJson = function (data) {
            alert(‘我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：’ + data.result);
        };
    </script>
    <script src=”test1.js”></script>
</body>
</html>

javascript 代码

getJson({“result”:”我是远程js带来的数据”});

上面的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 代码

<filter>
    <filter-name>CORS</filter-name>
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
    <init-param>
        <param-name>cors.allowOrigin</param-name>
        <param-value>*</param-value>
    </init-param>
    <init-param>
        <param-name>cors.supportedMethods</param-name>
        <param-value>GET, POST, HEAD, PUT, DELETE</param-value>
    </init-param>
    <init-param>
        <param-name>cors.supportedHeaders</param-name>
        <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
    </init-param>
    <init-param>
        <param-name>cors.exposedHeaders</param-name>
        <param-value>Set-Cookie</param-value>
    </init-param>
    <init-param>
        <param-name>cors.supportsCredentials</param-name>
        <param-value>true</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>CORS</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

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

2.js字符串False转Boolean

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

var hasAuth = ‘true’
if (hasAuth) {
    console.log(1)
}

javascript 代码

var hasAuth = ‘false’
if (hasAuth) {
    console.log(1)
}

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

javascript 代码

console.log(‘false’ === ‘true’)
console.log(‘true’ === ‘true’)

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

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

javascript 代码

;[].forEach.call($$(‘*’), function(a) {
    a.style.outline = ‘1px solid #’ + (~~(Math.random() * (1 << 24))).toString(16)
})
把上面这段代码复制到谷歌浏览器的控制台里面，你就会发现自己进入了一个神奇的世界，原文可以看这里从一行代码里面学点 JavaScript

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

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>ajax</title>
    <style type=”text/css”>
        * {
            padding: 0;
            margin: 0;
        }
        .nav-box {
            padding: 20px;
        }
        .nav-box .nav-item {
            float: left;
            margin-left: 20px;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            position: relative;
            background: #3498db;
            color: #fff;
            font-size: 20px;
            padding-left: 20px;
            text-decoration: none;
        }
        .nav-box .nav-item:before {
            content: ”;
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            border-left: 20px solid #fff;
            border-bottom: 20px solid transparent;
        }
        .nav-box .nav-item:after {
            content: ”;
            position: absolute;
            right: -20px;
            top: 0;
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            border-left: 20px solid #3498db;
            border-bottom: 20px solid transparent;
        }
        .nav-box .nav-item:first-child:before {
            left: 20px;
            border-left: 20px solid #3498db;
        }
        .nav-box .nav-item:first-child {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        .nav-box .nav-item:last-child:after {
            right: 0;
            border-right: 0 solid #3498db;
        }
        .nav-box .nav-item:last-child {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }
    </style>
</head>
<body>
    <div class=”nav-box”>
        <a href=”javascript:;” class=”nav-item”>HOME</a>
        <a href=”javascript:;” class=”nav-item”>DREAM</a>
        <a href=”javascript:;” class=”nav-item”>FUTURE</a>
        <a href=”javascript:;” class=”nav-item”>TOP</a>
    </div>
</body>
</html>

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

javascript 代码

;(function(w) {
    var lstorage = window.localStorage
    function lsFile(url) {
        this.url = url
        this.filename = url.substring(
            url.lastIndexOf(‘/’) + 1,
            url.lastIndexOf(‘.’),
        )
        this.lname =
            ‘Lsf_’ + this.filename + ‘_’ + url.substring(url.lastIndexOf(‘?’) + 1)
        this.filetext = null
        this.init()
    }
    lsFile.prototype = {
        init: function() {
            // 判断是否无痕模式或者浏览器是否支持ls
            if (commonMthods.storageTest(window.localStorage)) {
                this.filetext = lstorage.getItem(this.lname)
            }
            if (this.filetext) {
                alert(1)
                this.eval(this.filetext)
            } else {
                alert(2)
                this.xhr(this.url, this.runstr)
            }
        },
        xhr: function(url, callback) {
            var _this = this,
                version = url.substring(url.lastIndexOf(‘?’)),
                xhr = new XMLHttpRequest()
            xhr.onreadystatechange = function() {
                switch (xhr.readyState) {
                    case 4:
                        if (xhr.status == 200) {
                            var filetext = xhr.responseText
                            if (callback) {
                                callback.call(_this, filetext)
                            }
                        } else {
                            alert(‘加载失败’)
                        }
                        break
                    default:
                        break
                }
            }
            xhr.open(‘GET’, url, false)
            xhr.send()
        },
        runstr: function(filetext) {
            this.eval(filetext)
            lstorage.setItem(this.lname, filetext)
            this.removels()
        },
        removels: function() {
            var arr = []
            for (var i = 0; i < lstorage.length; i++) {
                var name = lstorage.key(i)
                if (name.indexOf(this.filename) > -1 && name != this.lname) {
                    arr.push(name)
                }
            }
            for (var i in arr) {
                localStorage.removeItem(arr[i])
            }
        },
        eval: function(filetext) {
            window.eval(filetext)
        },
    }
    w.lsFile = function(url) {
        return new lsFile(url)
    }
})(window)
lsFile(‘/m-js/lib/vue.min.js’)

快速开发前端模板工具 开发前端模板引擎 web 前端开发模板

赞(0)
前端开发者 » WEB接口平台开发经验
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论