如何使用文档.querySelector和require与node.js和SQLite3

Question

所以我试图创建一个与数据库交互的应用程序，但似乎无法得到任何一个工作。要么是require导致问题，要么是文档关键字导致问题(取决于我从哪里开始)，我只是想知道是否有人知道解决这个问题?我试图使用类和方法，这样我就可以拆分文件，但只是不想工作

如果需要，我非常愿意使用另一个库或框架，所以如果你有任何建议，请告诉我。

这是我的main.js

'use strict'
const handleSQLite = require('./handleSQLite.js')
let db = new handleSQLite();
db.openDatabase();

document.querySelector('.search').addEventListener('click', function() {
document.querySelector('.search-sec').classList.remove('hidden');
document.querySelector('.insert').classList.add('hidden');
document.querySelector('.remove').classList.add('hidden');
document.querySelector('.btns').classList.add('bts-search-clicked');
document.body.style.backgroundColor = "#FFB3E9";
//document.querySelector('.insert').classList.add('.search-clicked');
//document.querySelector('.insert').style.position = 'absolute';
//document.querySelector('.insert').style.bottom = '-500px';
console.log('search clicked');
});
document.querySelector('.insert').addEventListener('click', function() {
document.querySelector('.insert-sec').classList.remove('hidden');
document.querySelector('.search').classList.add('hidden');
document.querySelector('.remove').classList.add('hidden');
document.querySelector('.btns').classList.add('bts-insert-clicked');
document.body.style.backgroundColor = "#BAE1C4";
console.log('insert clicked');
});
// Remove Button Controller
document.querySelector('.remove').addEventListener('click', function() {
//document.querySelector('.insert-sec').classList.remove('hidden');
document.querySelector('.search').classList.add('hidden');
document.querySelector('.insert').classList.add('hidden');
document.querySelector('.btns').classList.add('bts-remove-clicked');
document.body.style.backgroundColor = "#BAE1FF";
console.log('remove clicked');
});

这是我的server.js

const http = require('http');
//const path = require("path");
//const express = require('express');
const fs = require('fs');
const port = 8080;
//const app = new express();
//app.use(express.static(__dirname+'./public'));

// Open Server
const server = http.createServer(function(req, res) {

// Handle main page request
if (req.url === '/'){
res.writeHead(200, { 'Content-Type': 'text/html'})
fs.readFile('index.html', function(error, data) {
if (error) {
res.writeHead(404);
res.write('Error: File Not Found');
} else {    
res.write(data);
}
res.end();
})
}
// Handle stylesheet request
else if (req.url === '/style.css') {
res.writeHead(200, { 'Content-Type': 'text/css'})
fs.readFile('style.css', function(error, data) {
if (error) {
res.writeHead(404);
res.write('Error: File Not Found');
} else {
res.write(data);
}
res.end();
})
}
// Handle Javascript request
else if (req.url === '/main.js') {
res.writeHead(200, { 'Content-Type': 'text/javascript'})
fs.readFile('main.js', function(error, data) {
if (error) {
res.writeHead(404);
res.write('Error: File Not Found');
} else {
res.write(data);
}
res.end();
})
}
// Handle image request
else if (req.url === '/img/search.png') {
res.writeHead(200, { 'Content-Type': 'image/png'})
fs.readFile('img/search.png', function(error, data) {
if (error) {
res.writeHead(404);
res.write('Error: File Not Found');
} else {
res.write(data);
}
res.end();
})
}
// Handle SQL request
else if (req.url === '/handleSQLite.js') {
res.writeHead(200, { 'Content-Type': 'text/javascript'})
fs.readFile('handleSQLite.js', function(error, data) {
if (error) {
res.writeHead(404);
res.write('Error: File Not Found');
} else {
res.write(data);
}
res.end();
})
}
// Handle database request
else if (req.url === './db/storage.db') {
res.writeHead(200, { 'Content-Type': 'text/plain'})
fs.readFile('./db/storage.db', function(error, data) {
if (error) {
res.writeHead(404);
res.write('Error: File Not Found');
} else {
res.write(data);
}
res.end();
})
}


});

// Open the port to listen to
server.listen(port, '172.16.1.80' || 'localhost', function(error) {
if (error) {
console.log('Something went wrong', error);
} else {
console.log('Server is listening on port ' + port);
}
});

