VueJS组件调用getDNSDig API实现DNS解析结果展示求助

需求说明 #

需要一个带基础表单的新组件：包含域名输入框，以及选项为A、AAAA、PTR、MX、CNAME的下拉框。提交时调用wayfinderAPI.getDNSDig接口，返回JSON格式的DNS解析结果并展示。

API方法定义：

getDNSDig(domain: string, recordtype: string): Promise<any> {
    http.defaults.headers.post['Authorization'] = 'Bearer ' + localStorage.getItem('webApiToken')
    return http.post("/v1/dns/dig", {request: domain, record_type: recordtype})
}

后端Golang接口已就绪，可根据需要调整返回格式，展示样式简洁清晰即可。

修改后的完整组件代码 #

<template>
  <div class="dns-query-container">
    <!-- 查询表单 -->
    <form v-if="!formSubmitted" @submit.prevent="submitForm" class="query-form">
      <div class="form-group">
        <span>域名</span>
        <input 
          v-model="domain"
          type="text"
          placeholder="请输入域名，例如 example.com"
          required
          class="domain-input"
        >
      </div>
      <div class="form-group">
        <span>记录类型</span>
        <b-dropdown
          v-model="selectedType"
          :text="selectedType || '选择记录类型'"
          variant="primary"
          class="type-dropdown"
        >
          <b-dropdown-item value="A">A</b-dropdown-item>
          <b-dropdown-item value="AAAA">AAAA</b-dropdown-item>
          <b-dropdown-item value="PTR">PTR</b-dropdown-item>
          <b-dropdown-item value="MX">MX</b-dropdown-item>
          <b-dropdown-item value="CNAME">CNAME</b-dropdown-item>
        </b-dropdown>
      </div>
      <button type="submit" :disabled="!domain || !selectedType || isLoading" class="submit-btn">
        {{ isLoading ? '查询中...' : '提交查询' }}
      </button>
    </form>

    <!-- 查询结果展示 -->
    <div v-if="formSubmitted" class="result-section">
      <h3>查询结果</h3>
      <div class="query-info">
        <p><strong>域名：</strong>{{ domain }}</p>
        <p><strong>记录类型：</strong>{{ selectedType }}</p>
      </div>
      
      <!-- 加载状态 -->
      <div v-if="isLoading" class="loading">加载中...</div>
      
      <!-- 错误提示 -->
      <div v-if="errorMsg" class="error">{{ errorMsg }}</div>
      
      <!-- JSON结果展示 -->
      <pre v-if="dnsResult" class="json-result">{{ formattedResult }}</pre>

      <button @click="resetForm" class="reset-btn">重新查询</button>
    </div>
  </div>
</template>

<script>
// 假设wayfinderAPI已全局挂载，若未全局挂载需导入：
// import wayfinderAPI from '@/path/to/wayfinderAPI'

export default {
  data() {
    return {
      domain: "",
      selectedType: "",
      formSubmitted: false,
      isLoading: false,
      dnsResult: null,
      errorMsg: ""
    };
  },
  computed: {
    // 格式化JSON结果，方便阅读
    formattedResult() {
      return JSON.stringify(this.dnsResult, null, 2);
    }
  },
  methods: {
    async submitForm() {
      this.isLoading = true;
      this.errorMsg = "";
      this.dnsResult = null;

      try {
        // 调用API获取DNS解析结果
        const response = await wayfinderAPI.getDNSDig(this.domain, this.selectedType);
        this.dnsResult = response.data; // 根据实际返回结构调整，若API直接返回数据则用response
        this.formSubmitted = true;
      } catch (err) {
        this.errorMsg = err.response?.data?.message || "查询失败，请稍后重试";
      } finally {
        this.isLoading = false;
      }
    },
    resetForm() {
      this.domain = "";
      this.selectedType = "";
      this.formSubmitted = false;
      this.dnsResult = null;
      this.errorMsg = "";
    }
  }
};
</script>

<style scoped>
.dns-query-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 20px;
}

.query-form {
  padding: 20px;
  border: 2px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.form-group {
  margin-bottom: 15px;
}

.form-group span {
  display: block;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}

.domain-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.type-dropdown {
  width: 100%;
}

.submit-btn, .reset-btn {
  font-size: 14px;
  color: #fff;
  background-color: #2c3e50;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-btn:disabled {
  background-color: #bdc3c7;
  cursor: not-allowed;
}

.result-section {
  margin-top: 20px;
  padding: 20px;
  border: 2px solid #ddd;
  border-radius: 8px;
}

.query-info {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.loading {
  color: #3498db;
  font-size: 16px;
}

.error {
  color: #e74c3c;
  padding: 10px;
  background-color: #ffebee;
  border-radius: 4px;
  margin: 10px 0;
}

.json-result {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  max-height: 400px;
}

.reset-btn {
  margin-top: 15px;
  background-color: #95a5a6;
}

.reset-btn:hover {
  background-color: #7f8c8d;
}
</style>

关键修改说明 #

1. 下拉框绑定优化：给b-dropdown添加v-model绑定selectedType，并将下拉框显示文本改为选中的类型，同时给每个b-dropdown-item设置value属性，确保能正确获取选中的记录类型。
2. 表单校验增强：给输入框添加required属性，提交按钮根据输入状态和加载状态禁用，避免无效提交。
3. API调用实现：使用async/await调用wayfinderAPI.getDNSDig，处理加载、成功、失败三种状态：
   • 加载时显示"查询中..."并禁用按钮
   • 成功后保存返回的DNS结果
   • 失败时显示错误提示
4. 结果格式化展示：通过计算属性formattedResult将JSON结果格式化，用<pre>标签保留格式，方便阅读。
5. 重置功能：添加重新查询按钮，重置表单状态和结果。
6. 样式优化：调整布局和样式，提升可读性和用户体验。

内容的提问来源于stack exchange，提问作者Garreck Vassar