You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

314 lines
10 KiB

<!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">&times;</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>