Express - это постоянно изюминка почти каждого разработчика Node. Будучи самой популярной платформой Node, Express помогает устанавливать и настраивать маршруты для отправки и получения запросов между интерфейсом и базой данных приложения.
Express - отличная платформа для одностраничных приложений, веб-сайтов, гибридов и т. Д. Он предоставляет легкие, но мощные инструменты для HTTP-серверов. На мой взгляд, как и на многие другие, это хорошая отправная точка, если вы хотите изучить фреймворк Node для разработки на стороне сервера.
Цели:
Прочитав этот пост, вы сможете:
- Настройте базовое экспресс-приложение с помощью экспресс-генератора и npx
- Настройте nodemon для автоматического обновления
- Настройте маршруты в своем экспресс-приложении
- Отображение экспресс-ответов в браузере с помощью pug view
Предпосылки:
- У вас должен быть установлен Node на вашем локальном компьютере, чтобы успешно следовать этому руководству. Щелкните здесь, чтобы перейти на страницу загрузки.
- Убедитесь, что у вас есть подходящий текстовый редактор, например код Visual Studio, на тот момент, когда мы будем вносить изменения в код. Скачать здесь.
Шаги:
Прежде всего, давайте сохраним порядок.
- Создайте папку, в которой будет находиться наше приложение.
- Откройте свой терминал (командная строка в Windows) и перейдите во вновь созданную папку.
- В терминале, чтобы настроить наше экспресс-приложение, введите следующее и нажмите Enter:
экспресс-генератор npx mynewapp - view = pug
Мы явно устанавливаем механизм шаблонов, потому что по умолчанию npx устанавливает устаревший шаблон jade.
4. После завершения процесса последовательно запускайте в терминале следующие команды, нажимая после каждой клавишу Enter:
cd mynewapp /
npm install
npm установить nodemon -g
Мы перешли в наш новый каталог, установили зависимости и, наконец, установили инструмент, который позволит нашему серверу автоматически обнаруживать изменения, которые мы вносим во время работы.
5. Если вы выполнили вышеуказанный шаг без ошибок, значит, ваше приложение полностью настроено. Пришло время внести в него некоторые изменения. Вы можете запустить приложение, выполнив любую из этих команд в терминале:
npm start
nodemon /bin/www.js
Модификация вашего приложения
Давайте создадим новое представление в нашем приложении. Откройте папку приложения в Visual Studio code или любом редакторе по вашему выбору.
- Перейдите в папку маршрутов и создайте новый файл с именем «count.js» со следующим кодом:
Это настроит маршрут, который вернет количество миллисекунд. В строке 10 мы указываем, что хотим, чтобы он отображался в файл с именем «count.pug», который мы сейчас создадим. Значения в строках 11 и 12 передаются в счетчик, и впоследствии на них можно будет ссылаться, используя их ключи.
2. Откройте файл app.js и вставьте коды, найденные в строках 9 и 25 на изображении ниже:
В строке 9 мы устанавливаем новую переменную, которая содержит маршрут, который мы только что создали в «count.js». Затем в строке 25 мы говорим нашему приложению отображать маршруты, которые мы определили в counterRouter, каждый раз, когда мы переходим к маршруту «/ count».
3. Перейдите в папку просмотров и создайте новый файл с именем «count.pug». Вставьте в файл следующий код:
Созданный нами файл имеет расширение ".pug". Обычно это происходит потому, что при настройке нашего экспресс-приложения мы устанавливаем движок просмотра на pug. Если вы знакомы с HTML, вероятно, вы отождествляете себя с некоторыми тегами, используемыми в этом файле pug. Одно из отличий заключается в том, что вместо тегов привязки мы используем отступы.
В строках 4 и 5 вы заметите, что мы ссылаемся на два значения, которые мы присвоили в файле «count.js»: title и countdown соответственно. Не обращайте особого внимания на ссылку на countDown в строке 5, это в значительной степени результат синтаксиса. По сути, это будет отображать нам представление, которое отображает наш заголовок и значение countDown.
4. Сохраните вашу работу. Убедитесь, что ваше приложение все еще работает, затем в браузере перейдите к « localhost: 3000 / count ». Вы должны увидеть ваш заголовок и значения countDown.
Вывод
Поздравляем !!!
"С БОЛЬШОЙ ВЛАСТЬЮ ПРИХОДИТ БОЛЬШАЯ ОТВЕТСТВЕННОСТЬ"
Вы успешно настроили экспресс-приложение. Поиграйте с кодом и попробуйте реализовать что-то новое.
Сообщите мне свои мысли, вопросы и предложения в разделе комментариев.
