Создавать что-то для пользователей - это вечная мечта разработчиков. Вы один из тех, кто хочет использовать стек MEAN? Тебе повезло! Я сам один. Давайте вместе поговорим и начнем с основ создания веб-приложения с помощью node и express. Я расскажу вам все шаги, с помощью которых вы можете создать собственное приложение с несколькими веб-страницами и множеством функций. Это очень базовое руководство, поэтому наше приложение мало что дает. Он просто отобразит некоторые сообщения для пользователя, но эй! Для начала этого достаточно.

Node - это бэкэнд-фреймворк, написанный на JavaScript. Фактически, это единственный фреймворк JavaScript, который используется в серверной части. Остальные доступные фреймворки, построенные на JavaScript, являются исключительно интерфейсными. Здесь узел проникает, как пират, и забирает все золото. Это фреймворк, который закладывает фундамент и очень полезен для новичков, будучи довольно надежным. Теперь мы будем использовать E и N стека MEAN. E означает Express JavaScript, который используется для получения динамических данных на веб-страницах. У него странный синтаксис. Все операторы ExpressJS на самом деле являются операторами JavaScript, заключенными в квадратные скобки, например ‹%%› по отдельности.

Сначала мы создадим каталог, в котором будет находиться приложение. Назовем его мастером.

mkdir wizard
cd wizard

Если на вашем компьютере не установлены node и npm, я бы посоветовал вам сделать это в первую очередь. После того, как это будет сделано. Следующая команда используется для создания файла package.json, который отслеживает пакеты, устанавливаемые в приложении.

npm init

Теперь мы продолжим и установим пакеты, которые потребуются в нашем приложении. На данный момент я выгляжу как 50-летний инструктор, которого не волнует депрессия, которую переживает его ученик :)

npm install express body-parser ejs nodemon mongoose — save

Устанавливаемый мангуст фактически используется для создания баз данных MongoDB. Это часть серверной части, и хотя я не буду использовать ее в этом приложении сейчас, вы также можете установить ее, потому что это буква M в MEAN, и ее обязательно нужно использовать когда-нибудь позже.

Создайте файл с именем app.js в мастере папок. Это личное предпочтение. Вы можете назвать его index.ejs / server.js или как хотите.

touch app.js

Откройте указанный выше файл в любом редакторе кода и добавьте в него следующий код.

var express      = require(“express”),
    app          = express(),
    bodyParser   = require(“body-parser”),
    path         = require('path');
    mongoose     = require(“mongoose”);
app.use(bodyParser.urlencoded({extended: true}));
app.set(“view engine”, “ejs”);
app.use(express.static(path.join(__dirname, 'public')));

Круто, ребята. Я объясняю код. Вы создаете переменную с именем express и требуете в ней выражения пакета. Затем вы создаете другую переменную с именем app и используете с ней выражение express. App - это переменная, которую мы собираемся широко использовать. Он используется для направления нас на страницы, которые мы хотим показать в нашем приложении. Мы делаем то же самое со всеми установленными пакетами, требуя их в нашем приложении.

Пакет body-parser извлекает всю часть body входящего потока запросов и предоставляет ее по запросу. body. Этот модуль body - parser анализирует данные в кодировке JSON, буфера, строки и URL, отправленные с помощью запроса HTTP POST. (Не думайте, что слишком много об этом.)

Теперь мы создадим еще один каталог под названием views и добавим в него файл .ejs.

mkdir views
cd views
touch index.ejs

Откройте файл выше и напишите простой код ниже. (Обещаю, что позже сделаю это модно.) В этих файлах есть все данные HTML, которые можно сделать динамическими, когда возникнет необходимость.

<!DOCTYPE html> 
<html>
 <head>
  <title>Wizard app</title>
  <link rel='stylesheet' type='text/css'  href='/stylesheet/index.css' />
</head>
 <body>
  <div class=”wizard”>
   <h1>Hello there! Ready to be a wizard?</h1>
  </div>
 </body>
</html>

Теперь мы проверим, правильно ли все работает. Код сообщает вашему приложению, что нужно прослушивать порт 3000.

app.listen(3000, process.env.IP, function(){
 console.log(“Server has started”);
});

Теперь мы добавим сообщение, которое должно отображаться на странице при запуске приложения.

app.get(“/”, function(req, res){
 res.send(“Hello there! Ready to be a wizard?”);
});

Запрос на получение используется для отображения чего-либо на странице. Обычно он используется для отображения информации из базы данных на странице вашего приложения, но об этом позже. Здесь косая черта, которую вы видите внутри двойных кавычек, на самом деле является URL-адресом. Обычная косая черта используется для домашней страницы. По мере продолжения URL становится более сложным.

Перейдите в свой терминал, перейдите в каталог мастера и введите следующую команду:

node app.js

Откройте браузер и введите следующий URL, если вы работаете в Windows.

Localhost:3000

Приведенный ниже URL-адрес предназначен для всех, кто использует Linux:

127.0.0.1:3000

Если вы видите сообщение для мастера выше, поздравляем! Вы успешно создали свое самое первое простое приложение. Давай теперь пофантазируем.

Создайте еще один каталог с именем public, в котором мы будем хранить таблицы стилей. Создайте еще одну папку с именем таблицы стилей и файл с именем app.css. Мы будем стилизовать нашу страницу там. Итак, ваша окончательная структура каталогов должна выглядеть так:

app.js
views
 index.ejs
public
 stylesheets
  style.css

Теперь перейдите в index.ejs и внесите изменения в код. Когда нам нужно отправить текст, мы используем res.send. Обычно это не относится к крупным веб-приложениям. Нам нужно отображать целые страницы, и здесь используется движок представления, называемый ejs. Мы пишем HTML с помощью JavaScript в .ejs файлах и показываем их с помощью res.render. Таким образом, код принимает следующий вид

app.get(“/”, function(req, res){
  res.render(“index”);
});

Если вы видите следующую страницу, ваше приложение работает правильно.

Обратите внимание, что app.get теперь отображает содержимое, которое есть в файле index.ejs. Мы добавим несколько стилей, чтобы наша страница выглядела немного необычно. Он будет добавлен в style.css.

body {
 background-image:  url(https://cdn.pixabay.com/photo/2019/01/05/01/49/classic-3914475_1280.jpg);
 text-align: center;
}
#wizard {
 color: white;
 padding-right: 290px;
 padding-top: 50px;
 font-family: 'Courier New', Courier, monospace;
 animation-name: example;
 animation-duration: 4s;
 animation-delay: 2s;
 animation-iteration-count: 100;
}
@keyframes example {
 from {color: cornflowerblue;}
 to {color: white;}
}

Если вы выполнили все шаги правильно, вы увидите следующий экран:

Ваше простое приложение готово. Теперь вы можете запустить лошадей или свое воображение. Добавьте несколько страниц и перемещайтесь между ними. Добавьте кнопки и их функциональность. Что бы вы ни делали, не забывайте получать удовольствие и не пропустите анимацию на своей странице!