实现"网络连接"-page2页面

web-ui.service/web/app.html

@@ -46,6 +46,14 @@
 </div>
 <script src="static/js/router.js"></script>
 <script src="static/js/app.js"></script>
+<script src="static/js/page1.js"></script>
+<script src="static/js/page2.js"></script>
+<script src="static/js/page3.js"></script>
+<script src="static/js/page4.js"></script>
+<script src="static/js/page5.js"></script>
+<script src="static/js/page6.js"></script>
+<script src="static/js/page7.js"></script>
+<script src="static/js/page8.js"></script>
 </body>
 
 </html>

web-ui.service/web/pages/page2.html

@@ -49,7 +49,7 @@
         <div class="card">
           <div class="card-header">
             <h2>系统路由</h2>
-            <button class="btn" title="点击刷新最新数据" onclick="getNetInfo3()">🔄</button>
+            <button class="btn" title="点击刷新最新数据" onclick="getNetInfo2()">🔄</button>
           </div>
           <pre class="output" id="text2">点击刷新获取数据...</pre>
         </div>
@@ -80,7 +80,7 @@
               <button class="btn" title="点击重启联网服务" onclick="restartNSvc()">🔄🌐</button>
             </div>
           </div>
-          <pre class="output log-output" id="text4">自动实时获取数据...</pre>
+          <pre class="output" id="text4">自动实时获取数据...</pre>
         </div>
       </div>
       <!-- 结束 -->

web-ui.service/web/static/css/page2.css

@@ -154,9 +154,9 @@
     border-radius: 4px;
     padding: 8px;
     font-size: 12px;
-    font-family: ui-monospace, monospace;
+    font-family: ui-monospace, Consolas, monospace;
     color: #cbd5e1;
     overflow: auto;
-    white-space: pre-wrap;
+    white-space: pre;
     line-height: 1.6;
 }

web-ui.service/web/static/js/page2.js

@@ -0,0 +1,64 @@
+async function apiGetRetry(url, retry = false) {
+  try {
+    const res = await fetch(url);
+
+    if (!res.ok) {
+      throw new Error("HTTP " + res.status);
+    }
+
+    const text = await res.text();
+
+    if (!text || text.trim() === "") {
+      throw new Error("empty response");
+    }
+
+    return text.trim();
+  } catch (e) {
+    console.log("GET failed:", url, e.message);
+
+    if (retry) {
+      setTimeout(() => apiGetRetry(url, true), 3000);
+    }
+
+    throw e;
+  }
+}
+
+function getNetInfo1() {
+  document.getElementById("text1").innerText = "";
+  apiGetRetry("/api/net/interfaces")
+    .then(data => {
+      document.getElementById("text1").innerText = data;
+    })
+    .catch(() => {
+      document.getElementById("text1").innerText = "获取失败";
+    });
+}
+
+function getNetInfo2() {
+  document.getElementById("text2").innerText = "";
+  apiGetRetry("/api/net/routes")
+    .then(data => {
+      document.getElementById("text2").innerText = data;
+    })
+    .catch(() => {
+      document.getElementById("text2").innerText = "获取失败";
+    });
+}
+
+function getNetInfo3() {
+  document.getElementById("text3").innerText = "";
+  apiGetRetry("/api/net/dns")
+    .then(data => {
+      document.getElementById("text3").innerText = data;
+    })
+    .catch(() => {
+      document.getElementById("text3").innerText = "获取失败";
+    });
+}
+
+function initPage2() {
+  getNetInfo1();
+  getNetInfo2();
+  getNetInfo3();
+}

web-ui.service/web/static/js/router.js

@@ -9,21 +9,38 @@ const routes = {
   page8: "pages/page8.html",
 };
 
-async function loadPage(name){
-  const view = document.getElementById("view");
+function clearOldScripts() {
+  document.querySelectorAll("script[data-dynamic='1']").forEach(s => s.remove());
+}
+
+function runScripts(container) {
+  const scripts = container.querySelectorAll("script");
+
+  scripts.forEach(oldScript => {
+    const s = document.createElement("script");
+    s.dataset.dynamic = "1";
+
+    if (oldScript.src) {
+      s.src = oldScript.src;
+    } else {
+      s.textContent = oldScript.textContent;
+    }
+
+    document.body.appendChild(s);
+  });
+}
 
+async function loadPage(name) {
+  const view = document.getElementById("view");
   const url = routes[name];
 
-  if(!url){
+  if (!url) {
     view.innerHTML = "<div class='card'>无法找到页面</div>";
     return;
   }
 
-  try{
-    const res = await fetch(url, {
-      credentials: "include"
-    });
-
+  try {
+    const res = await fetch(url, { credentials: "include" });
     const html = await res.text();
 
     if (html.includes("login.html") || html.includes("登录")) {
@@ -31,8 +48,37 @@ async function loadPage(name){
       return;
     }
 
-    view.innerHTML = html;
-  }catch(e){
+    const temp = document.createElement("div");
+    temp.innerHTML = html;
+
+    clearOldScripts();
+
+    view.innerHTML = "";
+    view.appendChild(temp);
+
+    runScripts(temp);
+
+    switch (name) {
+    case "page1":
+      break;
+    case "page2":
+      initPage2();
+      break;
+    case "page3":
+      break;
+    case "page4":
+      break;
+    case "page5":
+      break;
+    case "page6":
+      break;
+    case "page7":
+      break;
+    case "page8":
+      break;
+    }
+  } catch (e) {
+    console.error("loadPage error:", e);
     view.innerHTML = "<div class='card'>页面加载失败</div>";
   }
 }

web-ui.service/web_handlers.go

@@ -5,6 +5,7 @@ import (
 	"io/fs"
 	"net/http"
 	"os"
+	"os/exec"
 	"strings"
 )
 
@@ -114,3 +115,24 @@ func (ui *WebUI) rootHandler(w http.ResponseWriter, r *http.Request) {
 	// 4, 访问其它不认识的页面时
 	http.NotFound(w, r)
 }
+
+func runShellAndWrite(w http.ResponseWriter, cmd string) {
+	out, err := exec.Command("sh", "-c", cmd).CombinedOutput()
+	if err != nil {
+		http.Error(w, err.Error()+"\n"+string(out), http.StatusInternalServerError)
+		return
+	}
+	w.Write(out)
+}
+
+func netInterfaces(w http.ResponseWriter, r *http.Request) {
+	runShellAndWrite(w, "ifconfig")
+}
+
+func netRoutes(w http.ResponseWriter, r *http.Request) {
+	runShellAndWrite(w, "route -n")
+}
+
+func netDNS(w http.ResponseWriter, r *http.Request) {
+	runShellAndWrite(w, "cat /etc/resolv.conf")
+}

web-ui.service/web_ui.go

@@ -31,6 +31,10 @@ func NewWebUI(addr string) (*WebUI, error) {
 	mux.HandleFunc("/logout", logoutHandler) //// 注销接口
 	/////////////////////////////////////////////////////
 	mux.HandleFunc("/getIMEI", getIMEIHandler) // 唯一编号
+	/////////////////////////////////////////////////////
+	mux.HandleFunc("/api/net/interfaces", netInterfaces)
+	mux.HandleFunc("/api/net/routes", netRoutes)
+	mux.HandleFunc("/api/net/dns", netDNS)
 
 	return &WebUI{fs: sub, addr: addr, mux: mux}, nil
 }