1.主要使用场景
查看操作记录等
2.实现原理
在前端的 Vue.js 应用中,通常是无法直接获取到当前电脑的局域网 IP 地址的,因为浏览器限制了这类敏感信息的访问。局域网 IP 地址是客户端(浏览器)到服务器端(通常是后端)的连接信息,而不是直接从浏览器获取的。
一般情况下,你可能需要通过后端接口来获取客户端的 IP 地址。在 Vue.js 中,可以通过向后端发送请求来获取客户端的 IP 地址。后端可以通过读取请求的 IP 地址头部来获取客户端的真实 IP。
3.代码
3.1前端增加登录记录代码示例
向后端发送除IP外的其他需要记录的数据
//添加登陆记录
insertLoginLog() {
this.logForm.loginTime=this.getCurrentTime();
this.logForm.empcode=this.loginForm.loginName
console.log(this.logForm)
insertLoginLog(this.logForm)
.then((res) => {
if (res.data.code === 200) {
this.$message({
message: "登录成功",
type: "success",
});
} else {
this.$message.error(res.data.message);
}
})
.catch((err) => {
this.$message.error("添加登录记录异常");
console.log(err);
});
},
3.2后端增加登录记录示例
后端接收请求并获取请求发送的IP地址
/**
* 新增登陆记录
* @param
* @return
*/
@PostMapping("/api/user/insertLoginLog")
public Result insertLoginLog(@RequestBody LoginNumber loginNumber,
HttpServletRequest request,
@RequestHeader(value = "X-Forwarded-For", required = false) String clientIp){
if (clientIp == null) {
clientIp = request.getRemoteAddr(); // 获取默认的客户端 IP 地址
}
loginNumber.setLoginIP(clientIp);
return new Result(200,"",userService.insertLoginLog(loginNumber));
}