Class 3 for SQLite: 使用 Express 和 SQLite 實作即時資料庫查詢

在這一課中，我們將透過 Express 框架和 SQLite 資料庫實現即時資料庫查詢功能。以下將詳細解釋相關概念和流程。

📁 目錄解釋

• 📦 node_modules： 這裡存放伺服器相依套件，就像是食材的儲藏室。

• 📂 views： 包含各種 HTML 檔案，代表不同的頁面。

• 🍳 index.js： 主廚所在的廚房，使用 Express 框架和 SQLite 模組設定伺服器的運作邏輯。

• 📋 package-lock.json： 記錄每次安裝套件的確切版本，就像是一份菜單清單。

• 📦 package.json： 整體設定，包含專案的基本資訊和 npm 指令。

• 📄 test_user.db： SQLite 資料庫檔案，用來儲存使用者資料。

• 📄 user.sql： 初始化資料庫的 SQL 指令，類似於一份建立基礎資料表的食譜。

🧠 概念解釋

1. 🚀 Express 框架

Express 是一個 Node.js 的 Web 應用程式框架，它簡化了建立 Web 應用程式的過程。Express 提供了一組功能強大的特性，包括中介軟體、路由和視圖等，使開發者能夠更專注於應用程式的邏輯。

2. 🗄️ SQLite 資料庫

SQLite 是一個輕量且自包含的資料庫引擎，適合嵌入式系統和小型應用程式。它與其他資料庫系統不同之處在於，SQLite 不需要獨立的伺服器進程，且可以直接透過檔案存取資料。

3. 🛠 SQLite3 模組

SQLite3 模組是 Node.js 中操作 SQLite 資料庫的工具。透過 SQLite3 模組，我們可以輕鬆地與 SQLite 資料庫進行互動，包括建立、查詢和修改資料庫中的資料。

4. 🚚 路由處理

Express 使用路由處理不同的 HTTP 請求。每個路由可以視為伺服器上的一個端點，負責回應特定的請求。透過設定路由，我們可以將不同的請求導向到不同的處理函式，實現更加結構化和模組化的程式碼。

5. 🍜 SQL 查詢

透過 SQLite3 模組，我們可以使用 SQL 語言與 SQLite 資料庫進行互動。SQL 是一種用於管理關聯式資料庫的標準語言，它包含了各種操作資料庫的命令，如 SELECT、INSERT、UPDATE 和 DELETE 等，可用於從資料庫中擷取、新增、更新和刪除資料。

6. 📄 SQL 初始化腳本

user.sql 包含初始化資料庫所需的 SQL 指令，用於建立基礎的資料表和填入初始資料。透過執行這些 SQL 指令，我們可以在 SQLite 資料庫中建立起所需的資料結構，以便後續的操作和查詢。

🛠 安裝

在開始之前，請確保已安裝 Node.js 環境。在命令列介面中執行以下指令安裝所需套件：

npm install express sqlite3

這將會安裝 Express 框架和 SQLite3 模組，以便我們能夠使用它們來建立伺服器和操作資料庫。

📊 資料庫查詢與呈現

查詢資料庫並呈現到 HTML

在 Express 框架中，我們使用 app.get() 設定路徑 /users，當客戶端訪問該路徑時，伺服器會執行以下動作：

1. 發送 SELECT * FROM user 查詢至 SQLite 資料庫。

2. 取得查詢結果，以 JSON 格式回傳給客戶端。

使用 JavaScript 動態更新 HTML

在客戶端的 HTML 檔案中，我們可以使用 JavaScript 操控 DOM，實現以下流程：

1. 利用 XMLHttpRequest 發送 GET 請求至伺服器的 /users 路徑。

2. 當伺服器回傳資料後，解析 JSON 格式的資料。

3. 遍歷資料，動態地生成 HTML 元素，並插入到指定位置，例如用戶清單的 <div>。

這

樣的流程讓網頁能夠即時地從資料庫中獲取最新的資料，並在頁面上動態顯示。