Java 实现web端sql编辑器代码
时间: 2023-08-09 11:05:39 浏览: 189
纯web端sql编辑器
以下是一个简单的 Java Web SQL 编辑器代码示例,供参考:
1. 前端界面代码(使用 HTML、CSS 和 JavaScript 实现)
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web SQL Editor</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h1>Web SQL Editor</h1>
</div>
<div class="toolbar">
<button onclick="executeSQL()">执行</button>
<button onclick="clearEditor()">清空</button>
</div>
<div class="editor">
<textarea id="sql-editor"></textarea>
</div>
<div class="result">
<table id="result-table"></table>
</div>
<script src="script.js"></script>
</body>
</html>
```
2. CSS 文件代码
```css
body {
margin: 0;
padding: 0;
}
.header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
.toolbar {
padding: 10px;
}
.editor {
padding: 10px;
}
#sql-editor {
width: 100%;
height: 300px;
}
.result {
padding: 10px;
}
#result-table {
border-collapse: collapse;
}
#result-table td, #result-table th {
border: 1px solid #ddd;
padding: 5px;
}
```
3. JavaScript 文件代码
```javascript
function executeSQL() {
var sql = document.getElementById("sql-editor").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var result = JSON.parse(this.responseText);
showResult(result);
}
};
xhttp.open("POST", "executeSQL", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("sql=" + sql);
}
function clearEditor() {
document.getElementById("sql-editor").value = "";
document.getElementById("result-table").innerHTML = "";
}
function showResult(result) {
var table = document.getElementById("result-table");
var html = "<tr>";
for (var i = 0; i < result.columns.length; i++) {
html += "<th>" + result.columns[i] + "</th>";
}
html += "</tr>";
for (var i = 0; i < result.rows.length; i++) {
html += "<tr>";
for (var j = 0; j < result.columns.length; j++) {
html += "<td>" + result.rows[i][j] + "</td>";
}
html += "</tr>";
}
table.innerHTML = html;
}
```
4. Java Servlet 代码
```java
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONArray;
import org.json.JSONObject;
@WebServlet("/executeSQL")
public class ExecuteSQLServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json");
PrintWriter out = response.getWriter();
JSONObject result = new JSONObject();
JSONArray columns = new JSONArray();
JSONArray rows = new JSONArray();
try {
String sql = request.getParameter("sql");
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydatabase", "root", "password");
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery(sql);
for (int i = 1; i <= rs.getMetaData().getColumnCount(); i++) {
columns.put(rs.getMetaData().getColumnName(i));
}
while (rs.next()) {
JSONArray row = new JSONArray();
for (int i = 1; i <= rs.getMetaData().getColumnCount(); i++) {
row.put(rs.getString(i));
}
rows.put(row);
}
result.put("columns", columns);
result.put("rows", rows);
out.print(result);
} catch (Exception e) {
result.put("error", e.getMessage());
out.print(result);
}
}
}
```
注意,上述代码只是一个简单的示例,实际应用中需要对其进行更多的优化和改进。例如,需要添加安全性和防止 SQL 注入等措施,还需要实现更多的 SQL 功能和界面交互效果。
阅读全文