如何使用 document.querySelector 并要求 node.js 和 SQLite3

Question

我几乎是在尝试创建一个与数据库交互但似乎无法使任何一个工作的应用程序。 require 导致问题或 document 关键字导致问题（取决于我从哪里开始）我只是想知道是否有人知道解决这个问题的方法？我试图使用类和方法，这样我也可以拆分文件，但就是不想工作

如果需要，我非常愿意使用其他库或框架，所以如果您有任何建议，请告诉我。

这是我的 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“说”一种语言，否则它们是非常不同的东西。 NodeJS 被设计为服务器端，因此它使用服务器特定的东西，如操作系统相关的实用程序、文件系统。

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

那怎么办？

在通常情况下，客户端代码和服务器代码彼此了解不多。它们通过 API 像经典的客户端-服务器应用程序一样相互处理。

简单示例抽象如下：

浏览器：通过 GET 请求向服务器请求 /api/users 路由服务器：做像去数据库一样的工作，提取数据 服务器：return 数据到浏览器，很可能在 JSON 浏览器显示数据

等等

如何使用 document.querySelector 并要求 node.js 和 SQLite3

How to use document.querySelector and require with node.js and SQLite3

html

javascript

sqlite

node.js

node-sqlite3

区别

那怎么办？