Appearance
实现 MAC OUI 查询 工具
分类:general | 标签:MAC、OUI、厂商 按 MAC 前 3 字节查厂商
2.1 功能说明
按 MAC 前 3 字节查厂商
核心能力
- MAC
- OUI
- 厂商
- 地址
- 类型
2.1.1 使用指南
根据 MAC 地址前 3 字节(OUI)查询网卡厂商,数据来自 IEEE MA-L 注册库(约 4 万条)。
- 支持冒号 / 连字符 / 无分隔符等多种写法,大小写均可。
- 数据库在首次查询时加载并缓存于内存。
2.2 代码实现
2.2.1 组件结构
本工具是一个基于 Vue 3 <script setup> 语法的单文件组件(SFC),统一包裹在 ToolPageShell 组件内,由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳;核心业务逻辑(响应式状态、计算属性、事件处理函数)全部写在 <script setup> 中,输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互,所有数据均在浏览器本地处理,不会上传服务器。
2.2.2 核心逻辑概览
<script setup> 中定义的主要函数/方法:
loadDb()normalize()lookup()
2.2.3 关键实现代码
以下是该工具的完整 <script setup> 实现(核心代码)。模板(<template>)与样式(<style>)已省略。
vue
import { ref } from 'vue'
import ToolPageShell from '@/components/ToolPageShell.vue'
const mac = ref('')
const error = ref('')
const loading = ref(false)
const result = ref(null)
let cache = null
async function loadDb() {
if (cache) return cache
const res = await fetch(`${import.meta.env.BASE_URL}oui.json`)
if (!res.ok) throw new Error('OUI 数据库加载失败')
cache = await res.json()
return cache
}
function normalize(s) {
const cleaned = s.replace(/[^0-9A-Fa-f]/g, '').toUpperCase()
if (cleaned.length < 6) return null
return cleaned
}
async function lookup() {
error.value = ''
result.value = null
const raw = mac.value.trim()
if (!raw) {
error.value = '请输入 MAC 地址'
return
}
const hex = normalize(raw)
if (!hex) {
error.value = 'MAC 格式不正确,至少需前 3 字节(6 位十六进制)'
return
}
const oui = hex.slice(0, 6)
const secondByte = parseInt(oui.slice(2, 4), 16)
const isLocal = (secondByte & 0x02) !== 0
const isMulticast = (secondByte & 0x01) !== 0
loading.value = true
try {
const db = await loadDb()
const vendor = db[oui]
result.value = {
oui,
vendor: vendor || '未找到厂商(本地/私有地址或非常见前缀)',
address: '',
note: isLocal ? '本地管理地址(LAA)' : isMulticast ? '组播地址' : '全球唯一(UAA)'
}
} catch (e) {
error.value = '查询失败:' + (e && e.message ? e.message : String(e))
} finally {
loading.value = false
}
}2.3 效果截图
