Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Nest.js - самый важный и популярный фреймворк для создания серверных веб-приложений Node.js. В этом большом гайде мы поможем новичкам сделать первый шаг в освоении этого фреймворка для серверного JavaScript и расскажем, в чем вообще особенности<a>Nest.js</a>.

2 Для комфортного усвоения этого гайда вам потребуется:

3 <ul><li>Знание JavaScript на среднем уровне</li>

4 <li>Знание основ TypeScript, особенно синтаксиса декораторов</li>

5 <li>Базовые знания<a>Node.js</a>. Желательно, опыт с<a>Express.js</a></li>

6 <li>Знание базовых понятий<a>MVC</a>(Model-View-Controller)</li>

7 </ul>Также нам понадобятся установленные на компьютер:

8 <ul><li>Node.js версии 10+.<a>Инструкция по установке</a></li>

9 <li>Docker</li>

10 </ul>Docker мы будем использовать для развертывания базы данных. Развертывание СУБД в контейнере - один из самых простых способов. Но если вы хотите использовать другой способ, или же работать с уже имеющейся СУБД - нет проблем. В таком случае Docker вам не понадобится.

11 <h2>Содержание</h2>

12 <ul><li><a>Введение</a></li>

13 <li><a>Создадим проект</a></li>

14 <li><a>Точка входа</a></li>

15 <li><a>Статьи</a></li>

16 <li><a>Добавляем HTML-шаблоны</a></li>

17 <li><a>Добавляем просмотр статей</a></li>

18 <li><a>Добавляем статью</a></li>

19 <li><a>Заключение</a></li>

20 </ul><h2>Введение</h2>

21 Зачем нам нужен фреймворк?

22 Большинство задач в программировании - типовые. Если не брать каких-то специфических бизнес-кейсов, скорее всего все возможные задачи уже решены другими программистами и не по одному разу. Не зря в среде программистов среде так часто можно услышать шутки о "велосипедостроении". Фреймворки помогают нам писать меньше шаблонного кода и сосредоточиться на том, какую полезную работу должна делать наша программа.

23 Первым супер-популярным веб-фреймворком для Node.js былexpress.js. Nest.js значительно расширяет его функциональность, добавляет декларативности, а также помогает разработчику строить приложение в соответствии с лучшими архитектурными практиками.

24 Для примера мы напишем небольшой блог, в котором можно просматривать и добавлять статьи. Конечно, это будет очень простое приложение, но его будет достаточно для первого знакомства.

25 <h2>Создадим проект</h2>

26 Чтобы каждый раз не приходилось настраивать проект с нуля, разработчики Nest.js вооружили нас консольной утилитой - @nestjs/cli. Установим ее глобально:

27 Теперь в вашей директории с проектами выполним команду nest new, указав имя проекта.

28 Когда cli закончит свою работу, мы можем перейти в директориюnestjs-getting-startedи посмотреть, что получилось:

29 Все основные зависимости уже установлены, сборка TypeScript настроена. Кроме этого, создана папкаsrc, которая и будет интересовать нас больше всего. Здесь уже есть несколько файлов - это демонстрационное приложение от создателей Nest.js.

30 Самое приятное, что приложение уже рабочее и его можно запустить. Делается это при помощи команды

31 Теперь, если ввести в адресную строку браузера http://localhost:3000, то мы увидим возвращённую сервером фразуHello world!.

32 Запущенное командой npm run start:dev приложение будет перезагружаться каждый раз, когда изменяется исходный код проекта.

33 Остановить работающее приложение можно комбинацией клавиш Ctrl+C.

34 <h2>Точка входа</h2>

35 Точкой входа в приложение на Nest.js, как и в любом другом MVC-подобном фреймворке, являютсяконтроллеры. Пока в приложении имеется один:app.controller.ts:

36 Обратите внимание, что класс AppController и метод getHello() помечены декораторами @Controller() и @Get(). Nest.js очень широко использует декораторы, поэтому к ним лучше сразу привыкать. Они позволяют писать приложение в более декларативном ключе, указываячтомы хотим сделать, и оставляя детали реализации фреймворку.

37 Если читатель "плавает" в теме декораторов, рекомендуем к прочтению<a>эту статью</a>.

38 Декоратор @Get() говорит, что когда в приложение придёт HTTP-запрос методом GET на роут '/' (это значение по умолчанию, поэтому его можно не указывать), его следует направить в метод getHello().

39 Соответственно, значение, которое вернётся из метода, будет отправлено в теле ответа. Код ответа по умолчанию для GET-запросов - 200.

40 Метод getHello() и конструктор мы пока удалим. Взамен создадим метод index(), который будет возвращать статьи. Контроллер приобретёт такой вид:

41 Теперь, зайдя на<a>http://localhost</a>

42 мы вместоHello worldувидим такой JSON:

43 Обратите внимание, что мы возвращаем не "голый" массив, а заворачиваем его в объект c ключом articles. Нам это пригодится чуть дальше.

44 <h2>Статьи</h2>

45 Пришло время наполнить блог статьями. Но что такое "статья"? Каждая статья - объект, который будет иметь уникальный идентификатор, заголовок и контент.

