2222

2025-09-09 11:12:02 +08:00
parent c171a90ad6
commit 27cc128f6e
3 changed files with 122 additions and 32 deletions
--- a/index.html
+++ b/index.html
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-
-<body>
-
-</body>
-<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.11.0/axios.min.js"></script>
-<script>
-    const IP = async () => {
-        let { data } = await axios.get('http://192.168.31.100:9900/ip');
-        return data
-    }
-
-
-    const main = async () => {
-        let res = await IP()
-        console.log(res);
-
-    }
-
-    main()
-
-
-</script>
-
-</html>
--- a/index.js
+++ b/index.js
@@ -5,6 +5,10 @@ const { port, command } = require('./config');
 const express = require('express')
 const app = express()

+// 配置静态文件目录
+// 这会将项目中的public文件夹设置为静态资源目录
+app.use(express.static(path.join(__dirname, 'public')));
+
 app.use((req, res, next) => {
   res.header('Access-Control-Allow-Origin', '*');
   res.header('Access-Control-Allow-Methods', 'GET, POST');
@@ -17,6 +21,11 @@ app.get('/ip', async (req, res) => {
   res.json(await ip.parseNetworkInfo(output))
 })

+app.get('/', async (req, res) => {
+   // 使用sendFile方法发送HTML文件
+   res.sendFile(path.join(__dirname, 'public', 'index.html'));
+})
+
 app.listen(port, () => {
   console.log(`app listening on port: http://127.0.0.1:${port}`)
 })
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NAS IPV6查询</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            text-decoration: none;
+        }
+
+        #app {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+        }
+
+        .ipv6 {
+            display: flex;
+            flex-direction: column;
+
+            li {
+                font-size: 16px;
+
+                cursor: pointer;
+
+
+                .address {
+                    display: flex;
+                    align-items: center;
+                }
+
+                &:first-child {
+                    &::before {
+                        content: "公网地址:";
+                        margin-bottom: 5px;
+                        display: inline-block;
+                        font-weight: 600;
+                    }
+                }
+
+                &:last-child {
+                    margin-top: 20px;
+
+                    &:before {
+                        content: "局域网地址:";
+                        margin-bottom: 5px;
+                        display: inline-block;
+                        font-weight: 600;
+                    }
+                }
+            }
+
+            .connect {
+                width: 12px;
+                height: 12px;
+                border-radius: 100%;
+                background: #b8b6b6;
+                margin-right: 8px;
+            }
+
+            .active {
+                background: rgb(8 251 134);
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <ul class="ipv6">
+            <li title="点击复制" v-for="item,index in ipv6List" :key="index" @click="copyToClipboard(item.address)">
+                <div class="address">
+                    <div class="connect" :class="{ active: item.connect }"></div>
+                    {{ item.address }}
+                </div>
+            </li>
+        </ul>
+    </div>
+</body>
+<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.11.0/axios.min.js"></script>
+<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.7/vue.min.js"></script>
+<script>
+
+    new Vue({
+        el: "#app",
+        data: {
+            ipv6List: []
+        },
+        async mounted() {
+            let res = await this.getIp()
+            this.ipv6List = res.ipv6Addresses
+            console.log(this.ipv6List);
+        },
+        methods: {
+            async getIp() {
+                let { data } = await axios.get('http://192.168.31.100:9900/ip');
+                return data
+            },
+            async copyToClipboard(text) {
+                return await navigator.clipboard.writeText(text)
+            }
+        },
+    })
+
+</script>
+
+</html>