实现 HttpStatusCode 工具

分类：developer ｜ 标签：HTTP、状态码、速查 浏览常见 HTTP 状态码及含义

2.1 功能说明

浏览常见 HTTP 状态码及含义

2.1.1 使用指南

功能说明

按分类（1xx/2xx/3xx/4xx/5xx）浏览常见 HTTP 状态码，支持关键字搜索，查看含义与使用场景。

使用场景

接口调试、排错、面试复习。

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> 中定义的主要函数/方法：

• tag()

2.2.3 关键实现代码

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

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

const DATA = [
  [200, 'OK', '请求成功'], [201, 'Created', '已创建资源'], [204, 'No Content', '成功但无返回体'],
  [301, 'Moved Permanently', '永久重定向'], [302, 'Found', '临时重定向'], [304, 'Not Modified', '缓存命中，未修改'],
  [400, 'Bad Request', '请求参数错误'], [401, 'Unauthorized', '未认证'], [403, 'Forbidden', '无权限'],
  [404, 'Not Found', '资源不存在'], [405, 'Method Not Allowed', '请求方法不允许'], [408, 'Request Timeout', '请求超时'],
  [409, 'Conflict', '资源冲突'], [418, "I'm a teapot", '彩蛋：我是茶壶'], [422, 'Unprocessable Entity', '语义错误'],
  [429, 'Too Many Requests', '请求过于频繁'], [500, 'Internal Server Error', '服务器内部错误'],
  [502, 'Bad Gateway', '网关错误'], [503, 'Service Unavailable', '服务不可用'], [504, 'Gateway Timeout', '网关超时']
]
const q = ref('')
const rows = computed(() => {
  const s = q.value.trim().toLowerCase()
  return DATA.filter(([c, n, d]) => !s || String(c).includes(s) || n.toLowerCase().includes(s) || d.toLowerCase().includes(s))
    .map(([code, name, desc]) => ({ code, name, desc }))
})
function tag(code) {
  if (code < 300) return 'success'
  if (code < 400) return 'info'
  if (code < 500) return 'warning'
  return 'danger'
}

2.3 效果截图

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