Цвет

Сайт на NodeJS

129₽ 169₽

Категории:

javascriptnodejsjs

В этом скрипте будет описано, как создать базовую структуру сайта на NodeJS

Преимущество NodeJS заключается в асинхронности и удобстве взаимодействия с элементами страницы, переходящим в back-end. Все элементы страницы можно обновлять без обновления самой страницы.

Для начала убедитесь, что у вас установлен NodeJS. В windows он обычно установлен сразу, но если нет, то установите.

Далее в удобной для вас папке создайте файл

app.js

и откройте удобным для вас текстовым редактором. Мы будем использовать VSCode.

Оставим файл открытым и установим нужный нам модуль express

Для того, чтобы установить нужный модуль, нужно зайти в консоль вашей операционной системы (для Windows cmd в поиске) и зайти в выбранную ранее папку с файлом app.js . В Windows выбрать нужную папку можно командой

cd E:/folderName/folderName

Чтобы сменить диск впишите /d перед путем так

cd /d E:/myFolder/myFolder

Теперь, находясь в нужной папке напишите

npm install express

Теперь заходим в файл app.js и подключаем модуль express и встроенные модули для создания веб сервера

const express = require("express");
const { createServer } = require("node:http");
const { SocketAddress } = require("node:net");
const { join } = require("node:path");
const app = express();
const server = createServer(app);
const { stringify } = require("node:querystring");

Для подключения файлов создадим отдельную папку по соседству с файлом app.js и назовём её public. В ней будем располагать все подключаемые файлы

app.use(express.static("public"));

На этом базовая структура сайта готова. Напоминаю, чтобы подключать файлы css и скрипты, закиньте их в папку public и ссылка начинается оттуда. То есть если нужно подключить файл test.js, будет script src="test.js" или href="styles.css".

Теперь осталось дописать инструкцию для ссылок на сайте.

Когда человек вобъёт URL сайта в браузере, ему выдаст файл index.html

app.get("/", (req, res) => {
   //res.send(`user ${req.params.id}`);
   res.sendFile(join(__dirname, "index.html"));
});

Когда вобьет /login, ему выдаст файл login.html

app.get("/login", (req, res) => {
   res.sendFile(join(__dirname, "login.html"));
});

Если данные неизвестны, то нужно поставить двоеточие перед параметром так:

app.get("/users/:id", (req, res) => {
   res.sendFile(join(__dirname, "user.html"));
});

Так, вбив в браузере ссылку /users/любой_id , ему выдаст файл user.html

Кстати, (req,res) в скобочках означает request (запрос) и respond (ответ), так, чтобы получить id на сервере мы пишем

myId = req.params.id

Считать ссылку (на стороне клиента) можно будет в самом файле с помощью window.location.href и уже тут узнать id

В конце файла важно не забыть прописать код ожидания подключения по порту, рекомендую использовать порт 80, так как остальные порты нужно вводить вручную в браузере.

server.listen(80, () => {
   console.log("server running at http://localhost:80");
});

Теперь осталось запустить наш файл app.js , который будет служить сервером для нашего сайта.

Чтобы это сделать зайдите через командную строку в нужную папку (как в начале, с помощью cmd) и находясь в нужной папку введите

node app.js

После этого, зайдя по ссылке http://localhost, вы попадете на файл index.html (если вы его не создали, то создайте и впишите что-то для теста) и вуаля, всё готово. Сервер подготовлен. Чтобы остановить сервер нажмите

cntrl + C

находясь в консоли