【干货】一键生成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" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<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号