bmy/IPV6
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2222
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
编码猿
2025-09-09 11:12:02 +08:00
parent c171a90ad6
commit 27cc128f6e
3 changed files with 122 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
index.html
View File

@@ -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>

9
index.js
View File

@@ -5,6 +5,10 @@ const { port, command } = require('./config');
const express = require('express') const express = require('express')
const app = express() const app = express()
// 配置静态文件目录
// 这会将项目中的public文件夹设置为静态资源目录
app.use(express.static(path.join(__dirname, 'public')));
app.use((req, res, next) => { app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, POST'); res.header('Access-Control-Allow-Methods', 'GET, POST');
@@ -17,6 +21,11 @@ app.get('/ip', async (req, res) => {
res.json(await ip.parseNetworkInfo(output)) res.json(await ip.parseNetworkInfo(output))
}) })
app.get('/', async (req, res) => {
// 使用sendFile方法发送HTML文件
res.sendFile(path.join(__dirname, 'public', 'index.html'));
})
app.listen(port, () => { app.listen(port, () => {
console.log(`app listening on port: http://127.0.0.1:${port}`) console.log(`app listening on port: http://127.0.0.1:${port}`)
}) })

113
public/index.html Normal file
View File

@@ -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>