根据浏览器访问页面获取Ip

获取IP,并存储的步骤:

1.通过浏览器的ip获取方法采用第三方的搜狐IP查询,使用方法如下:

  • 在根据情况引入js文件,一般在根目录下的index,html中进行引入(public====》index.html)

     <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>

  • 获取数据

    <script type="text/javascript">

          sessionStorage.setItem(‘ip‘,returnCitySN["cip"]);

          sessionStorage.setItem(‘cname‘,returnCitySN[‘cname‘])

    </script>

2.在对应的页面中进行数据的拿取,和向后台进行发送进行存储,以便后续使用(先向后台请求,如果数据不存在,在请求另一个第三方的数据(电信/聚合---都是收费)的)

  因为有js的存在,一般是放在mounted()页面中进行操作:

  接收数据:let that= this ; 

  that.checkIp = sessionStorage.getItem(‘ip‘);  checkIp是需要现在data中进行声明的
  先向后台进行请求,调用后台给出的接口,根据后台返回的值做判断,如果有值则不再请求第三方的数据直接进行数据展示,没有则进行数据请求,在进行数据获取展示
  
xxx(this.checkIp).then((res)=>{
      if(res.data.enName == ‘new User‘){
        ajax({
          ‘url‘:‘https://api.ip138.com/ip/‘,
          ‘data‘:{            //默认自动添加callback参数
              ‘ip‘:this.checkIp, //为空即为当前iP地址
              ‘oid‘:‘48260‘,
              ‘mid‘:‘108510‘,
              ‘token‘:‘9681975f8b86df4f9d47cc6d68a230ef‘  //不安全,请定期刷新token,建议进行文件压缩
          },
          ‘dataType‘:‘jsonp‘,
          ‘success‘:function(res){
              console.log(res);
          }
        });
      }else if(res.data.enName != ‘‘){
        xxx(this.checkIp).then((res)=>{
           that.form.countryName = res.data.enName;
        })
         
      }
    })
3.当使用第三方的数据请求成功的时候,你需要让数据传给后台(避免一个id频繁,多次的调用,占用资源,恶意使用)
    if(res.ret == ‘ok‘){
                console.log(11111);
                // console.log(this);
                that.form.countryName = res.data[0];
                // console.log(that.form.countryName,"that.form.countryName");
                // console.log("this.choseCountry",this.choseCountry);
                that.Allparams.ip = that.checkIp;
                that.Allparams.enName = that.form.countryName;
                xxx(that.Allparams).then((res)=>{
                  console.log(res);
                })
              }
完整的代码是:
 
// 获取ip,并向后台查询  (xxx是代表的数据向后台请求的函数名,注意引入接口路径)
    let that = this;
    that.checkIp = sessionStorage.getItem(‘ip‘);
    console.log(that.checkIp+" " +that.checkCity);
    xxx(this.checkIp).then((res)=>{
      if(res.data.enName == ‘new User‘){
        ajax({
          ‘url‘:‘https://api.ip138.com/ip/‘,
          ‘data‘:{            //默认自动添加callback参数
              ‘ip‘:this.checkIp, //为空即为当前iP地址
              ‘oid‘:‘48260‘,
              ‘mid‘:‘108510‘,
              ‘token‘:‘9681975f8b86df4f9d47cc6d68a230ef‘  //不安全,请定期刷新token,建议进行文件压缩
          },
          ‘dataType‘:‘jsonp‘,
          ‘success‘:function(res){
              console.log(res);
              if(res.ret == ‘ok‘){
                console.log(11111);
                // console.log(this);
                that.form.countryName = res.data[0];
                // console.log(that.form.countryName,"that.form.countryName");
                // console.log("this.choseCountry",this.choseCountry);
                that.Allparams.ip = that.checkIp;
                that.Allparams.enName = that.form.countryName;
                xxx(that.Allparams).then((res)=>{
                  console.log(res);
                })
              }
          }
        });
      }else if(res.data.enName != ‘‘){
        xxx(this.checkIp).then((res)=>{
           that.form.countryName = res.data.enName;
        })
         
      }
    })
使用第三的数据的时候还需要使用第三的js,js如下:(根据自己情况引入,一般存放在piblic ====>index.html中)
 
