В упражнении на предыдущем уроке
мы построили простой HTTP-сервер, который мог бы обслуживать статический контент,
это было построено полностью с помощью Node.js.
Теперь, когда мы узнали о Express,
минималистском фреймворке, который поддерживает разработку сервера поверх Node.js,
давайте теперь рассмотрим, как мы можем использовать Express для создания того же сервера в этом упражнении.
Чтобы начать работу, перейдите в папку Node.js, которую мы использовали для хранения
всего кода для этого курса, а затем создайте там новую папку с именем node-express,
а затем перейдите в эту папку.
Теперь мы создадим
общую папку здесь в узле экспресс папки.
Затем мы перейдем к этому узлу HTTP общей папке, а затем скопируем эти два файла,
index.HTML и aboutus.html в общую папку node-express.
Мы собираемся обслуживать эти два файла с
помощью сервера Express, который мы собираемся построить в этом упражнении.
А теперь иди к терминалам.
Перейдите в папку node-express в терминале, а затем в командной строке введите npm init,
чтобы инициализировать приложение узла.
Затем для имени пакета давайте просто используем node-express,
а для описания мы скажем Node Express Examples,
а точка входа - index.js,
и все остальное то же самое, как и прежде,
и давайте создадим файл package.json.
Теперь позвольте мне открыть
проект с помощью редактора Visual Studio Code в моем случае, а затем
в файле package.json давайте войдем и добавим новый скрипт под названием start,
который является индексом узла и сохраним изменения.
Теперь, когда мы инициализировали модуль узла,
давайте продолжим и установим фреймворк Express
в проекте, чтобы использовать его для создания нашего экспресс-сервера.
Итак, в командной строке
введите npm install express.
Так вот как вы устанавливаете
модуль стороннего узла, если вы
впервые принимаете этот курс и не посещали предыдущие курсы,
то это то, что важно отметить.
Вот как вы будете устанавливать модуль узла, добавив минус минус сохранить,
мы также сохраняем информацию о том, что
этот сторонний модуль узла является зависимостью
для нашего проекта, и эта информация будет сохранена в файле package.json.
Если вы прошли предыдущие курсы специализации,
то вы уже знаете об этой информации.
Итак, давайте продолжим и установим модуль Express.
Как вы можете заметить,
мы используем Express версии 4.16.3 в этом курсе.
Итак, давайте вернемся к нашему коду.
Взглянув на файл package.json,
вы видите, что внутри файла package.json, установив Express, мы уже видим
другое свойство, которое входит в файл package.json, называемый зависимостями.
Эти зависимости отслеживают все пакеты, от
которых этот текущий проект будет зависеть.
Здесь вы видите, что Express устанавливается
там и соответствующая версия Express устанавливается здесь,
поэтому это объявляет, что этот конкретный проект
зависит от версии Express по крайней мере 4.16.3.
Кроме того, вы также видите эту папку, называемую узловыми модулями, созданными здесь.
Таким образом, здесь будут
храниться все модули сторонних узлов, установленные вашим приложением.
Теперь, когда мы делаем фиксацию Git,
мы не хотим фиксировать эту папку модулей узла.
Поэтому, чтобы игнорировать это,
давайте создадим файл с
именем.gitignore и в файле.gitignore,
давайте введем модули node_.
Таким образом, это позволяет Git знать, что мы не хотим
фиксировать папку модулей узла в репозиторий Git.
Итак, с этим давайте сохраним изменения.
Поэтому теперь, когда вы создаете репозиторий Git,
папка модулей узлов будет игнорироваться.
Это не требуется, потому что вы всегда можете воссоздать папку модулей узлов в любое время, когда
вы клонируете этот проект из вашего репозитория Git, просто введя npm install.
Это будет смотреть на файл package.json
и посмотреть на все зависимости
и зависимости разработки, которые находятся в
файле package.json и автоматически устанавливаются все эти пакеты для вас.
Теперь, когда мы завершили это,
давайте создадим наш первый проект Express,
так что для этого мы создадим файл с именем index.js и в index.js
мы объявим const express request express express express.
Теперь вы заметите, что express является сторонним модулем узла, и он был
установлен в нашей папке модулей узла в правильном каталоге.
Итак, когда мы объявляем это здесь, говоря, что этот модуль Express необходим,
то он будет автоматически включен из папки модулей узла в наше приложение.
Теперь также установите HTTP
основной модуль здесь.
Теперь, когда мы установили это,
давайте создадим имя курса как
локальный хост и номер порта как 3000.
Таким образом, вы видите, что мы используем точно такой же способ выполнения
этого упражнения, как мы сделали для упражнения HTTP ранее.
Теперь, на данный момент,
мы объявим этот const называется приложением как экспресс.
Таким образом, мы говорим, что наше приложение будет использовать модуль Express узла.
Итак, как только мы это сделаем,
Express предоставляет кучу методов, которые мы можем использовать для создания нашего веб-сервера.
Поэтому после этого мы скажем app.use () и внутри здесь
мы объявим функцию, которая будет вызвана для настройки нашего сервера.
Таким образом, эта функция принимает три параметра req,
который является запросом; res,
который является ответом, и следующий.
Теперь, как мы видели, Express использует дополнительное промежуточное программное обеспечение.
Итак, следующий используется, когда вам нужно
вызвать дополнительное промежуточное программное обеспечение, чтобы заботиться о работе от вашего имени.
Мы увидим использование next в некоторых из последующих упражнений,
но функция здесь будет принимать три параметра req, res и next.
Далее - необязательный параметр, который
не может быть включен, если вы не собираетесь использовать его в своем коде.
Итак, внутри здесь мы скажем,
журнал консоли, а затем,
мы будем регистрировать заголовки,
и мы ответим с кодом состояния, установленным в 200.
Установите тип содержимого заголовка
как текст HTML.
Итак, вы заметили, что большая часть этого кода выглядит очень похоже
на то, как мы настроили наше приложение узла.
Итак, мы скажем res.end и
здесь HTML-тело h1.
Мы просто скажем, что это экспресс сервер и закроем
там танки, и все. Исходя
из вашего понимания узла HTTP,
вы уже понимаете, что делают эти три,
и то же самое также делается на сервере Express.
Теперь,
когда мы создали сервер с помощью приложения, мы настроим сервер, и тогда мы будем использовать HTTP CreateServer,
и, таким образом, CreateServer теперь будет принимать приложение в качестве параметра функции там,
и после этого мы просто скажем server.listen порт,
hostname и
функция стрелки здесь, в рамках которой я собираюсь распечатать,
консоль, сервер возврата журнала, работающий по HTTP: //имя хоста: порт,
вот и все. Таким образом, вы увидите, что эта часть очень похожа
на то, что вы сделали для упражнения HTTP,
за исключением того, что CreateServer теперь принимает это приложение,
которое мы объявили ранее Express.
Таким образом, Express добавляет дополнительную функциональность, которая будет
использоваться HTTP-сервером, который мы создаем с помощью примечания.
Как только мы закончим с этим,
давайте сохраним изменения,
а затем мы продолжим и запустим сервер,
и посмотрим, что сервер будет обслуживать.
Войдите в терминал, добавьте терминал,
введите NPM start, и вы увидите, что ваш сервер работает и работает.
Теперь, когда мы получаем доступ к этому из браузера или от почтальона,
вы увидите, что он служит.
Итак, здесь у меня почтальон и деньги.
Позвольте мне отправить запрос GET на localhost 3000, как
и раньше, и вы увидите, что это обслуживает HTML-код, который мы включаем там,
и поэтому это Express сервер.
Нажав на предварительный просмотр,
это покажет вам, как он будет выглядеть в браузере,
и это показывает необработанную версию кода, который был отправлен обратно со стороны сервера,
и вы можете увидеть, что код состояния 200, хорошо?
И другой вектор информации заголовка был отправлен с сайта сервера.
Обратите внимание, в частности, на нем говорится, что x работает от Express в заголовке.
С этим мы завершаем первую часть этого упражнения, где мы видели,
как мы можем использовать Express для настройки простого веб-сервера.
Позвольте мне теперь остановить сервер, а затем инициализировать репозиторий Git,
поэтому в командной строке я напечатаю «git init»,
а затем «git status», и вы увидите, что файлы, которые не были отслежены,
поэтому я скажу «get and drop», и эти файлы теперь добавляются в репозиторий Git,
и поэтому, когда вы говорите git status,
вы видите файлы, которые были добавлены.
Обратите внимание, в частности, что папка модулей узла
не была добавлена в репозиторий Git, потому что в
файле.gitignore мы явно заявили, что
папка модулей узла не должна быть включена в репозиторий Git.
Итак, теперь давайте проверим наш обмен фиксацией, сказав git
commit минус m Express пример,
и мы зафиксировали это в нашем репозитории Git.
Во второй части этого упражнения
мы рассмотрим использование промежуточного программного обеспечения Express под названием Morgan.
Morgan используется для записи информации на экран,
так что он будет записывать информацию о входящих запросах на экран, чтобы мы
могли видеть некоторую информацию печатается в нашей консоли здесь.
Кроме того, мы увидим, как мы можем настроить наш Express сервер для обслуживания статических HTML-файлов.
Чтобы начать работу, в командной строке введите npm
установить Morgan минус, минус сохранить.
Теперь Морган будет зависимостью, которую мы будем использовать в нашем приложении.
Итак, вот почему это минус,
минус сохранить, и это получит Install,
и вы можете видеть, что я использую Morgan версии 1.9.0 в этом курсе.
Теперь, когда мы установили Morgan,
давайте посмотрим, как мы можем использовать его в нашем приложении.
Итак, перейдя к нашему приложению,
способ использовать Morgan заключается в том, чтобы объявить здесь
const Morgan требовать Morgan,
а затем мы скажем:
«Приложение использует Morgan с разработкой».
Итак, это версия разработки.
Таким образом, он будет распечатывать дополнительную информацию на экран по мере необходимости.
Теперь, заходим в наше заявление.
В нашем приложении я не собираюсь регистрировать все заголовки.
Вместо этого позвольте мне удалить это, потому что Morgan будет
записывать достаточную информацию для нас,
чтобы посмотреть, и я собираюсь настроить свой сервер для обслуживания HTML-файлов из общей папки.
Поэтому, чтобы сделать это,
я собираюсь объявить использование и выразить статическое.
Это говорит Express, чтобы обслуживать статические файлы из двойного подчеркивания dirname.
Итак, это говорит о корне
этого проекта, и они найдут эти файлы
в double_dirname, plus/public.
Итак, напомним, что мы создали общую папку в узле Express папку.
Таким образом, это информирует Express о том, что вы будете смотреть на
эту конкретную папку в корневой папке этого проекта и внутри общей папки.
Таким образом, это будет папка, из которой
статические HTML-файлы будут обслуживаться моим сервером Express.
После внесения этих изменений,
давайте сохраним изменения,
а затем перезапустите наш сервер,
а затем посмотрим, как он работает.
Перейдя к этой подсказке,
давайте напечатаем npm
start, чтобы запустить наш
сервер, и как только сервер работает и работает,
давайте рассмотрим, что он будет обслуживать, когда мы отправляем различные запросы на этот сервер.
Используя Postman, давайте сначала отправим запрос на получение локального хоста: 3,000,
и вы заметите, что он обслуживает файл index.html.
Мы настроили наш сервер для обслуживания статических файлов из общей папки,
и если мы просто скажем localhost: 3000 по умолчанию,
он будет обслуживать файл index.html.
Итак, вот как работает ваш типичный веб-сервер.
Итак, это то, что мы закончили настройкой нашего экспресс-сервера.
Теперь, давайте напечатаем localhost: 3000 about.html и отправить запрос,
и говорит, что это о нашей стратегии HTML,
а также о нас HTML файл был сохранен здесь.
Таким образом, в предварительном просмотре
вы можете увидеть полученный файл, который был подан с нашего сайта сервера.
Давайте попробуем получить доступ к несуществующему файлу,
и вы увидите, что когда вы пытаетесь получить доступ к несуществующему файлу,
то он будет по умолчанию второй настройки, которые мы сделали в нашем коде,
который говорит, что это Express сервер.
Мы не указали нашему серверу Express, как обрабатывать
ситуации, когда он встречает файл, который не существует.
Поэтому он использует значение по умолчанию, которое настроено прямо под статикой Express,
который должен обслуживать значение по умолчанию, и, конечно,
это не самое идеальное поведение,
но это то, что мы имеем на сервере Express в данный момент.
Позже мы изменим сервер Express, чтобы обрабатывать
ошибки более подробно, в последующих упражнениях.
Это также хорошее время для вас сделать Git фиксацию изменений.
Итак, давайте проверим статус Git после остановки сервера,
и мы добавим измененные файлы,
а затем выполним Git commit
минус m Express,
обслуживаем статические файлы.
Вот оно. С этим
мы завершаем это упражнение.
В этом упражнении мы видели, как мы можем настроить
простой веб-сервер для обслуживания контента от нашего имени.