46 Создадим в папкеsrcновый файлarticle.model.tsи в нём опишем класс статьи:

47 Почему id - необязательный параметр, выяснится позже - когда будем подключать базу данных.

48 Теперь представим, что у нас в блоге уже есть парочка статей. Создадим файлarticles.ts:

49 Осталось вернуть массив статей из метода index() в контроллере:

50 Если теперь запустить приложение, мы увидим в браузере следующее:

51 <h2>Добавляем HTML-шаблоны</h2>

52 Для того, чтобы пользователю было комфортнее работать с сайтом, сервер должен вернуть браузеру ответ не в формате json, а в виде html-страницы.

53 Создадим в корне проекта директориюviews- в ней мы будем размещать HTML-шаблоны.

54 <h4>Устанавливаем шаблонизатор</h4>

55 Nest.js по умолчанию не устанавливает никаких движков шаблонизации, так как не знает, какой именно по душе пользователю. Мы для этого примера возьмём<a>pug</a>(ранее известный какjade). Этот пакет нам придется установить самостоятельно:

56 Чтобы подключитьpug, перепишем функциюbootstrap(main.ts):

57 <h4>Первый шаблон</h4>

58 Наш первый шаблонindex.pugбудет выглядеть так:

59 Добавление стилей выходит за рамки этой статьи, поэтому оставим это на усмотрение читателя.

60 В контроллере добавим к методу index декоратор @Render() (импортируется из пакета @nestjs/common):

61 @Render('index') указывает фреймворку, что те данные, которые возвращаются из метода нужно не просто вернуть браузеру, а использовать для отрисовки шаблона с названиемindex(расширение не важно).

62 Готово. Теперь при запуске приложения мы увидим то, что и ожидали - html-страницу с двумя статьями.

63 <h2>Добавляем просмотр статей</h2>

64 Вapp.controller.tsдобавим в импорт декоратор @Param() и создадим новый метод:

65 Строка :id в декораторе @Get() означает, что в этот метод будут направлены запросы на корневой роут с параметром, например: GET<a>http://localhost/1</a>.

66 При помощи декоратора @Param() мы можем достать этот идентификатор из URL, преобразовать его к числу (ParseIntPipe) и использовать для поиска нужной статьи.

67 Кроме декоратора @Param() в Nest.js есть также декораторы @Query() для query-параметров и @Body() для тела запроса.

68 Добавим в папкуviewsшаблонarticle.pug:

69 Шапка будет та же самая, только в тэге title мы выведем название статьи. В теле страницы - ожидаемо title и content, а также ссылка "назад" - на главную страницу.

70 Осталось починить ссылки на главной странице:

71 Теперь, зайдя на главную страницу, можно кликнуть по ссылке "Читать" у любой из статей и увидеть содержимое статьи. А при клике на "Назад" - вернуться к списку статей. Также можно зайти на страницу по прямой ссылке, например<a>http://localhost</a>

72 <a>/1</a>.

73 <h2>Добавляем статью</h2>

74 Чтобы создать новую статью, браузер должен отправить на сервер title и content POST-запросом. Чтобы реализовать это, добавим в контроллер перед методом article два новых метода:

75 Метод getForm() не требует никакого возвращаемого значения - он просто возвращает статический HTML.

76 В методе create() реализуем добавление статьи в коллекцию. Думаю, читатель уже догадался, что декоратор @Post() означает одноимённый HTTP-глагол. Декоратор @Body() указывает фреймворку, что данные для параметра нужно брать из тела запроса. И, наконец, декоратор @Redirect(‘/’, 301) говорит, что после добавления статьи требуется переадресовать пользователя. Первый аргумент - ‘/’ обозначает корневой роут (то есть, главную страницу), а 301 - код ответа.

77 Шаблонcreate-article.pugбудет выглядеть так:

78 Добавление статей реализовано. На страницу добавления можно попасть, введя в адресной строке<a>http://localhost</a>

79 <a>/create</a>. Чтобы было чуть удобнее, добавим ссылку на эту страничку вниз списка статей.index.pugприобретёт такой вид:

80 <h2>Заключение</h2>

81 Nest.js позволяет нам написать простое приложение с минимальными усилиями. Однако истинная мощь фреймворка станет очевидна при более глубоком погружении. Среди особенно мощных возможностей, выделяющих его на фоне других:

82 <ul><li>Декларативное программирование при помощи декораторов</li>

83 <li>Встроенный DI-контейнер (<a>кратко о DI и IoC</a>)</li>

84 <li>Мощные специализированные middleware:<a>интерцепторы</a>,<a>пайпы</a>,<a>гарды</a></li>

85 <li>Механизм<a>обработки ошибок</a>"из коробки"</li>

86 <li>Поддержка любых протоколов, помимо HTTP. На Nest.js можно писать сервисы на основе RabbitMQ, Nats, Kafka или даже просто TCP-протокола.</li>

87 </ul>Чтобы освоить все это, а также более продвинутые возможности Nest.js, читателю предстоит пройти немалый путь, и автор надеется, что эта статья станет уверенным первым шагом на нем.

88 Весь код учебного проекта, который мы использовали в этой статье в качестве примера, вы можете посмотреть<a>здесь</a>.