【干貨】一鍵生成MySQL配置文件
關鍵代碼如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MySQL配置文件生成工具</title>
<link rel="stylesheet" >
<style>
:root {
--primary: #3498db;
--secondary: #2980b9;
--success: #2ecc71;
--warning: #f39c12;
--danger: #e74c3c;
--light: #f8f9fa;
--dark: #2c3e50;
--gray: #6c757d;
--light-gray: #e9ecef;
--border: #dee2e6;
--card-bg: rgba(255, 255, 255, 0.95);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #1a2a6c, #2c3e50);
color: #333;
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
header {
text-align: center;
padding: 30px 0;
margin-bottom: 30px;
background: var(--card-bg);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(--primary), var(--success));
}
header h1 {
color: var(--dark);
font-size: 2.8rem;
margin-bottom: 10px;
background: linear-gradient(90deg, var(--primary), var(--success));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
}
header p {
color: var(--gray);
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto;
}
.main-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 40px;
}
@media (max-width: 992px) {
.main-content {
grid-template-columns: 1fr;
}
}
.card {
background: var(--card-bg);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
overflow: hidden;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
.card-header {
background: linear-gradient(90deg, var(--primary), var(--secondary));
color: white;
padding: 20px 25px;
display: flex;
align-items: center;
justify-content: space-between;
}
.card-header h2 {
font-size: 1.7rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.card-body {
padding: 30px;
}
.form-group {
margin-bottom: 25px;
position: relative;
}
.form-group label {
display: block;
margin-bottom: 10px;
font-weight: 600;
color: var(--dark);
display: flex;
align-items: center;
gap: 8px;
}
.form-group .info-icon {
color: var(--primary);
cursor: pointer;
font-size: 1rem;
}
.form-control {
width: 100%;
padding: 14px 18px;
border: 2px solid var(--border);
border-radius: 10px;
font-size: 1rem;
transition: all 0.3s;
background: white;
}
.form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.2);
outline: none;
}
.range-container {
display: flex;
align-items: center;
gap: 20px;
}
.range-container input[type="range"] {
flex: 1;
height: 8px;
border-radius: 4px;
background: var(--light-gray);
outline: none;
}
.range-value {
background: var(--primary);
color: white;
padding: 6px 15px;
border-radius: 20px;
min-width: 80px;
text-align: center;
font-weight: 600;
}
.checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 15px;
}
.checkbox-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 15px;
background: var(--light-gray);
border-radius: 8px;
transition: all 0.2s;
}
.checkbox-item:hover {
background: #dbeafe;
}
.checkbox-item input {
width: 20px;
height: 20px;
}
.btn {
display: inline-block;
padding: 15px 30px;
background: var(--primary);
color: white;
border: none;
border-radius: 10px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
}
.btn:hover {
background: var(--secondary);
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(52, 152, 219, 0.4);
}
.btn:active {
transform: translateY(-1px);
}
.btn-block {
display: block;
width: 100%;
text-align: center;
}
.btn-success {
background: var(--success);
box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3);
}
.btn-success:hover {
background: #27ae60;
box-shadow: 0 6px 15px rgba(46, 204, 113, 0.4);
}
.btn-light {
background: var(--light-gray);
color: var(--dark);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.btn-light:hover {
background: #d1d7dc;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}
.config-output {
background: #1e2b3c;
color: #f0f7ff;
border-radius: 10px;
padding: 25px;
font-family: 'Fira Code', 'Courier New', monospace;
font-size: 0.95rem;
line-height: 1.8;
max-height: 600px;
overflow: auto;
white-space: pre;
margin-bottom: 25px;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
}
.actions {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.actions .btn {
flex: 1;
min-width: 200px;
}
.param-row {
display: flex;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.param-row:last-child {
border-bottom: none;
}
.param-name {
flex: 0 0 35%;
font-weight: 600;
color: var(--dark);
}
.param-value {
flex: 0 0 65%;
color: var(--gray);
}
.tabs {
display: flex;
border-bottom: 2px solid var(--light-gray);
margin-bottom: 25px;
flex-wrap: wrap;
}
.tab {
padding: 12px 25px;
cursor: pointer;
border-bottom: 3px solid transparent;
transition: all 0.3s;
font-weight: 600;
color: var(--gray);
}
.tab.active {
border-bottom-color: var(--primary);
color: var(--primary);
background: rgba(52, 152, 219, 0.1);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.highlight {
color: #5dade2;
font-weight: bold;
}
.comment {
color: #7f8c8d;
font-style: italic;
}
.value {
color: #f39c12;
}
footer {
text-align: center;
padding: 25px;
color: rgba(255, 255, 255, 0.7);
font-size: 1rem;
background: rgba(0, 0, 0, 0.2);
border-radius: 15px;
margin-top: 20px;
}
.info-box {
background: #e3f2fd;
border-left: 4px solid var(--primary);
padding: 18px;
border-radius: 0 10px 10px 0;
margin: 25px 0;
font-size: 0.95rem;
}
.recommendation {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background: #e8f4f8;
border-radius: 10px;
margin: 20px 0;
border-left: 4px solid var(--success);
}
.recommendation i {
color: var(--success);
font-size: 1.5rem;
flex-shrink: 0;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 768px) {
.form-grid {
grid-template-columns: 1fr;
}
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 300px;
background-color: var(--dark);
color: #fff;
text-align: center;
border-radius: 6px;
padding: 10px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
font-size: 0.9rem;
font-weight: normal;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
h3.section-title {
padding: 10px 0;
margin: 25px 0 15px;
border-bottom: 2px solid var(--light-gray);
color: var(--primary);
font-size: 1.4rem;
display: flex;
align-items: center;
gap: 10px;
}
.card-footer {
padding: 20px;
background: var(--light-gray);
text-align: center;
font-size: 0.9rem;
color: var(--gray);
}
.custom-params {
margin-top: 30px;
}
.custom-params-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.custom-param-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
align-items: center;
}
.custom-param-row input {
flex: 1;
padding: 12px 15px;
border: 2px solid var(--border);
border-radius: 8px;
font-size: 1rem;
}
.remove-param {
background: var(--danger);
color: white;
border: none;
border-radius: 8px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.remove-param:hover {
background: #c0392b;
}
.add-param-btn {
background: var(--success);
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 8px;
}
.add-param-btn:hover {
background: #27ae60;
}
.custom-section {
margin-top: 20px;
padding-top: 20px;
border-top: 2px dashed var(--light-gray);
}
</style>
</head>
<body>
<div class="container">
<header>
<h1><i class="fas fa-database"></i> MySQL配置文件生成工具</h1>
<p>根據您的服務器配置和需求，定制生成最優化的MySQL配置文件</p>
</header>
<div class="main-content">
<div class="card">
<div class="card-header">
<h2><i class="fas fa-sliders-h"></i> 服務器與MySQL配置</h2>
</div>
<div class="card-body">
<div class="tabs">
<div class="tab active" data-tab="basic">基本設置</div>
<div class="tab" data-tab="paths">路徑設置</div>
<div class="tab" data-tab="advanced">高級設置</div>
<div class="tab" data-tab="custom">自定義參數</div>
</div>
<div class="tab-content active" id="basic-tab">
<div class="form-grid">
<div class="form-group">
<label for="cpu-cores">CPU核數 <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">服務器CPU核心數量，用于優化并行處理能力</span>
</i></label>
<input type="number" class="form-control" id="cpu-cores" min="1" max="128" value="4">
</div>
<div class="form-group">
<label for="memory-size">內存 (GB) <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">服務器可用內存總量，影響緩沖池大小等關鍵參數</span>
</i></label>
<div class="range-container">
<input type="range" id="memory-size" min="1" max="256" value="16" step="1">
<div class="range-value"><span id="memory-value">16</span> GB</div>
</div>
</div>
<div class="form-group">
<label for="disk-type">磁盤類型 <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">存儲設備類型，影響I/O相關配置</span>
</i></label>
<select class="form-control" id="disk-type">
<option value="ssd">普通SSD</option>
<option value="nvme">NVMe SSD</option>
<option value="sas">SAS HDD</option>
<option value="sata">SATA HDD</option>
</select>
</div>
<div class="form-group">
<label for="server-type">服務器類型 <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">根據使用場景優化配置</span>
</i></label>
<select class="form-control" id="server-type">
<option value="development">開發環境</option>
<option value="testing">測試環境</option>
<option value="production" selected>生產環境</option>
<option value="dedicated">專用數據庫服務器</option>
</select>
</div>
<div class="form-group">
<label for="mysql-version">MySQL 版本 <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">不同版本有不同特性和配置參數</span>
</i></label>
<select class="form-control" id="mysql-version">
<option value="8.0">MySQL 8.0 (最新)</option>
<option value="5.7">MySQL 5.7</option>
<option value="5.6">MySQL 5.6</option>
<option value="5.5">MySQL 5.5</option>
</select>
</div>
<div class="form-group">
<label for="port">端口號 <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">MySQL服務監聽的端口號</span>
</i></label>
<input type="number" class="form-control" id="port" value="3306">
</div>
</div>
<h3 class="section-title"><i class="fas fa-microchip"></i> 性能參數</h3>
<div class="form-grid">
<div class="form-group">
<label for="connection-limit">最大并發連接數 <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">MySQL服務器允許的最大同時客戶端連接數</span>
</i></label>
<input type="number" class="form-control" id="connection-limit" min="1" max="100000" value="500">
</div>
<div class="form-group">
<label for="buffer-pool-size">InnoDB緩沖池大小 <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">用于緩存InnoDB表數據和索引的內存大小</span>
</i></label>
<div class="range-container">
<input type="range" id="buffer-pool-size" min="1" max="100" value="70" step="1">
<div class="range-value"><span id="buffer-pool-value">70</span> %</div>
</div>
</div>
<div class="form-group">
<label for="tmp-table-size">臨時表大小 (MB) <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">內部內存臨時表的最大大小</span>
</i></label>
<input type="number" class="form-control" id="tmp-table-size" min="1" max="65536" value="64">
</div>
<div class="form-group">
<label for="max-allowed-packet">最大數據包 (MB) <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">服務器和客戶端之間最大允許的數據包大小</span>
</i></label>
<input type="number" class="form-control" id="max-allowed-packet" min="1" max="1024" value="64">
</div>
</div>
<div class="recommendation">
<i class="fas fa-lightbulb"></i>
<div>生產環境建議：InnoDB緩沖池設置為可用內存的70-80%，最大連接數根據應用需求調整</div>
</div>
</div>
<div class="tab-content" id="paths-tab">
<div class="form-grid">
<div class="form-group">
<label for="install-path">MySQL安裝路徑 <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">MySQL軟件安裝的根目錄</span>
</i></label>
<input type="text" class="form-control" id="install-path" value="/usr/local/mysql/">
</div>
<div class="form-group">
<label for="data-path">數據文件路徑 <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">存儲數據庫文件的目錄</span>
</i></label>
<input type="text" class="form-control" id="data-path" value="/data/mysql/">
</div>
<div class="form-group">
<label for="socket-path">Socket 路徑 <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">本地連接使用的Unix socket文件路徑</span>
</i></label>
<input type="text" class="form-control" id="socket-path" value="/tmp/mysql.sock">
</div>
<div class="form-group">
<label for="pid-path">PID 文件路徑 <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">存儲MySQL進程ID的文件路徑</span>
</i></label>
<input type="text" class="form-control" id="pid-path" value="/data/mysql/mysql.pid">
</div>
<div class="form-group">
<label for="error-log-path">錯誤日志路徑 <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">MySQL錯誤日志文件路徑</span>
</i></label>
<input type="text" class="form-control" id="error-log-path" value="/var/log/mysql/error.log">
</div>
</div>
<div class="info-box">
<strong>路徑設置說明：</strong> 確保MySQL進程對指定路徑有讀寫權限。生產環境中建議將數據目錄放在專用存儲設備上。
</div>
</div>
<div class="tab-content" id="advanced-tab">
<div class="form-grid">
<div class="form-group">
<label for="binlog-expire">Binlog保留時長 (秒) <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">二進制日志自動刪除前的保留時間</span>
</i></label>
<input type="number" class="form-control" id="binlog-expire" value="86400">
</div>
<div class="form-group">
<label for="timezone">默認時區 <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">MySQL服務器使用的時區設置</span>
</i></label>
<input type="text" class="form-control" id="timezone" value="+08:00">
</div>
<div class="form-group">
<label for="gtid">GTID一致性 <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">全局事務標識符，主從復制必需</span>
</i></label>
<select class="form-control" id="gtid">
<option value="OFF">OFF</option>
<option value="ON">ON</option>
</select>
</div>
<div class="form-group">
<label for="interactive-timeout">interactive_timeout (秒) <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">交互式連接的空閑超時時間</span>
</i></label>
<input type="number" class="form-control" id="interactive-timeout" value="28800">
</div>
<div class="form-group">
<label for="wait-timeout">wait_timeout (秒) <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">非交互式連接的空閑超時時間</span>
</i></label>
<input type="number" class="form-control" id="wait-timeout" value="28800">
</div>
<div class="form-group">
<label for="dns-lookup">DNS名稱解析 <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">是否啟用主機名解析</span>
</i></label>
<select class="form-control" id="dns-lookup">
<option value="ON">啟用</option>
<option value="OFF" selected>禁用</option>
</select>
</div>
<div class="form-group">
<label for="isolation-level">事務隔離級別 <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">事務的隔離級別設置</span>
</i></label>
<select class="form-control" id="isolation-level">
<option value="REPEATABLE-READ">REPEATABLE-READ</option>
<option value="READ-COMMITTED">READ-COMMITTED</option>
<option value="READ-UNCOMMITTED">READ-UNCOMMITTED</option>
<option value="SERIALIZABLE">SERIALIZABLE</option>
</select>
</div>
<div class="form-group">
<label for="case-sensitive">大小寫敏感 <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">數據庫和表名是否區分大小寫</span>
</i></label>
<select class="form-control" id="case-sensitive">
<option value="1">不區分大小寫</option>
<option value="0" selected>區分大小寫 (Linux默認)</option>
</select>
</div>
<div class="form-group">
<label for="flush-method">數據刷新方法 <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">InnoDB數據刷新到磁盤的方法</span>
</i></label>
<select class="form-control" id="flush-method">
<option value="fsync">fsync (默認)</option>
<option value="O_DSYNC">O_DSYNC</option>
<option value="O_DIRECT">O_DIRECT</option>
<option value="littlesync">littlesync</option>
<option value="nosync">nosync</option>
</select>
</div>
<div class="form-group">
<label for="log-error-verbosity">錯誤日志級別 <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">錯誤日志的詳細程度</span>
</i></label>
<select class="form-control" id="log-error-verbosity">
<option value="1">1 (ERROR)</option>
<option value="2">2 (WARNING)</option>
<option value="3">3 (INFORMATION)</option>
</select>
</div>
<div class="form-group">
<label for="ddl-log">InnoDB DDL日志 <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">是否記錄數據定義語言操作日志</span>
</i></label>
<select class="form-control" id="ddl-log">
<option value="OFF">OFF</option>
<option value="ON">ON</option>
</select>
</div>
<div class="form-group">
<label for="deadlock-log">打印死鎖信息 <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">是否在錯誤日志中記錄死鎖信息</span>
</i></label>
<select class="form-control" id="deadlock-log">
<option value="OFF">OFF</option>
<option value="ON">ON</option>
</select>
</div>
<div class="form-group">
<label for="mysqlx">啟用MySQL X <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">是否啟用MySQL X協議</span>
</i></label>
<select class="form-control" id="mysqlx">
<option value="OFF">禁用</option>
<option value="ON">啟用</option>
</select>
</div>
<div class="form-group">
<label for="slow-query-log">慢查詢日志 <i class="fas fa-info-circle info-icon tooltip">
<span class="tooltiptext">是否記錄執行時間過長的查詢</span>
</i></label>
<select class="form-control" id="slow-query-log">
<option value="OFF">OFF</option>
<option value="ON">ON</option>
</select>
</div>
</div>
</div>
<div class="tab-content" id="custom-tab">
<div class="custom-section">
<h3 class="section-title"><i class="fas fa-plus-circle"></i> 添加自定義參數</h3>
<p>在此區域添加任何未包含在表單中的MySQL配置參數。</p>
<div class="custom-params">
<div class="custom-params-header">
<h4>自定義參數列表</h4>
<button id="add-param" class="add-param-btn">
<i class="fas fa-plus"></i> 添加參數
</button>
</div>
<div id="custom-params-container">
<div class="custom-param-row">
<input type="text" class="param-name-input" placeholder="參數名稱 (例如: innodb_buffer_pool_instances)">
<input type="text" class="param-value-input" placeholder="參數值 (例如: 8)">
<button class="remove-param"><i class="fas fa-times"></i></button>
</div>
</div>
</div>
<div class="info-box">
<strong>使用提示：</strong> 添加的自定義參數將包含在生成的配置文件中。請確保使用正確的參數名稱和格式。
</div>
</div>
</div>
<div class="form-group">
<button id="generate-btn" class="btn btn-block">
<i class="fas fa-cog"></i> 生成配置文件
</button>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2><i class="fas fa-file-code"></i> 配置文件輸出</h2>
</div>
<div class="card-body">
<div class="config-output" id="config-output">
# MySQL配置文件將在此處生成
# 請設置左側參數并點擊"生成配置文件"按鈕
</div>
<div class="actions">
<button id="copy-btn" class="btn btn-light">
<i class="fas fa-copy"></i> 復制到剪貼板
</button>
<button id="download-btn" class="btn btn-success">
<i class="fas fa-download"></i> 下載配置文件
</button>
<button id="reset-btn" class="btn btn-light">
<i class="fas fa-redo"></i> 重置配置
</button>
</div>
<div class="recommendation">
<i class="fas fa-info-circle"></i>
<div><strong>配置文件路徑：</strong> /etc/my.cnf 或 /etc/mysql/my.cnf。修改后需重啟MySQL服務生效。</div>
</div>
<div class="info-box">
<strong>使用建議：</strong>
<ul>
<li>生產環境請仔細測試生成的配置</li>
<li>根據實際負載情況調整內存相關參數</li>
<li>定期檢查MySQL錯誤日志和慢查詢日志</li>
<li>重要配置修改前備份原配置文件</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2><i class="fas fa-book"></i> 配置參數說明</h2>
</div>
<div class="card-body">
<div class="param-row">
<div class="param-name">innodb_buffer_pool_size</div>
<div class="param-value">InnoDB緩沖池大小，用于緩存數據和索引。建議設置為物理內存的70-80%</div>
</div>
<div class="param-row">
<div class="param-name">max_connections</div>
<div class="param-value">最大并發客戶端連接數。設置過高可能導致內存不足</div>
</div>
<div class="param-row">
<div class="param-name">innodb_flush_method</div>
<div class="param-value">InnoDB數據刷新方法。SSD建議使用O_DIRECT</div>
</div>
<div class="param-row">
<div class="param-name">tmp_table_size</div>
<div class="param-value">內部內存臨時表的最大大小。超過此大小將使用磁盤</div>
</div>
<div class="param-row">
<div class="param-name">max_allowed_packet</div>
<div class="param-value">服務器和客戶端之間最大允許的數據包大小</div>
</div>
<div class="param-row">
<div class="param-name">binlog_expire_logs_seconds</div>
<div class="param-value">二進制日志自動刪除前的保留時間（秒）</div>
</div>
<div class="param-row">
<div class="param-name">skip_name_resolve</div>
<div class="param-value">禁用DNS主機名解析，提高連接速度</div>
</div>
</div>
<div class="card-footer">
本工具生成的配置僅供參考，請根據實際環境進行調整
</div>
</div>
<footer>
<p>MySQL配置文件生成工具 增強版 © 2023 | 專業數據庫配置解決方案</p>
</footer>
</div>
<script>
// DOM元素
const memorySize = document.getElementById('memory-size');
const memoryValue = document.getElementById('memory-value');
const bufferPoolSize = document.getElementById('buffer-pool-size');
const bufferPoolValue = document.getElementById('buffer-pool-value');
const generateBtn = document.getElementById('generate-btn');
const copyBtn = document.getElementById('copy-btn');
const downloadBtn = document.getElementById('download-btn');
const resetBtn = document.getElementById('reset-btn');
const configOutput = document.getElementById('config-output');
const tabs = document.querySelectorAll('.tab');
const addParamBtn = document.getElementById('add-param');
const customParamsContainer = document.getElementById('custom-params-container');
// 更新范圍值顯示
memorySize.addEventListener('input', () => {
memoryValue.textContent = memorySize.value;
});
bufferPoolSize.addEventListener('input', () => {
bufferPoolValue.textContent = bufferPoolSize.value;
});
// 標簽頁切換
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// 移除所有活動標簽
tabs.forEach(t => t.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('active'));
// 添加當前活動標簽
tab.classList.add('active');
const tabId = tab.getAttribute('data-tab');
document.getElementById(`${tabId}-tab`).classList.add('active');
});
});
// 添加自定義參數行
addParamBtn.addEventListener('click', () => {
const paramRow = document.createElement('div');
paramRow.className = 'custom-param-row';
paramRow.innerHTML = `
<input type="text" class="param-name-input" placeholder="參數名稱 (例如: innodb_buffer_pool_instances)">
<input type="text" class="param-value-input" placeholder="參數值 (例如: 8)">
<button class="remove-param"><i class="fas fa-times"></i></button>
`;
customParamsContainer.appendChild(paramRow);
// 添加刪除事件
paramRow.querySelector('.remove-param').addEventListener('click', () => {
paramRow.remove();
});
});
// 初始刪除按鈕事件綁定
document.querySelectorAll('.remove-param').forEach(btn => {
btn.addEventListener('click', function() {
this.parentElement.remove();
});
});
// 生成配置文件
generateBtn.addEventListener('click', generateConfig);
function generateConfig() {
// 獲取所有配置值
const cpuCores = document.getElementById('cpu-cores').value;
const memory = parseInt(memorySize.value);
const diskType = document.getElementById('disk-type').value;
const serverType = document.getElementById('server-type').value;
const version = document.getElementById('mysql-version').value;
const port = document.getElementById('port').value;
const connections = parseInt(document.getElementById('connection-limit').value);
const bufferPoolPercent = parseInt(bufferPoolSize.value);
const tmpTableSize = parseInt(document.getElementById('tmp-table-size').value);
const maxPacket = parseInt(document.getElementById('max-allowed-packet').value);
const installPath = document.getElementById('install-path').value;
const dataPath = document.getElementById('data-path').value;
const socketPath = document.getElementById('socket-path').value;
const pidPath = document.getElementById('pid-path').value;
const errorLogPath = document.getElementById('error-log-path').value;
const binlogExpire = document.getElementById('binlog-expire').value;
const timezone = document.getElementById('timezone').value;
const gtid = document.getElementById('gtid').value;
const interactiveTimeout = document.getElementById('interactive-timeout').value;
const waitTimeout = document.getElementById('wait-timeout').value;
const dnsLookup = document.getElementById('dns-lookup').value;
const isolationLevel = document.getElementById('isolation-level').value;
const caseSensitive = document.getElementById('case-sensitive').value;
const flushMethod = document.getElementById('flush-method').value;
const logErrorVerbosity = document.getElementById('log-error-verbosity').value;
const ddlLog = document.getElementById('ddl-log').value;
const deadlockLog = document.getElementById('deadlock-log').value;
const mysqlx = document.getElementById('mysqlx').value;
const slowQueryLog = document.getElementById('slow-query-log').value;
// 計算緩沖池大小
const bufferPoolSizeMB = Math.round((memory * 1024) * (bufferPoolPercent / 100));
// 收集自定義參數
let customParams = "";
document.querySelectorAll('.custom-param-row').forEach(row => {
const nameInput = row.querySelector('.param-name-input');
const valueInput = row.querySelector('.param-value-input');
if (nameInput.value.trim() && valueInput.value.trim()) {
customParams += `${nameInput.value.trim()} = ${valueInput.value.trim()}\n`;
}
});
// 生成配置內容
let config = `# MySQL Configuration File (my.cnf)
# Generated by MySQL Config Generator (Enhanced)
# Version: MySQL ${version}
# Server Type: ${serverType}
# Server Hardware: ${cpuCores} Cores, ${memory}GB RAM, ${diskType.toUpperCase()} Disk
[mysqld]
# ==================== Basic Settings ====================
port = ${port}
basedir = ${installPath}
datadir = ${dataPath}
socket = ${socketPath}
pid-file = ${pidPath}
default-time-zone = '${timezone}'
default-storage-engine = InnoDB
max_connections = ${connections}
max_connect_errors = 10000
skip-name-resolve = ${dnsLookup === 'OFF' ? 1 : 0}
transaction_isolation = ${isolationLevel}
lower_case_table_names = ${caseSensitive}
# ==================== Timeout Settings ====================
interactive_timeout = ${interactiveTimeout}
wait_timeout = ${waitTimeout}
# ==================== Memory Settings ====================
key_buffer_size = ${memory * 16}M
innodb_buffer_pool_size = ${bufferPoolSizeMB}M
innodb_log_file_size = ${bufferPoolSizeMB > 1024 ? '1024M' : '512M'}
innodb_log_buffer_size = ${bufferPoolSizeMB > 1024 ? '64M' : '32M'}
tmp_table_size = ${tmpTableSize}M
max_heap_table_size = ${tmpTableSize}M
max_allowed_packet = ${maxPacket}M
thread_cache_size = ${cpuCores * 2}
innodb_thread_concurrency = ${cpuCores * 2}
# ==================== InnoDB Settings ====================
innodb_file_per_table = 1
innodb_flush_method = ${flushMethod}
innodb_flush_log_at_trx_commit = ${serverType === 'production' ? 1 : 2}
innodb_lock_wait_timeout = 50
innodb_print_all_deadlocks = ${deadlockLog === 'ON' ? 1 : 0}
innodb_log_compressed_pages = OFF
# ==================== Binary Logging ====================
log-bin = ${dataPath}mysql-bin
binlog_format = ROW
binlog_expire_logs_seconds = ${binlogExpire}
sync_binlog = 1
gtid_mode = ${gtid}
enforce_gtid_consistency = ${gtid}
# ==================== Logging Settings ====================
log_error = ${errorLogPath}
log_error_verbosity = ${logErrorVerbosity}
slow_query_log = ${slowQueryLog}
slow_query_log_file = ${dataPath}slow.log
long_query_time = 2
log_queries_not_using_indexes = 0
log_throttle_queries_not_using_indexes = 10
innodb_print_ddl_logs = ${ddlLog === 'ON' ? 1 : 0}
# ==================== Security & Optimization ====================
local_infile = OFF
performance_schema = ON
explicit_defaults_for_timestamp = 1
mysqlx = ${mysqlx}
# ==================== Advanced Options ====================
innodb_io_capacity = ${diskType === 'nvme' ? 20000 : (diskType === 'ssd' ? 10000 : 2000)}
innodb_io_capacity_max = ${diskType === 'nvme' ? 40000 : (diskType === 'ssd' ? 20000 : 4000)}
innodb_read_io_threads = ${cpuCores}
innodb_write_io_threads = ${cpuCores}
innodb_purge_threads = ${cpuCores > 4 ? 4 : 2}
`;
// 添加自定義參數部分
if (customParams) {
config += `\n# ==================== Custom Parameters ====================\n`;
config += customParams;
}
// 添加文件結尾
config += `
[mysqld_safe]
log_error = ${errorLogPath}
[client]
port = ${port}
socket = ${socketPath}
# End of configuration file
`;
configOutput.textContent = config;
}
// 復制到剪貼板
copyBtn.addEventListener('click', () => {
const textArea = document.createElement('textarea');
textArea.value = configOutput.textContent;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
// 顯示復制成功反饋
copyBtn.innerHTML = '<i class="fas fa-check"></i> 已復制!';
setTimeout(() => {
copyBtn.innerHTML = '<i class="fas fa-copy"></i> 復制到剪貼板';
}, 2000);
});
// 下載配置文件
downloadBtn.addEventListener('click', () => {
const content = configOutput.textContent;
const blob = new Blob([content], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'mysql-config.cnf';
document.body.appendChild(a);
a.click();
// 清理
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, 100);
});
// 重置配置
resetBtn.addEventListener('click', () => {
document.getElementById('cpu-cores').value = 4;
memorySize.value = 16;
memoryValue.textContent = 16;
document.getElementById('disk-type').value = 'ssd';
document.getElementById('server-type').value = 'production';
document.getElementById('mysql-version').value = '8.0';
document.getElementById('port').value = 3306;
document.getElementById('connection-limit').value = 500;
bufferPoolSize.value = 70;
bufferPoolValue.textContent = 70;
document.getElementById('tmp-table-size').value = 64;
document.getElementById('max-allowed-packet').value = 64;
document.getElementById('install-path').value = '/usr/local/mysql/';
document.getElementById('data-path').value = '/data/mysql/';
document.getElementById('socket-path').value = '/tmp/mysql.sock';
document.getElementById('pid-path').value = '/data/mysql/mysql.pid';
document.getElementById('error-log-path').value = '/var/log/mysql/error.log';
document.getElementById('binlog-expire').value = 86400;
document.getElementById('timezone').value = '+08:00';
document.getElementById('gtid').value = 'OFF';
document.getElementById('interactive-timeout').value = 28800;
document.getElementById('wait-timeout').value = 28800;
document.getElementById('dns-lookup').value = 'OFF';
document.getElementById('isolation-level').value = 'REPEATABLE-READ';
document.getElementById('case-sensitive').value = '0';
document.getElementById('flush-method').value = 'fsync';
document.getElementById('log-error-verbosity').value = '1';
document.getElementById('ddl-log').value = 'OFF';
document.getElementById('deadlock-log').value = 'OFF';
document.getElementById('mysqlx').value = 'OFF';
document.getElementById('slow-query-log').value = 'OFF';
// 重置自定義參數
customParamsContainer.innerHTML = `
<div class="custom-param-row">
<input type="text" class="param-name-input" placeholder="參數名稱 (例如: innodb_buffer_pool_instances)">
<input type="text" class="param-value-input" placeholder="參數值 (例如: 8)">
<button class="remove-param"><i class="fas fa-times"></i></button>
</div>
`;
// 重新綁定刪除按鈕事件
document.querySelector('.remove-param').addEventListener('click', function() {
this.parentElement.remove();
});
generateConfig();
});
// 初始化生成默認配置
window.addEventListener('load', generateConfig);
</script>
</body>
</html>
主要功能亮點
完整的MySQL配置參數：
CPU核數和內存設置
磁盤類型選擇（SSD/NVMe/HDD）
服務器類型（開發/測試/生產）
MySQL版本選擇（5.5-8.0）
路徑設置（安裝路徑、數據路徑、socket等）
高級參數（GTID、時區、超時設置等）
新增的自定義參數功能：
在"自定義參數"標簽頁中添加任意MySQL配置
動態添加/刪除自定義參數行
自定義參數將包含在生成的配置文件中
強大的輸出功能：
實時生成配置文件預覽
一鍵復制到剪貼板
下載配置文件功能
重置所有配置選項
用戶體驗優化：
標簽頁式布局組織配置類別
詳細的工具提示說明
響應式設計適配各種屏幕
美觀的現代化UI
參數說明區域
使用說明
在左側面板中配置服務器參數和MySQL設置
在"自定義參數"標簽頁中添加任何未包含在表單中的MySQL參數
點擊"生成配置文件"按鈕生成配置
使用"復制到剪貼板"或"下載配置文件"獲取配置
將配置文件保存為my.cnf并放置到MySQL配置目錄
重啟MySQL服務使配置生效
下載鏈接
鏈接: https://pan.baidu.com/s/1LHCAp0t2UU727RtdPAUhvQ
提取碼: 32ug
浙公網安備 33010602011771號