Готовьтесь, будущие веб-разработчики! Давайте создадим простой HTML-сайт, который подключается к базе данных Postgres. В этом примере мы будем использовать JavaScript (Node JS и Express JS) для реализации функций промежуточного программного обеспечения. Хотите ли вы продемонстрировать свое портфолио, вести блог или завершить мини-проект по веб-разработке, веб-разработка — это навык, который по-прежнему востребован. Предстоящий путь обучения Мы углубимся в процесс создания простого HTML-сайта с нуля. Мы рассмотрим, как интегрировать базу данных Postgres, используя JavaScript в качестве промежуточного программного обеспечения для обработки запросов API. Чтобы оживить ситуацию, мы также можем использовать Bootstrap5 для разработки веб-страницы! Но об этом будет в другом блоге. Используемые технологии: HTML5 Постгрес (база данных) Экспресс JS (бэкэнд) Предварительные условия Убедитесь, что Postgres загружен и готов к использованию. Кроме того, загрузите Node JS для установки пакетов npm, таких как Express JS, Body Parser и API Postgres. Загрузите Postgres Загрузите NodeJS здесь. здесь. Шаг 1. Настройка базы данных Postgres Создайте новую базу данных Postgres либо с помощью , который представляет собой CLI для запуска команд SQL, либо с помощью графического пользовательского интерфейса, такого как pgAdmin (который поставляется предустановленным). В этой демонстрации мы будем использовать для создания базы данных. psql psql Откройте и введите учетные данные, чтобы начать работу. psql Создайте базу данных под названием и подключитесь к ней! webapp (Вы можете использовать любое имя для своего проекта!) CREATE database webapp; \c webapp Начните создавать таблицу в этой базе данных с помощью команды . Вы можете использовать документацию Postgres, которая поможет вам с командами. Для этой демонстрации мы создаем базу данных , в которой хранятся , и . CREATE TABLE student Name Year Branch (Добавьте больше атрибутов, если хотите) 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> ... Блок div предназначен для отображения списка студентов, зарегистрированных в базе данных. Мы будем использовать Express JS для получения данных из Postgres и демонстрации их в блоке. students_list Шаг 3. Подключение HTML к Postgres через Express JS Сначала установите необходимые библиотеки в или терминале. 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'); работает как серверная служба для анализа запросов из HTML. webapp — это API Postgres для установления подключения, предоставляет утилиты для управления путями к каталогам. — это промежуточное программное обеспечение для извлечения данных из запросов POST express pg path body-parser (мы будем их понимать). в глубину по мере продвижения) Давайте теперь создадим экспресс-соединение приложения, а также определим порт, который будет прослушивать сервер. // Connect and Create an Express Application const app = express(); const port = 3000; // By default, its 3000, you can customize Установите соединение с Postgres, создав экземпляр объекта . Добавьте необходимые значения, соответствующие вашим настройкам Postgres. Pool // 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-адреса ('/'). Таким образом, когда запрос GET делается к корневому URL-адресу, сервер отвечает, отправляя файл «index.html», расположенный в том же каталоге. // Setup Route handler app.get('/', (req, res) => { res.sendFile(path.join(__dirname, '', 'index.html')); }); А теперь основная часть! Теперь мы настроим обработчик маршрута для URL-адреса «/students» с помощью метода HTTP GET. Этот обработчик извлекает данные об учащихся (из запроса) из базы данных 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> ... Запустить веб-сайт Откройте терминал, перейдите в каталог, где хранятся и , и выполните следующую команду: index.html script.js node script.js Если все работает нормально, должно отобразиться содержимое «Сервер прослушивает порт 3000». Теперь вам нужно перейти по , где вы увидите простой веб-сайт HTML, демонстрирующий введенные вами данные! http://localhost:3000/ Вуаля! Вот и все! Теперь используйте свой творческий потенциал и знания, чтобы изучить эти концепции веб-разработки и создавать еще более интересные веб-сайты! Я также добавлю еще один блог о том, как создать систему регистрации и как ее спроектировать, который скоро выйдет. Следите за новостями и оставайтесь с нами! А пока продолжайте программировать!
