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

获取IP，并存储的步骤：

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

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

　　　　　

• 获取数据

　　　　

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

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

　　　　

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();             }         };     } }