mirror of https://gitee.com/godoos/godoos.git
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
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">×</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>
|