我可以以无服务器的方式使用sql.js吗？
我可以以无服务器的方式使用sql.js吗？
提问于 2021-11-08 18:06:41
我想在浏览器中实现对SQLite数据库的只读访问，在浏览器中，我从存放数据库的文件夹(而不是服务器)获得必要的sql.js代码。
这有可能吗?如果可能的话，如何做到？我可以用久负盛名的方式向你展示“我的代码”，但没有什么东西能接近你。
回答 1
Stack Overflow用户
发布于 2022-07-24 10:10:55
是的是可能的。下面的HTML和JavaScript示例可以在我的本地主机web服务器上工作。这两条参考资料帮助我找到了答案：
用SQLite插件在web上实现JavaScript --节点和浏览器
我结合了两个引用的部分来创建示例。请注意，sql-wasm.wasm和sql-wasm.js文件应该与JavaScript和JavaScript文件位于同一个目录中。我希望演示说明自己。如果你有问题，让它发挥作用，张贴评论，我会尝试提供它的在线某处。
index.html
<!DOCTYPE html>
<html>
<head>
<title>SQL.js sqlite3 Upload Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<script type="text/javascript" src="sql-wasm.js"></script>
</head>
<body>
<label for="query">SQL Query</label>: <input id="query" type="text" size="60" maxlength="200" value="" placeholder="SELECT * FROM [employees]" /><br/>
<label for="resultColumn">Column Name</label>: <input id="resultColumn" type="text" size="30" maxlength="30" value="" placeholder="first_name" /><br/>
<input type="file" id="fileElem" multiple accept="application/octet-stream" style="display:none">
<a href="#" id="fileSelect">Select some files</a>
<div id="fileList">
<p>No files selected!</p>
</div>
<script type="text/javascript" src="sqljs-import.js"></script>
<noscript> Please enable javascript to view the site </noscript>
</body>
</html>sqljs-import.js
if (!window.FileReader) {
alert('Your browser does not support HTML5 \'FileReader\' function required to open a file.');
throw new Error('Your browser does not support HTML5 \'FileReader\' function required to open a file.');
}
const fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem"),
fileList = document.getElementById("fileList"),
queryElem = document.getElementById("query"),
resultElem = document.getElementById("resultColumn");
/**
* Event listener callback for the FileReader onload event.
*
*/
function onLoadCallback(fileEvent) {
const initSqlJsPromise = initSqlJs({
locateFile: function(file){ return `${file}`; }
});
initSqlJsPromise.then(function(SQL) {
const query = queryElem.value;
const resultColumn = resultElem.value;
fileList.innerHTML = "";
const list = document.createElement("ul");
fileList.appendChild(list);
const uInt8Array = new Uint8Array( fileEvent.target.result );
const db = new SQL.Database(uInt8Array);
const stmt = db.prepare(query);
while (stmt.step()) {
const row = stmt.getAsObject()
const li = document.createElement("li");
list.appendChild(li);
const info = document.createElement("span");
info.innerHTML = `${resultColumn}: ${row[resultColumn]}`;
li.appendChild(info);
}
});
}
/**
* Event listener callback for the file upload input field.
*
*/
function handleFiles() {
if (!this.files.length) {
fileList.innerHTML = "<p>No files selected!</p>";
} else {
var filereader = new FileReader();
filereader.onload = onLoadCallback;
for (let i = 0; i < this.files.length; i++) {
filereader.readAsArrayBuffer(this.files[i]);
}
}
}
fileSelect.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click();
}
e.preventDefault(); // prevent navigation to "#"
}, false);
fileElem.addEventListener("change", handleFiles, false);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69888023
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号