314 lines
No EOL
10 KiB
HTML
314 lines
No EOL
10 KiB
HTML
<!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> |