<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>MySQL 设置</title> <!-- 可以在这里添加CSS样式 --> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .container { max-width: 500px; margin: 10px auto; background: white; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h3 { text-align: center; } label { margin-top: 10px; } input { padding: 10px; border: 1px solid #ddd; border-radius: 4px; } .button { margin-top: 20px; padding: 10px 20px; background-color: #007BFF; color: white; border: none; border-radius: 4px; cursor: pointer; } .button:hover { background-color: #0056b3; } /* 模态对话框背景 */ .modal { display: none; /* 默认隐藏 */ position: fixed; /* 固定位置 */ z-index: 1; /* 层叠顺序 */ left: 0; top: 0; width: 100%; /* 全屏宽度 */ height: 100%; /* 全屏高度 */ overflow: auto; /* 启用滚动条 */ background-color: rgba(0, 0, 0, 0.4); /* 半透明黑色背景 */ } /* 模态对话框内容 */ .modal-content { background-color: #fefefe; margin: 15% auto; /* 15% 从顶部开始,居中 */ padding: 20px; border: 1px solid #888; width: 80%; /* 或者设置为固定宽度 */ } /* 关闭按钮 */ .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } .tab { overflow: hidden; } /* Tab按钮样式 */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; } /* 活动的tab按钮高亮 */ .tab button:hover { background-color: #ddd; } .tab button.active { background-color: #ccc; } /* Tab页内容样式 */ .tabcontent { display: none; padding: 6px 12px; border-top: 1px solid #ccc; flex-direction: column; } </style> </head> <body> <div class="container"> <h3>MySQL 设置</h3> <div class="tab"> <button class="tablinks" onclick="openTab(event, 'General')">常规设置</button> <button class="tablinks" onclick="openTab(event, 'Password')">设置密码</button> </div> <div id="General" class="tabcontent"> <label for="dataDir">存储地址:</label> <input type="text" id="dataDir" name="dataDir"> <label for="logDir">日志地址:</label> <input type="text" id="logDir" name="logDir"> <label for="port">端口号:</label> <input type="text" id="port" name="port"> <button type="submit" id="saveConfig" class="button">保存</button> </div> <div id="Password" class="tabcontent"> <label for="password">密码:</label> <input type="password" id="password" name="password" placeholder="请输入数据库密码,不能小于3位"> <button type="submit" id="savePwd" class="button">保存</button> </div> </div> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p id="modalText"></p> </div> </div> <script> function openTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(tabName).style.display = "flex"; evt.currentTarget.className += " active"; } document.addEventListener('DOMContentLoaded', function () { let localData = localStorage.getItem('mysqlSettings'); if (localData) { localData = JSON.parse(localData); // 填充表单字段 document.getElementById('dataDir').value = localData.dataDir; document.getElementById('logDir').value = localData.logDir; document.getElementById('port').value = localData.port; //document.getElementById('password').value = savedData.password; } // 获取模态对话框元素 const modal = document.getElementById("myModal"); // 获取关闭按钮 const span = document.getElementsByClassName("close")[0]; // 获取模态对话框文本 const modalText = document.getElementById("modalText"); // 页面加载时激活第一个 tab document.querySelector('.tablinks:first-child').click(); function showMsg(msg) { // 替换 alert 为显示模态对话框 modal.style.display = "block"; modalText.textContent = msg; } async function OpenDirDialog() { if (window.go) { return window['go']['app']['App']['OpenDirDialog'](); } else { return "" } } document.getElementById('dataDir').addEventListener('click', async function () { let dir = await OpenDirDialog(); if (dir) { document.getElementById('dataDir').value = dir; } }); document.getElementById('logDir').addEventListener('click', async function () { let dir = await OpenDirDialog(); if (dir) { document.getElementById('logDir').value = dir; } }); // 添加事件监听器来处理表单提交 document.getElementById('saveConfig').addEventListener('click', async function (event) { event.preventDefault(); // 阻止默认的表单提交行为 // 获取表单字段的值 const dataDir = document.getElementById('dataDir').value; const logDir = document.getElementById('logDir').value; const port = document.getElementById('port').value; // 表单字段的校验 if (!dataDir || !logDir || !port) { showMsg('所有字段都是必填项!'); return; } // 端口应该是一个数字 if (isNaN(port)) { showMsg('端口号必须是一个数字!'); return; } // 假设端口号应该在 1 到 65535 之间 if (port < 1 || port > 65535) { showMsg('端口号必须在 1 到 65535 之间!'); return; } const postData = { dataDir: dataDir, logDir: logDir, port: port, name: "mysql5.7", cmdKey: "setting" } const comp = await fetch('http://localhost:56780/store/setting', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(postData) }); if (!comp.ok) { showMsg('设置失败'); return; } // 存储数据到 localStorage localStorage.setItem('mysqlSettings', JSON.stringify(postData)); showMsg('设置成功'); }); document.getElementById('savePwd').addEventListener('click', async function (event) { event.preventDefault(); // 阻止默认的表单提交行为 // 获取表单字段的值 const password = document.getElementById('password').value; // 表单字段的校验 if (!password || password.length < 3) { showMsg('密码不能为空'); return; } const pwData = { password: password, name: "mysql5.7", cmdKey: "changePassword" } const res = await fetch('http://localhost:56780/store/setting', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(pwData) }); if (!res.ok) { showMsg('设置失败'); return; } showMsg('设置成功'); }); // 当用户点击关闭按钮时关闭模态对话框 span.onclick = function () { modal.style.display = "none"; } // 当用户点击模态对话框以外的地方时关闭模态对话框 window.onclick = function (event) { if (event.target == modal) { modal.style.display = "none"; } } }); </script> </body> </html>