Создаем простой сайт на Node JS
Node.js — это среда выполнения JavaScript, которая позволяет разрабатывать серверные приложения на JavaScript. В этом руководстве мы рассмотрим, как создать простой сайт на Node.js с использованием фреймворка Express.
Установка Node.js
Перед началом работы убедитесь, что у вас установлен Node.js. Если нет, скачайте и установите его с официального сайта: https://nodejs.org/
Создание проекта
Создайте новую папку для вашего проекта и перейдите в неё с помощью терминала. Затем инициализируйте новый проект Node.js с помощью следующей команды:
npm init
Заполните информацию о проекте и подтвердите создание файла package.json.
Установка Express
Express — это популярный веб-фреймворк для Node.js. Установите его с помощью команды:
npm install express --save
Создание сервера
Создайте файл app.js в корне вашего проекта и добавьте следующий код:
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Привет, мир!');
});
app.listen(port, () => {
console.log(`Сервер запущен на http://localhost:${port}`);
});
Этот код создает простой сервер, который слушает порт 3000 и отвечает на запросы к корневому пути.
Запуск сервера
Чтобы запустить сервер, выполните следующую команду:
node app.js
Откройте браузер и перейдите на http://localhost:3000. Вы увидите сообщение «Привет, мир!».
Создание маршрутов
Вы можете создавать маршруты для обработки различных запросов. Добавьте следующий код в файл app.js:
app.get('/about', (req, res) => {
res.send('О нас');
});
Теперь, если вы перейдете на http://localhost:3000/about, вы увидите сообщение «О нас».
Добавление шаблонизатора
Если вы хотите использовать шаблонизатор для отображения HTML, вы можете установить, например, EJS:
npm install ejs --save
В файле app.js добавьте код:
app.set('view engine', 'ejs');
Создайте папку views и добавьте файл index.ejs с этим содержимым:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Главная страница</title>
</head>
<body>
<h1>Добро пожаловать на наш сайт!</h1>
<p>Создано с использованием Node.js и Express.</p>
<nav>
<a href="/">Главная</a>
<a href="/about">О нас</a>
</nav>
</body>
</html>
Теперь измените маршрут / в файле app.js :
app.get('/', (req, res) => {
res.render('index');
});
Если вы перейдете на сайт вы увидите отформатированную HTML-страницу.
Статические файлы
Если вам нужно подключить статические файлы, такие как изображения, CSS или JavaScript, создайте папку public и добавьте в файл app.js этот код:
app.use(express.static('public'));
Для использования этих файлов на ваших страницах, добавьте ссылки на них в HTML-шаблоны. Например, если у вас есть файл styles.css и script.js в папке public, добавьте их так в ваш HTML-шаблон (например, index.ejs):
<head>
<meta charset="UTF-8">
<title>Главная страница</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<h1>Добро пожаловать на наш сайт!</h1>
<p>Создано с использованием Node.js и Express.</p>
<nav>
<a href="/">Главная</a>
<a href="/about">О нас</a>
</nav>
<script src="/script.js"></script>
</body>
Если вы хотите вставить изображение, разместите его в папке public и добавьте тег <img> с атрибутом src, указывающим на ваше изображение, в HTML-шаблон:
<body>
<h1>Добро пожаловать на наш сайт!</h1>
<img src="/image.jpg" alt="Описание изображения">
</body>
В итоге, мы создали простой сайт на Node.js с использованием Express. Это базовый пример, и вы можете дополнительно настроить свой сайт с помощью других модулей и функций, включая базы данных, аутентификацию и многое другое.