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