实现 PortLookup 工具

分类：developer ｜ 标签：端口、port、速查 知名端口与服务对照

2.1 功能说明

知名端口与服务对照

2.1.1 使用指南

功能说明

浏览知名 TCP/UDP 端口与服务名的对应关系，支持按端口号或关键字搜索。

使用场景

防火墙配置、服务排查、面试复习。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref, computed } from 'vue'
import ToolPageShell from '@/components/ToolPageShell.vue'

const DATA = [
  [20, 'TCP', 'FTP-DATA', 'FTP 数据传输'], [21, 'TCP', 'FTP', '文件传输'], [22, 'TCP', 'SSH', '安全远程登录'],
  [23, 'TCP', 'Telnet', '远程登录（不安全）'], [25, 'TCP', 'SMTP', '邮件发送'], [53, 'TCP/UDP', 'DNS', '域名解析'],
  [80, 'TCP', 'HTTP', '超文本传输'], [110, 'TCP', 'POP3', '邮件接收'], [143, 'TCP', 'IMAP', '邮件接收'],
  [443, 'TCP', 'HTTPS', '加密 HTTP'], [3306, 'TCP', 'MySQL', 'MySQL 数据库'], [5432, 'TCP', 'PostgreSQL', 'PostgreSQL 数据库'],
  [6379, 'TCP', 'Redis', 'Redis 缓存'], [27017, 'TCP', 'MongoDB', 'MongoDB 数据库'], [8080, 'TCP', 'HTTP-ALT', 'HTTP 备用端口']
]
const q = ref('')
const rows = computed(() => {
  const s = q.value.trim().toLowerCase()
  return DATA.filter(([p, pr, sv, d]) => !s || String(p).includes(s) || pr.toLowerCase().includes(s) || sv.toLowerCase().includes(s) || d.toLowerCase().includes(s))
    .map(([port, proto, service, desc]) => ({ port, proto, service, desc }))
})

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/port-lookup