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>
|