1.主要使用场景

        查看操作记录等

2.实现原理

        在前端的 Vue.js 应用中，通常是无法直接获取到当前电脑的局域网 IP 地址的，因为浏览器限制了这类敏感信息的访问。局域网 IP 地址是客户端（浏览器）到服务器端（通常是后端）的连接信息，而不是直接从浏览器获取的。

        一般情况下，你可能需要通过后端接口来获取客户端的 IP 地址。在 Vue.js 中，可以通过向后端发送请求来获取客户端的 IP 地址。后端可以通过读取请求的 IP 地址头部来获取客户端的真实 IP。

3.代码

        3.1前端增加登录记录代码示例

        向后端发送除IP外的其他需要记录的数据

<code> //添加登陆记录

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

}