这是我的handleSQLite.js，我知道这个很乱，我刚刚尝试了很多东西

const sqlite3 = require('sqlite3');
/*
const searchInput = document.getElementById('search-input');
const matchList = document.getElementById('match-list');
*/
class handleSQLite {
constructor() {
this.db;
}

openDatabase() {
this.db = new sqlite3.Database('./db/storage.db', (err) => {
if (err) {
console.error(err.message);
} else {
console.log('Connected to the in memory SQlite database.')
}
});
}
closeDatabase() {
this.db.close((err) => {
if (err) {
console.error(err.message);
}
console.log('Close the database connection.');
});
}

}
/*
const data = new handleSQLite();
data.openDatabase();
data.closeDatabase();
*/




/*
let db = new sqlite3.Database('./db/storage.db', (err) => {
if (err) {
console.error(err.message);
} else {
console.log('Connected to the in memory SQlite database.')
}
});
*/
let sqlItemSearchSuggest = `SELECT ItemName itemName
FROM   storage`
let sqlCreate = `CREATE TABLE storage(BoxNum REAL, ItemName TEXT, Location TEXT)`
let sqlInsert = "INSERT INTO storage VALUES(1, 'waffle maker', 'Storage Room')"

const searchSearchItems = async searchText => {
const searchRes = await database.db.each(`SELECT ItemName FROM storage`, (err, row) => {
if (err) {
throw err;
}
}).toArray();

console.log(searchItems);
let searchMatches = searchRes.filter(searchItem => {
console.log(searchItem);
const searchRegex = new RegExp(`^${searchText}`, 'gi');
return searchItem.itemName.match(searchRegex);
});
if (searchText.length === 0) {
searchMatches = [];
searchMatchList.innerHTML = '';
}

outputSearchHtml(searchMatches);
};

const outputSearchHtml = searchMatches => {
if (searchMatches.length > 0) {
const html = searchMatches.map(searchMatch => `
<div class ="card">
<h4>${searchMatch.name}</h4>
</div>
`).join('');
searchMatchList.innerHTML = html;
}
}
module.exports = handleSQLite;

这是非常令人沮丧的，因为我知道我想做其他的事情，但就是不能越过这个障碍。

哦，我想这也是我的index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"/>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap" rel="stylesheet">

<title>Storage Lookup</title>
</head>
<body>
<div class="btns">
<button class="sel-btn search">Search</button>
<button class="sel-btn insert">Insert</button>
<button class="sel-btn remove ">Remove</button>
</div>
<div class="search-sec hidden">
<p>by</p>
<div class="search-btns">
<button class="search-sec-btn">Box</button>
<button class="search-sec-btn">Item</button>
</div>
<div class="search-input-go">
<div class="search-input-cont">
<input type="text" id="search-input" placeholder="Item Name">
<input type="image" src="/img/search.png" name='searchbtn' class="search-btn"/>
</div>
<div id="match-list"></div>
</div>
</div>
<div class="insert-sec hidden">
<div class="insert-btns">
<input type="text" class="insert-input" id='input-insert-box' placeholder="Box Number">
<input type="text" class="insert-input" id='insert-input-item' placeholder="Item Name">
</div>
<div class="insert-btn-con">
<button class="insert-sec-btn">Insert</button>
</div>
</div>

<script type="module" src="main.js"></script>

</body>
</html>

Answer 1

差异

如果我没理解错的话，你想做的事是不可能的。你不能直接从浏览器访问数据库。

除非nodejs和浏览器端javascript "speaking"一种语言，它们是非常不同的东西。NodeJS被设计为服务器端，所以它使用服务器特定的东西，如操作系统相关的实用程序，文件系统。

所以在浏览器中运行sqlite就像在服务器上运行jquery一样——在NodeJS中没有DOM这样的东西，就像在浏览器中没有fs这样的东西。

<标题>

如何呢?在通常情况下，客户端代码和服务器代码彼此不太了解对方。它们通过API相互处理，就像传统的客户端-服务器应用程序。

简单示例如下:

浏览器:请求服务器通过GET请求/api/users路由服务器:做的工作像去DB，提取数据服务器:返回数据到浏览器，最可能是JSON浏览器显示数据

等。