根据一个获取网页访问者客户端ip的需求开始，在网上看了很多大佬的文章。部分文章对于我这样的新手来说不能立即上手，切入主题，实现功能。因为一个简单的功能我也绕了很多圈子。所以整理记录一下，希望对大家有所帮助。有问题大家相互交流学习，共同进步。
Vue获取本机客户端ip总结为以下2种方法：
1.引入外部js
2.不需要引入外部js
注意：我开始使用的第二种方式，功能实现了，而且多次测试正常。但使用了一个月后，有次访问发现第二种方式获取不到当前客户端ip了。原因还不知道。。。。。。就改用第一种方式。
方法一：引入外部js（分为vue页面和js页面）
1.1引入外部js（vue页面）
参考链接：https://blog.csdn.net/u010603891/article/details/85635366
1.首先在项目的index.html页面引入外部js，并定义参数。index.html文件位置和js引入如下示例图。
*外部js文件：
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script type="text/javascript">
var Ip=returnCitySN['cip']
var cityname=returnCitySN['cname']
localStorage.setItem('Ip', Ip)
localStorage.setItem('cityname', cityname)
</script>
*示例图：
2.在要获取ip值的页面读取ip的值(我是在mounted的生命钩子里读取ip的)如下：
mounted() {
//获取客户端ip
const ip = localStorage.getItem('Ip')
//在控制台打印客户端ip
console.info(ip)
}
*示例图：
3.启动vue项目，在浏览器输入项目url(如：localhost:8080)。看到控制台上打印出当前的客户端ip
*示例图：
1.2引入外部js（js页面）
直接在一个html文件里引入js。如下：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel ="shortcut icon" type="image/x-icon" href="static/favicon.ico">
测试获取客户端ip</title>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script type="text/javascript">
var Ip=returnCitySN['cip']
var cityname=returnCitySN['cname']
document.write("你的IP是：" + Ip);
document.write("你的城市名字是：" + cityname);
</script>
</head>
<body>
</body>
</html>
测试效果如图：
方法二：不需要引入外部js
百度搜一波，只需要在一个需要获取客户端ip的vue页面贴一段代码。
1.在methods中加入获取网页访问ip的代码。
methods：{
//获取网页访问ip
getUserIP(onNewIP) {
let MyPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
let pc = new MyPeerConnection({
iceServers: []
});
let noop = () => {
};
let localIPs = {};
let ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g;
let iterateIP = (ip) => {
if (!localIPs[ip]) onNewIP(ip);
localIPs[ip] = true;
};
pc.createDataChannel('');
pc.createOffer().then((sdp) => {
sdp.sdp.split('\n').forEach(function (line) {
if (line.indexOf('candidate') < 0) return;
line.match(ipRegex).forEach(iterateIP);
});
pc.setLocalDescription(sdp, noop, noop);
}).catch((reason) => {
});
pc.onicecandidate = (ice) => {
if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
};
}
}
2.在data里定义一个ip的对象,用于接收获取的客户端ip值。
data() {
return {
ip:''
};
},
3.在created获取mounted生命钩子中(根据业务需要)调用获取ip的方法。
//通过获取访问网页的ip
this.getUserIP((ip) => {
// 打印客户端ip
console.log(ip);
this.ip = ip;
});
4.测试效果图：
参考链接：https://www.cnblogs.com/jin-zhe/p/10491445.html
网友评论