如何從服務器頁面中的 SQLite 中提取數據，並在不同的 javascript 文件中使用數據？

Question

我正在嘗試在客戶端使用 HTML/CSS/JavaScript 制作網站，並在服務器端使用 Node.js 和 SQLite。

下面是我在“app.js”中編寫的代碼，這是我的服務器頁面。

var express = require('express');
var app = express();
var fs = require('fs');
const sqlite3 = require('sqlite3');
const sqlite = require('sqlite');
app.use(express.static('public'))


async function getDBConnection(){
    const db = await sqlite.open({
        filename: "author.db",
        driver: sqlite3.Database
    });
    return db;
}

app.get('/', async function(req, res){
    let db = await getDBConnection();
    let authors = await db.all("SELECT * from author");
    await db.close();
})

var port = 3000;
app.listen(port, function(){
    console.log('server on! http://localhost:' + port);
});

我正在嘗試從 author.db 中提取數據，並在單獨的 javascript 文件（即“script.js”文件）中使用提取的數據。 我有什么辦法可以做到這一點嗎？ 我嘗試在我的 index.html 文件中放置兩個腳本標簽，但出現錯誤，表明服務器無法找到 app.js 文件。

下面是我的 index.html 代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Main Page</title>
        <link rel = "stylesheet" type = "text/css" href = "main.css">
    </head>
    <body id = "i_body">
        <div class = "fpage">
            <main>
            </main>
        </div>
        <script src = "app.js></script>
        <script src = "./script.js"></script>
    </body>
</html>

Answer 1

所以你的 app.js 就是你的節點服務器。 它作為后端服務器運行 - 您不會將其作為前端的參考。 您的前端必須向后端服務器發出請求（通常使用 axios 之類的庫），該請求將獲取后端提供給您的數據。 因此，在您的 get '/' 部分中，您將希望使用您的記錄返回 json 響應。 然后在您的客戶端，使用像axios這樣的庫來獲取數據，然后以您喜歡的方式使用它。

編輯：

您的服務器代碼可能如下所示：

var express = require('express');
var app = express();
var fs = require('fs');
const sqlite3 = require('sqlite3');
const sqlite = require('sqlite');
app.use(express.static('public'))


async function getDBConnection(){
    const db = await sqlite.open({
        filename: "author.db",
        driver: sqlite3.Database
    });
    return db;
}

app.get('/api/authors', async function(req, res){
    let db = await getDBConnection();
    let authors = await db.all("SELECT * from author");
    await db.close();
    return res.json(authors)
})

var port = 3000;
app.listen(port, function(){
    console.log('server on! http://localhost:' + port);
});

請注意，您現在正在為 api 端點提供 json - 在本例中是/api/authors ，盡管這可以是任何東西。

將您的客戶端文件放在public文件夾中 - 所以index.html和script.js應該在那里。 您的 index.html 文件應如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Main Page</title>
        <link rel = "stylesheet" type = "text/css" href = "main.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
    </head>
    <body id = "i_body">
        <div class = "fpage">
            <main>
            </main>
        </div>
        <script src = "./script.js"></script>
    </body>
</html>

請注意，我已經包含了 axios 庫的 CDN，並刪除了對客戶端中節點部分的引用。 您的script.js可能如下所示：

axios.get('http://localhost:3000/api/authors').then((res) => {
  console.log(res.data)
})

在這里你可以看到我正在使用 axios 庫來調用后端，使用我之前提到的端點/api/authors 。 它將 json 作為res.data 。 到那時，您可以為所欲為。 希望有幫助！

如何從服務器頁面中的 SQLite 中提取數據，並在不同的 javascript 文件中使用數據？

問題描述

1 個解決方案

解決方案1
0 已采納 2021-06-03 13:40:50

如何從服務器頁面中的 SQLite 中提取數據，並在不同的 javascript 文件中使用數據？

問題描述

1 個解決方案

解決方案1 0 已采納 2021-06-03 13:40:50

解決方案1
0 已采納 2021-06-03 13:40:50