function ajax(params){
    params = params||{};
    if (!params.url) {
        throw new Error(‘Necessary parameters are missing.‘); //必要参数未填
    }
    var random = +new Date;
    var hander = null;
    var options = {
        url: ‘‘,                                //接口地址
        type: ‘GET‘,                            //请求方式
        timeout: 5000,                          //超时等待时间
        cache: true,                            //缓存 
        async: true,                            //是否异步
        xhrFields: {},                          //设置XHR对象属性键值对。如果需要,可设置withCredentials为true的跨域请求。
        dataType: ‘json‘,                       //请求的数据类型
        data: {},                               //参数
        jsonp: ‘callback‘,                      //传递请求完成后的函数名
        jsonpCallback: ‘jsonp_‘ + random,       //请求完成后的函数名
        error: function() {},                   //请求失败后调用
        success: function(){},                  //请求成功后调用
        complete: function(){}                  //请求完成后调用
    };
    var formatParams = function(json) {
        var arr = [];
        for(var i in json) {
            arr.push(encodeURIComponent(i) + ‘=‘ + encodeURIComponent(json[i]));
        }
        return arr.join("&");
    };
    for(var i in params){
        switch(i){
            case ‘type‘:
                options[i] = params[i].toUpperCase();
                break;
            case ‘dataType‘:
                options[i] = params[i].toLowerCase();
                break;
            default:
                options[i] = params[i];
        }
    }
    if(typeof options.data ==‘object‘){
        options.data = formatParams(options.data);
    }
    if(options.dataType==‘jsonp‘){
        options.cache = params.cache||false;
        //插入动态脚本及回调函数
        var $head = document.getElementsByTagName(‘head‘)[0];
        var $script = document.createElement(‘script‘);
        $head.appendChild($script);
        window[options.jsonpCallback] = function (json) {
            $head.removeChild($script);
            window[options.jsonpCallback] = null;
            hander && clearTimeout(hander);
            options.success(json);
            options.complete();
        };
        //发送请求
        if(options.cache){
            options.data += options.data?‘&_‘+random:‘_‘+random;
        }
        options.data += ‘&‘+options.jsonp+‘=‘+options.jsonpCallback;
        $script.src = (options.url + ‘?‘ + options.data).replace(‘?&‘,‘?‘);
        //超时处理
        hander = setTimeout(function(){
            $head.removeChild($script);
            window[options.jsonpCallback] = null;
            options.error();
            options.complete();
        }, options.timeout);
    }else{
        if(options.cache){
            options.data += options.data?‘&_‘+random:‘_‘+random;
        }
        //创建xhr对象
        var xhr = new (self.XMLHttpRequest||ActiveXObject)("Microsoft.XMLHTTP");
        if(!xhr){
            return false;
        }
        //发送请求
        if (options.type == ‘POST‘) {
            xhr.open(options.type, options.url, options.async);
            xhr.setRequestHeader(‘content-type‘,‘application/x-www-form-urlencoded‘);
        }else{
            options.url += options.url.indexOf(‘?‘)>-1?‘&‘+options.data:‘?‘+options.data;
            xhr.open(options.type, options.url, options.async);
            options.data = null;
        }
        if(options.xhrFields){
            for(var field in options.xhrFields){
                xhr[field]= options.xhrFields[field];
            }
        }
        xhr.send(options.data);
        //超时处理
        var requestDone = false;
        hander = setTimeout(function() {
            requestDone = true;
            if(xhr.readyState != 4){
                xhr.abort();
                options.error();
            }
            options.complete();
        }, options.timeout);
        //状态处理
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4&&!requestDone) {
                if(xhr.status>=200 && xhr.status<300||xhr.status == 304) {
                    var data = options.dataType == "xml" ? xhr.responseXML : xhr.responseText;
                    if (options.dataType == "json") {
                        try{
                            data =  JSON.parse(data);
                        }catch(e){
                            data = eval(‘(‘ + data + ‘)‘);
                        }
                    }
                    options.success(data);
                } else {
                    options.error();
                }
                hander && clearTimeout(hander);
                options.complete();
            }
        };
    }
}
 
 

 

 

根据浏览器访问页面获取Ip

上一篇:TCP标志位简析


下一篇:pytorch使用多GPU