素材牛VIP会员

Web开发 项目 前后端分离 接口域名地址 优化

 浏览:376次-  评论:1次-  发布时间:2017-12-03
    Html
    Css
    Js
↑上面代码改变,会自动显示代码结果
jQuery调用版本:1.11.3
素材牛VIP永久特权
积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
代码描述:在Web、APP、微信等网站开发过程中,当项目要进行前后端分离的时候,前后端的数据交互几乎都是调接口,目前用 XMLHttpRequest (Ajax 局部刷新技术 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新 jQuery插件封装了$.ajax方法很方面) 或者 HTML5中 websocket API (实时用迅技术 当浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。

概述:

在Web、APP、微信等网站开发过程中,当项目要进行前后端分离的时候,前后端的数据交互几乎都是调接口,目前用 XMLHttpRequest (Ajax 局部刷新技术 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新 *jQuery插件封装了$.ajax方法很方面*),  或者 HTML5中 websocket API (实时用迅技术 当浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以实时的进行数据互相传送) 这两种数据传输方法比较常用。

问题:

但是在做项目时调用接口域名的地方很多,小项目可能就几十个,大的项目就上百或上千之多,再加上项目一般都会有开发环境,测试环境,正式环境共三套环境中,如果是写死的接口域名,那提么这时你可能就要哭了!哈哈,没事慢慢改吧!好了,开个玩笑!

解决办法:

办法1、将接口域名做成JS格式 或 JSON格式的配置文件,如JS格式:xxx.js文件,内容如下:

const net = {
    "dev""http://www.xxxhddevxxxxxx.com",
    "test""http://www.xxxhdtestxxxxxx.com",
    "for""http://www.xxxhdforxxxxxx.com"
}

一般项目都有全局公共的js文件(如public.js 没有就新建一个吧,每个页面都加载进去就OK了),然后将上面的xxx.js文件载入到这个公共的public.js文件中来(方法很多:如每个页面都把xxx.js加载进去【注意顺序,要放在公共public.js之前】,或者Ajax,【$.getscript()、$.getjson()】方法等等)来获取到上面所配置好将接口域名的内容。

思路:

此时在这个公共的public.js文件中用一个全局常量或变量(建议用常量,因为常量是一经建立就不要随意修改,即便是要改也是一改全改),再根据通过判断各个环境的当前域名来赋予对应的接口域名即可,!

代码如下:

新建方式: const (是ES6中的常量), var (是ES5中的变量,ES5中没有常量关键字) 这两个都可以,这里就用 ES6 中的 const吧

const HD = null//后端接口域名
var DOMAIN = document.domain || window.location.host;  //当前域名
switch(DOMAIN) {
    case 'http://xxxqddevxxx.com':
        HD = net.dev;
        break;
    case 'http://xxxqdtestxxx.com':
        HD = net.test;
        break;
    case 'http://xxxqdforxxx.com':
        HD = net.for;
        break;
}

办法2、直接将接口域名写在公共的public.js文件中,并做判断和赋值对应的接口域名(这样就不用向上面那样去调用外部的xxx.js文件了)

代码如下:

新建方式: const (是ES6中的常量), var (是ES5中的变量,ES5中没有常量关键字) 这两个都可以,这里就用 ES6 中的 const吧

const QD = null//前端接口域名
const HD = null//后端接口域名
var DOMAIN = document.domain || window.location.host;  //当前域名
switch(DOMAIN) {
    case 'http://xxxqddevxxx.com':
        QD = 'http://xxxqddevxxx.com';
       HD = 'http://xxxhddevxxx.com';
       break;
    case 'http://xxxqdtestxxx.com':
       QD = 'http://xxxqdtestxxx.com';
       HD = 'http://xxxhdtestxxx.com';
       break;
    case 'http://xxxqdforxxx.com':
       QD = 'http://xxxqdforxxx.com';
       HD = 'http://xxxhdforxxx.com';
       break;
}

然后就可以根据项目在当前所在的域名下,直接调用:

  • alert(QD) //前端接口域名

  • alert(HD) //前端接口域名

以上是我个的项目心得,和各们朋友们一起分享,如有更好的方法,希望多指教!

讨论这个常用代码(1)回答他人问题或分享心得会奖励牛币

华***n
2017年12月04日

不错,学习了 感谢分享

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的积分余额:0 已下载次数:376
所需牛币:5 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)