163 lines
5.5 KiB
HTML
163 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-Hans">
|
||
<head>
|
||
<!-- 设置文档的字符编码和基本URL -->
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||
<base href="https://coding.tools/cn/sql-formatter"/>
|
||
<!-- 引入样式文件 -->
|
||
<link rel="stylesheet" href="/css/unit.css?ff=1&v=20220622.1&wps=false"/>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css"/>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.4/codemirror.min.css"/>
|
||
<!-- 自定义样式内部编写 -->
|
||
<style>
|
||
/* 布局优化 */
|
||
.codewrapper {
|
||
margin: 15px 0;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* 编辑器高度设置 */
|
||
.CodeMirror {
|
||
height: 500px !important;
|
||
font-family: 'Fira Code', monospace;
|
||
}
|
||
|
||
/* 按钮组样式 */
|
||
.btn-group {
|
||
gap: 8px;
|
||
margin: 10px 0;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div id="content" class="container-fluid">
|
||
<div class="content_along_sidebar">
|
||
<a href="/" >
|
||
<img src="https://yinzhou.oss-cn-shanghai.aliyuncs.com/image/bianmu.png" width="50" height="50">
|
||
</a>
|
||
<a href="/a" >
|
||
<img src="https://yinzhou.oss-cn-shanghai.aliyuncs.com/image/buoumao.png" width="50" height="50">
|
||
</a>
|
||
<a href="/b" >
|
||
<img src="https://yinzhou.oss-cn-shanghai.aliyuncs.com/image/chaiquan.png" width="50" height="50">
|
||
</a>
|
||
<div id="headline">
|
||
<h1>SQL格式化工具</h1>
|
||
</div>
|
||
|
||
<!-- 设置表单，用于输入SQL语句 -->
|
||
<form id="options">
|
||
<div class="codewrapper size16codewrapper">
|
||
<textarea autofocus="" id="code1" name="code1" style="width: 100%;height: 800px"
|
||
placeholder="请在这里输入或者拖入文本文件."></textarea>
|
||
</div>
|
||
<br/>
|
||
<!-- 清空文本域的按钮 -->
|
||
<button type="button" class="btn btn-secondary" onclick="clear_txt()"><i class="far fa-trash-alt"></i> 清空
|
||
</button>
|
||
<!-- 格式化SQL语句的按钮 -->
|
||
<button type="button" id="submit_button" class="btn btn-primary" onclick="query()">格式化SQL</button>
|
||
<!-- 复制结果的按钮 -->
|
||
<button type="button" id="copy" class="btn btn-secondary" onclick="copy_to_clipboard()"><i
|
||
class="far fa-copy"></i> 复制结果
|
||
</button>
|
||
</form>
|
||
|
||
<!-- 显示格式化后的SQL语句 -->
|
||
<div class="codewrapper size16codewrapper">
|
||
<textarea id="code2" name="code" style="width: 100%;"
|
||
placeholder="sql格式化结果将会显示在这里."></textarea>
|
||
</div>
|
||
<br/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 引入Codemirror库和SQL模式 -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.4/codemirror.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.4/mode/sql/sql.min.js"></script>
|
||
|
||
<!-- 初始化两个文本域为Codemirror编辑器 -->
|
||
<script>
|
||
var editor1 = CodeMirror.fromTextArea(document.getElementById("code1"), {
|
||
mode: "text/x-sql",
|
||
lineNumbers: true,
|
||
lineWrapping: true,
|
||
foldGutter: true,
|
||
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
|
||
});
|
||
|
||
var editor2 = CodeMirror.fromTextArea(document.getElementById("code2"), {
|
||
mode: "text/x-sql",
|
||
lineNumbers: true,
|
||
lineWrapping: true,
|
||
foldGutter: true,
|
||
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
|
||
});
|
||
</script>
|
||
|
||
<!-- 定义清空文本域的函数 -->
|
||
<script>
|
||
function clear_txt() {
|
||
editor1.setValue("");
|
||
editor2.setValue("");
|
||
}
|
||
|
||
// 定义复制结果到剪贴板的函数
|
||
function copy_to_clipboard() {
|
||
// 获取editor2中的SQL语句
|
||
var sql = editor2.getValue();
|
||
|
||
// 创建一个临时的textarea元素
|
||
var tempTextarea = document.createElement('textarea');
|
||
tempTextarea.value = sql;
|
||
document.body.appendChild(tempTextarea);
|
||
|
||
// 选择textarea中的文本
|
||
tempTextarea.select();
|
||
tempTextarea.setSelectionRange(0, 99999); // 适用于移动设备
|
||
|
||
// 复制选中的文本到剪贴板
|
||
document.execCommand('copy');
|
||
|
||
// 移除临时的textarea元素
|
||
document.body.removeChild(tempTextarea);
|
||
|
||
// 更新按钮文本以提示用户已复制
|
||
var copy_button = document.getElementById("copy");
|
||
copy_button.innerHTML = "已复制";
|
||
setTimeout(function () {
|
||
copy_button.innerHTML = "复制结果";
|
||
}, 3000);
|
||
}
|
||
</script>
|
||
|
||
<!-- 定义格式化SQL语句的函数 -->
|
||
<script>
|
||
function query() {
|
||
// 获取editor1中的SQL语句
|
||
var sql = editor1.getValue();
|
||
|
||
// 发送POST请求到/convert接口
|
||
fetch('http://10.23.0.209:8778/convert', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
},
|
||
body: 'sql=' + encodeURIComponent(sql),
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
// 将格式化后的SQL语句设置到editor2
|
||
editor2.setValue(data.parsed_result);
|
||
})
|
||
.catch(error => {
|
||
console.error('Error:', error);
|
||
});
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html>
|