1,715 讀數

使用 Postgres 数据库连接构建一个简单的 HTML 网站

经过 Abel Roy6m2024/05/05

太長; 讀書

本教程将指导您使用 JavaScript（Node JS、Express JS）创建连接到 Postgres 数据库的 HTML 网站。它涵盖了设置数据库、创建 HTML 结构、连接 Express JS 以及从 Postgres 获取数据以显示在网页上。

featured image - 使用 Postgres 数据库连接构建一个简单的 HTML 网站

做好准备吧，未来的 Web 开发人员！让我们创建一个连接到 Postgres 数据库的简单 HTML 网站。

在本例中，我们将使用 JavaScript（Node JS 和 Express JS）来实现其中间件功能。无论您是想展示您的作品集、运营博客还是完成一个关于 Web 开发的迷你项目，Web 开发都是一项仍然很受欢迎的技能。

未来的学习之路

我们将深入研究从头开始构建简单 HTML 网站的过程。我们将探索如何集成 Postgres 数据库，使用 JavaScript 作为中间件来处理 API 请求。为了增加趣味性，我们还可以使用 Bootstrap5 来设计网页！但这将在另一个博客中介绍。

使用的技术：

HTML5
Postgres（数据库）
Express JS (后端)

先决条件

确保 Postgres 已下载并准备使用。此外，下载 Node JS 以安装 npm 包，如 Express JS、Body Parser 和 Postgres API。在此处下载 Postgres在此处下载 NodeJS

步骤 1：设置 Postgres 数据库

使用psql （用于运行 SQL 命令的 CLI）或 pgAdmin （预安装）等图形用户界面创建一个新的 Postgres 数据库。在本演示中，我们将使用psql创建数据库。

打开psql并输入凭证即可开始。

创建一个名为webapp的数据库并连接到它！ （你可以为你的项目使用任何你想要的名字！）

 CREATE database webapp;

 \c webapp

通过CREATE TABLE命令开始在此数据库中构建表。您可以使用 Postgres 文档来指导您使用这些命令。为了进行演示，我们正在创建一个存储Name 、 Year和Branch的student数据库。 （如果需要，可以添加更多属性）

 CREATE TABLE student (name varchar(20), semester int, branch varchar(20));

 \d student

现在，我们可以开始通过 INSERT 命令将一些虚拟数据上传到表中

INSERT INTO student VALUES ('Abel', 4, 'CE'), ('John', 6, 'ME'), ('Doe', 2, 'ETC');

完成后，添加虚拟数据，我们可以使用以下命令查看Student表

SELECT * FROM student;

如果您按照现在的步骤操作，您将获得下面的student表！

步骤 2：创建一个简单的 HTML 网站

以下是一个简单网站的样板 HTML 代码：

 <!DOCTYPE html> <html lang='en'> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title> Student Management System </title> </head> <body> <h1> Student Management System </h1> </body> </html>

让我们开始根据需要添加自定义 div 块：

 ... <body> <h1> Student Management System </h1> <p> Here, are the student details as below: </p> <div id='students_list'></div> ...

students_list div 块用于显示已注册到数据库的学生列表。我们将使用 Express JS 从 Postgres 获取数据并在块中展示它。

步骤 3：通过 Express JS 将 HTML 连接到 Postgres

首先在Command Prompt或终端中安装必要的库

npm install express body-parser pg

让我们开始构建用于连接 HTML 和 PostgreSQL 的script.js文件。首先，我们需要导入处理请求和建立连接所需的库

// Import required modules const express = require('express'); const { Pool } = require('pg'); const path = require('path'); const bodyParser = require('body-parser');

express作为后端服务，用于解析来自 HTML webapp 的请求pg是用于建立连接path的 Postgres API，提供用于管理目录路径的实用程序body-parser是一种从 POST 请求中提取数据的中间件（我们将在后面深入理解它们）

现在让我们创建一个快速应用程序连接，并定义服务器将监听的端口。

 // Connect and Create an Express Application const app = express(); const port = 3000; // By default, its 3000, you can customize

通过创建Pool对象的实例建立与 Postgres 的连接。添加必要的值以匹配您的 Postgres 设置。

 // Create a Postgres Connection const pool = new Pool({ user: 'postgres', host: 'localhost', database: 'webapp', password: 'password', // Change to your password port: 5432, // Default Port });

添加通过express.static()中间件注册静态文件的功能。它指定提供静态文件的根目录

app.use(express.static(path.join('')));

现在，我们必须解析从应用程序发送的 HTML 请求。简而言之，它是一个用于接收来自用户的数据（例如表单或上传）的中间件

app.use(bodyParser.urlencoded({ extended: false }));

（如果您不打算接受用户的输入，请不要添加上述行。我们将在下一篇博客中添加注册表单，这就是我们需要 body-parser 的原因）

为根 URL ('/') 设置路由处理程序。这样，当对根 URL 发出 GET 请求时，服务器会通过发送位于同一目录中的“index.html”文件进行响应

// Setup Route handler app.get('/', (req, res) => { res.sendFile(path.join(__dirname, '', 'index.html')); });

现在，到了主要部分！我们现在将使用 HTTP GET 方法为“/students”URL 设置路由处理程序。此处理程序从 Postgres 数据库检索学生数据（来自查询）。

 // Route handler for GET student data app.get('/students', (req, res) => { const query = 'SELECT * FROM student;'; pool.query(query, (error, result) => { if (error) { console.error('Error occurred:', error); res.status(500).send('An error occurred while retrieving data from the database.'); } else { const students = result.rows; res.json(students); } }); });

（确保括号正确闭合）

现在，让我们指定监听服务器的行，当时间到时，它会用请求进行响应。当以下命令监听时，它会将一条消息记录到控制台。

 // Listening to Requests app.listen(port, () => { console.log(`Server listening on port ${port}`); });

（适合于调试目的）

完成了！ script.js终于完成了。让我们在index.html文件中做出一些更改，以展示必要的细节。

 ... <div id='students_list'></div> <script> // Fetch data via requests fetch('/students') .then(response => response.json()) .then(data => { const studentList = data.map( student => `<li> About ${student.name} : ${student.branch} - ${student.semester}th Sem</li>` ).join(''); document.getElementById('students_list').innerHTML = `<ul>${studentList}</ul>`; }) .catch(error => console.error('Error occurred:', error)); </script> ...