Tue Sep 12 17:25:00 CST 2023 inscode

src/views/DNS.vue

 <template>
 
-    DNS解析
+    <button @click="parseHanle">解析</button>
 
-</template>
+</template>
\ No newline at end of file
+
+
+<script setup>
+import axios from "axios";
+
+
+// 域名解析处理器
+async function parseHanle(){
+    let paramObj = {
+        queryStr: "maoheinn.top",
+        querytype: "A" ,
+        dnsserver: "8.8.8.8"
+    }
+    const res = await axios.post("https://coding.tools/cn/nslookup",);
+    console.log(res);
+}   
+</script>
+
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/IP.vue

 <template>
+    <!-- 描述 -->
+    <Desc ref="Desc_text"></Desc>
     <button @click="getIP">获取IP</button>
     <!-- IP地址 -->
-    <div>
-        
+    <div id="ipContent">
+        {{ ipAddr }}
     </div>
 </template>
 
 <script setup>
 import axios from 'axios';
+import { ref, onMounted } from "vue";
+import { ElMessage } from 'element-plus'
+import Desc from "../components/Desc.vue"
 
+let Desc_text = ref(null);
 
-async function getIP(){
+onMounted(()=>{
+    Desc_text.value.setDescText(`获取当前计算机的公网IP，可用于云产品开放白名单的IP填写等作用。`)
+})
+
+// IP地址
+let ipAddr = ref("点击【按钮】查看IP");
+
+async function getIP() {
+
+    if (ipAddr.value != "点击【按钮】查看IP") {
+        ElMessage({
+            message: "请勿重复获取!",
+            type: "warning"
+        })
+        return;
+    }
+    ElMessage("获取中...")
     const res = await axios.get("https://ipv4.icanhazip.com/");
-    console.log(res.data);
+    ipAddr.value = res.data;
+    ElMessage({
+        message: "获取成功!",
+        type: "success"
+    })
 }
 </script>
 
 <style scoped>
+button {
+    width: 68px;
+    height: 31px;
+    background-color: #47abbd;
+    border: none;
+    border-radius: 5px;
+    color: white;
+    font-weight: 600;
+    font-size: 15px;
+    position: relative;
+    top: 2px;
+    cursor: pointer;
+}
 
+button:hover {
+    background-color: #3a8b99;
+}
 
+#ipContent {
+    margin-top: 10px;
+    border: solid rgb(66, 62, 62) 1px;
+    height: 60px;
+    width: 500px;
+    border-radius: 5px;
+    font-size: 13px;
+    padding: 7px;
+}
 </style>
\ No newline at end of file