Express е постоянно връхната точка на почти всеки разработчик на Node. Въпреки че е най-популярната рамка на Node, Express помага за настройване и конфигуриране на маршрути за изпращане и получаване на заявки между предния край и базата данни на приложение.

Express е чудесна рамка за приложения с една страница, уебсайтове, хибриди и т.н. Той предоставя леки, но мощни инструменти за HTTP сървъри. По мое мнение и много други, това е добра отправна точка, ако искате да научите рамка на Node за разработка от страна на сървъра.

Цели:

След като прегледате тази публикация, трябва да можете да:

  • Настройте основно експресно приложение с помощта на express-generator и npx
  • Настройте nodemon за автоматично опресняване
  • Настройте маршрути във вашето експресно приложение
  • Показвайте експресни отговори в браузъра с помощта на pug view

Предпоставки:

  • Трябва да имате инсталиран Node на вашата локална машина, за да следвате успешно това ръководство. Щракнете върху тук, за да отидете на страницата за изтегляне.
  • Уверете се, че имате подходящ текстов редактор, като код на визуално студио, когато ще направим промени в кода. Изтеглете го тук.

стъпки:

Първо, нека поддържаме нещата организирани.

  1. Създайте папка, която да съдържа нашето приложение.
  2. Отворете вашия терминал (командния ред в Windows) и отидете до новосъздадената папка.
  3. В терминала, за да настроите нашето експресно приложение, въведете следното и натиснете Enter:

npx експресен генератор mynewapp -- view=pug

Ние изрично настройваме механизма за шаблони, защото по подразбиране npx ще инсталира шаблон „jade“, който е остарял.

4. След като процесът приключи, изпълнете последователно следните команди в терминала, като натискате enter след всяка:

cd mynewapp/

npm инсталирайте

npm инсталирате nodemon -g

Навигирахме в нашата нова директория, инсталирахме зависимостите и накрая инсталирахме инструмент, който ще позволи на нашия сървър автоматично да открива промените, които правим, докато работим.

5. Ако сте изпълнили горната стъпка без никакви грешки, тогава вашето приложение е напълно настроено. Време е да направите някои редакции в него, можете да стартирате приложението си, като изпълните някоя от тези команди в терминала:

npm стартиране

nodemon /bin/www.js

Модифициране на вашето приложение

Нека създадем добавете нов изглед към нашето приложение. Отворете папката на приложението си в кода на Visual Studio или във всеки редактор по ваш избор.

  1. Отидете до папката routes и създайте нов файл, наречен „count.js“ със следния код:

Това ще настрои маршрут, който ще върне броя милисекунди. На ред 10 уточняваме, че искаме да се рендира във файл, наречен „count.pug“, който ще създадем след малко. Стойностите на редове 11 и 12 се предават на count и по-късно могат да бъдат препратени с помощта на техните ключове.

2. Отворете вашия файл app.js и вмъкнете кодовете, намерени на редове 9 и 25 в изображението по-долу:

На ред 9 задаваме нова променлива, която съдържа маршрута, който току-що създадохме в „count.js“. След това на ред 25 казваме на нашето приложение да рендира маршрутите, които сме дефинирали в counterRouter всеки път, когато отидем до маршрута „/count“.

3. Отидете в папката с изгледи и създайте нов файл, наречен „count.pug“. Вмъкнете следния код във файла:

Файлът, който създадохме, има разширение „.pug“. Това обикновено се дължи на факта, че когато настройваме нашето експресно приложение, ние настройваме механизма за преглед на pug. Ако сте запознати с HTML, вероятно ще се идентифицирате с някои тагове, използвани в този pug файл. Една от разликите обаче е, че вместо anchor тагове използваме отстъпи.

На редове 4 и 5 ще забележите, че правим препратка към две стойности, които присвоихме в „count.js“: съответно заглавие и обратно броене. Не обръщайте много внимание на начина, по който CountDown се споменава на ред 5, това до голяма степен е резултат от синтаксиса. По принцип това ще ни изобрази изглед, който показва нашето заглавие и стойността на CountDown.

4. Запазете работата си. Проверете дали приложението ви все още работи, след което в браузъра си отворете „localhost:3000/count»“. Трябва да видите вашето заглавие и стойности за обратно броене, които се показват.

Заключение

Честито!!!

„С ГОЛЯМА СИЛА ИДЕ ГОЛЯМА ОТГОВОРНОСТ“

Успешно настроихте своето експресно приложение. Поиграйте си с кода и опитайте да внедрите нови неща.

Кажете ми вашите мисли, въпроси и предложения в секцията за коментари.