首页 教程 Web前端 vue前端获取电脑本机的mac和ip地址

vue前端获取电脑本机的mac和ip地址

vue 前端 使用 node 里的 os 模块,来获取主机macIP地址
需要注意的是这篇教程只能获取本地的,打包到服务器上也是服务器的。需要获取不同使用者的客户端mac,看我这篇。获取客户端不同的mac地址
一、根目录创建 getNetworkInfo.js 脚本文件

const os = require("os"); function getNetworkInfo() { let address = "127.0.0.1"; let mac = ""; const networkInterfaces = os.networkInterfaces(); for (const iface of Object.values(networkInterfaces)) { for (const details of iface) { if ( details.family === "IPv4" && details.mac !== "00:00:00:00:00:00" && details.address !== "127.0.0.1" ) { mac = details.mac; address = details.address; return { mac, address }; } } } return { mac, address }; } module.exports = getNetworkInfo;

二、vue.config.js中引入

const getNetworkInfo = require("./getNetworkInfo.js"); const { mac, address } = getNetworkInfo(); // 自定义环境变量全局使用 process.env.VUE_APP_MAC = mac; process.env.VUE_APP_ADDRESS = address;

三、页面中使用

<template> <div class="box-card"> <h3>mac:{{ mac }}</h3> <h3>address:{{ address }}</h3> </div> </template> <script> export default { data() { return { mac: "", address: "", }; }, mounted() { this.mac = process.env.VUE_APP_MAC; this.address = process.env.VUE_APP_ADDRESS; console.log("process.env.VUE_APP_MAC>>>→??????", process.env.VUE_APP_MAC); console.log( "process.env.VUE_APP_ADDRESS>>>→??????", process.env.VUE_APP_ADDRESS ); }, }; </script> <style lang="scss" scoped></style>

四、os 其他操作方法
其他用法:

os.EOL 定义操作系统一行结束的标识的常量。 os.arch() 返回操作系统 CPU 架构,可能的值有 “x64”、“arm” 和 “ia32”。 os.cpus() 返回一个数组对象,包括CPU的型号、速度、时间等。 os.endianness() 返回 CPU 的字节序,可能的是 “BE” 或 “LE”。 Little endian:将低序字节存储在起始地址。 Big endian:将高序字节存储在起始地址。 os.freemem() 返回操作系统空闲内存,单位是字节。 os.homedir() 返回当前用户的主目录。 os.hostname() 返回操作系统的主机名。 os.loadavg() 返回一个包含 1、5、15 分钟平均负载的数组。 os.platform() 返回操作系统平台。 os.release() 返回操作系统的发行版本。 os.tmpdir() 返回操作系统默认的临时文件目录。 os.totalmem() 返回系统内存总量,单位为字节。 os.type() 返回操作系统名称。 os.uptime() 返回操作系统运行的时间,以秒为单位。

评论(0)条

提示:请勿发布广告垃圾评论,否则封号处理!!

    猜你喜欢
    【MySQL】用户管理

    【MySQL】用户管理

     服务器/数据库  2个月前  2.15k

    我们推荐使用普通用户对数据的访问。而root作为管理员可以对普通用户对应的权限进行设置和管理。如给张三和李四这样的普通用户权限设定后。就只能操作给你权限的库了。

    Cursor Rules 让开发效率变成10倍速

    Cursor Rules 让开发效率变成10倍速

     服务器/数据库  2个月前  1.21k

    在AI与编程的交汇点上,awesome-cursorrules项目犹如一座灯塔,指引着开发者们驶向更高效、更智能的编程未来。无论你是经验丰富的老手,还是刚入行的新人,这个项目都能为你的编程之旅增添一抹亮色。这些规则文件就像是你私人定制的AI助手,能够根据你的项目需求和个人偏好,精确地调教AI的行为。突然间,你会发现AI不仅能理解Next.js的最佳实践,还能自动应用TypeScript的类型检查,甚至主动提供Tailwind CSS的类名建议。探索新的应用场景,推动AI辅助编程的边界。

    探索Django 5: 从零开始,打造你的第一个Web应用

    探索Django 5: 从零开始,打造你的第一个Web应用

     服务器/数据库  2个月前  1.12k

    Django 是一个开放源代码的 Web 应用程序框架,由 Python 写成。它遵循 MVT(Model-View-Template)的设计模式,旨在帮助开发者高效地构建复杂且功能丰富的 Web 应用程序。随着每个版本的升级,Django 不断演变,提供更多功能和改进,让开发变得更加便捷。《Django 5 Web应用开发实战》集Django架站基础、项目实践、开发经验于一体,是一本从零基础到精通Django Web企业级开发技术的实战指南《Django 5 Web应用开发实战》内容以。

    MySQL 的mysql_secure_installation安全脚本执行过程介绍

    MySQL 的mysql_secure_installation安全脚本执行过程介绍

     服务器/数据库  2个月前  1.08k

    mysql_secure_installation 是 MySQL 提供的一个安全脚本,用于提高数据库服务器的安全性

    【MySQL基础篇】概述及SQL指令:DDL及DML

    【MySQL基础篇】概述及SQL指令:DDL及DML

     服务器/数据库  2个月前  482

    数据库是长期存储在计算机内的、有组织的、可共享的、统一管理的大量数据的集合。数据库不仅仅是数据的简单堆积,而是遵循一定的规则和模式进行组织和管理的。数据库中的数据可以包括文本、数字、图像、音频等各种类型的信息。

    Redis中的哨兵(Sentinel)

    Redis中的哨兵(Sentinel)

     服务器/数据库  2个月前  308

    ​ 上篇文章我们讲述了Redis中的主从复制(Redis分布式系统中的主从复制-CSDN博客),本篇文章针对主从复制中的问题引出Redis中的哨兵,希望本篇文章会对你有所帮助。