先上个效果图:
这里用到了 这个IP 查询的 地址:
https://ip.ws.126.net/ipquery?ip=223.70.131.150
因为这个地址请求设计到跨域,所以在vue里面可以用代理来解决:
vue.config.js 里面:
// 设置代理
proxy: {
"/cityApi": {
target: "https://ip.ws.126.net/ipquery",
changeOrigin: true,
pathRewrite: {
"^/cityApi": ""
}
},
}
然后在vue页面调用接口:
let formData = {
ip: "223.70.131.150" //这里做测试ip地址写死的
};
this.$axios({
url: "/cityApi",
method: 'get',
params: formData
}).then(res=>{
console.log("res:", res, JSON.parse(JSON.stringify(res.data)) )
let result1 = JSON.parse(JSON.stringify(res.data))
let data1 = result1.split(';')[1]
let data2 = data1.split('=')[1]
let data3 = data2.slice(1)
let data4 = data3.split('}')[0]
let data5 = data4.split(',')
console.log("data1:", data1)
console.log("data2:", data2)
console.log("data3:", data3)
console.log("data4:", data4)
console.log("data5:", data5)
})
注意: 这里传的ip是 写死的ip,自己用的话,自己改成动态变量就可以了。
我这里只提供方法,,目前用了: 126 IP API 的查询接口,查询IP的接口有很多个,并不是只有126 IP API才能用,像淘宝IP地址库也能用、新浪IP API等等。
淘宝IP 地址库的使用:
http://ip.taobao.com/service/getIpInfo.php?ip=223.70.131.150