Автор оригинала: FreeCodeCamp Community Member.
Мария Дминского
Добро пожаловать в часть III Узнайте Node.js с бригадирными путаницами , серия, созданная, чтобы помочь вам легко понять Node.js ❤
В Часть II Brigadier Fluffykins, и я прошел вас через то, как Node.js – это соискательный язык. Вы узнали, как это важно для асинхронного поведения, и как эти события обрабатываются через Структура событий Отказ Вы также узнали, как DOM события и события в Node.js аналогичны. Наконец, мы создали наш первый Eventemitter Отказ
Давайте перейдем к следующему уроку! АХ, ДА!!
Сегодня мы узнаем о:
- Типы способов запроса
- Запрос объекта
- Настройка нескольких маршрутов
- Разница между SetHeader и написи
- Как служить файлы (HTML, CSS и т. Д.)
Типы способов запроса
Четыре основных HTTP-запросов:
- Get – используется, когда клиент запрашивает данные. Например, когда они просит просмотреть вашу домашнюю страницу, им понадобятся документы HTML, CSS и JavaScript. Это все запрашивает запросы.
- Post – используется, когда клиент подает данные на сервер или в базу данных. Например, отправка формы.
- Поместите – похож на пост, но не использовалось многое. Используйте это, когда вы изменяете что-то в определенном URL или обновляем ресурс на сервере. Главное отличие в том, что поставлено idempotent Отказ
- Удалить – удаляет указанный ресурс.
Получить и почтовые запросы используются чаще всего. Удалить и удалить не использовать столько. Тогда есть запросы, такие как голова, опции и подключение. Они используются еще реже, но приятно знать на всякий случай.
Поскольку Get и Post являются наиболее распространенными, мы будем рассматривать их. Запрос на получение будет обсуждаться сегодня, в то время как мы обсудим метод Post на следующем уроке, так как он будет иметь больше смысла.
Объект запроса
Когда мы настроим наш сервер, мы хотим Запрос событие Чтобы прослушать любые входящие запросы от клиента. Важно помнить, что это не то же самое, что Запросить объект в обратном вызове. Также объекты запроса и ответа выглядеть как Параметры, и вы даже можете изменить свои имена – вроде я делал в примере ниже «запроса» на «REQ» и «ответ» на «RES» – но они все еще объекты. Запомни.
Запросить объект огромно со многими различными свойствами, функциями и методами. Давайте попробуем печать Запросить объект в вашем терминале. Откройте server.js В Nodestory2 папка. Все файлы, которые вам нужны для остальной части этого урока, будут здесь.
Перед продолжением, бригадир пуффикинцы, и я хочу, чтобы вы узнали:
Если вы чувствуете себя перегруженным количеством кода в Zip Папка, особенно server.js Файл – я знаю, что я сделал, когда я впервые начал изучать Node.js – просто возьми передышку и знаю, что у нас есть твоя спина. Мы будем гулять по тебе через каждый раздел, шаг за шагом. Займет столько времени, сколько вам нужно.
Настойчивость является ключом к прогрессу в программировании и в жизни. Кроме того, постоянно сохраняйте ваш файл и перезагрузите сервер, если вы внесли какие-либо изменения в файле. Удачи!:)
Вы также можете просто создать свой собственный файл с тем же именем – server.js и скопировать и вставить это в:
Kudos Если вы знаете, что делать дальше.
Найдите свой server.js Файл или Nodestory2 Папка вы скачали. В приведенном ниже примере я пошел на свой рабочий стол, то Nodestory2 Затем папка внутри этой папки была server.js файл.
Введите Node Server.js В оболочке перейдите к http://localhost: 3000/ и вы должны увидеть Запросить объект В вашей оболочке:
Скриншот выше, после того, как я прокручиваюсь до начала.
Это жестокое право?
Запросить объект является примером Incomingmessage объект Отказ Вы можете прочитать больше об этом здесь если тебе интересно.
На протяжении всего этой серии мы обсудим более широко используемые свойства Запросить объект Особенно, поскольку вы, вероятно, будете использовать только их в ваших проектах.
URL и Метод Свойства два, которые часто работают вместе. Когда мы настроим наш сервер и имеем эти два свойства, мы говорим «Эй, сервер, если вы видите, что клиент исходит от это URL и они хотят обратно (получить метод), затем триггер обратный вызов “.
Когда вы печатаете URL и Метод Свойства Запросить объект что вы получаете? Ознакомьтесь с шагом № 2 и растрескиванию шага № 2.1. Или скопируйте и вставьте это в свой server.js файл:
Помните, как я упоминал в Часть I , в любое время вы вносите изменения в файл сервера, вы должны снова перезапустить сервер, чтобы он был правильно работать. Чтобы остановить сервер вручную зайти в свой терминал и нажмите Контроль + C Для Mac (опять же, я верю, что это killall Uode для Windows).
Теперь введите Node Server.js В оболочке, чтобы начать сервер, затем перейдите в http://localhost: 3000/ , и вы должны увидеть что-то вроде этого в вашей оболочке:
URL-адрес запроса печатается ‘/’. Это URL-адрес, на котором исходит клиент, в этом случае домашняя страница – также называется «корневой каталог». И метод запроса напечатан «Get», что означает, что клиент хотел просматривать или получить необходимые файлы для страницы.
Если вы получите второй запрос на получение, он, скорее всего, для Favicon в вашем браузере, который автоматически запрашивается по умолчанию Отказ
Заголовки Метод также довольно полезен, так как он дает нам информацию о том, откуда приходит запрос. Это, включая информацию о просмотре, файла cookie и многое другое.
Давайте попробуем печатать заголовки, а затем доступа к одному. Имейте в виду, что он заходит как объект пар ключевых ценностей. Раскрывающееся шаг № 2.2 и прокомментируйте шаг № 2.1 или скопируйте и вставьте это в свой server.js файл:
Перезагрузите сервер. Вы должны получить объект заголовков в вашей оболочке.
Если вы получите два объекта, снова, наверное, что Favicon, и, таким образом, был напечатан второй заголовок объекта, просто игнорируйте его сейчас.
Важно отметить, что если вы получаете заголовки, которые одинаковы, они будут либо перезаписаны, либо представлены как строку, разделенные запятыми, в зависимости от типа заголовка.
Если вы действительно хотите точные заголовки, которые существуют – даже если у них есть те же имена (возможно, потому что вам нужны их разные значения) – вы можете использовать Rawheaders метод. Итак, вы вошли в R eq.rawheaders вместо req.Headers Отказ
Попробуйте! Посмотрите, что вы получаете:)
Настройка нескольких маршрутов
Этот URL: / означает домашнюю страницу. Чтобы получить доступ к другой странице, мы создаем новый запрос Get с другим именем после передовой косые.
Давайте рассмотрим все, что мы узнали до сих пор, и создайте два запроса Get – один, если клиент запрашивает домашнюю страницу, а другой, если они запрашивают /черника страница. Почему черника? Это на самом деле не имеет значения. Если вы знаете, клиент собирается пойти на www.yourhomepage.com/blueberries Тогда вы знаете, что вы должны создать запрос на вашем сервере для /черника Поэтому, когда они набирают этот путь URL, они увидят некоторое содержание вместо сообщения об ошибке.
Правда в том, что бригадир пуффикинцы продемонстрировали свои навыки ниндзя для меня и в оплате, мне пришлось выбрать этот путь URL:
В противном случае это не имеет значения. Давай продолжим:
Комментарий out step # 2.2 и растресс шаги # 2.3 или просто скопируйте и вставьте это в свой server.js файл. Не забудьте сэкономить после:
Теперь перезапустите сервер и перейдите в http://localhost: 3000/ , вы должны увидеть это:
Хорошо, хорошо, теперь давайте попробуем другой запрос, который мы настроили. Перейти к http://localhost: 3000/черника Отказ Вы должны увидеть это:
Вы видите, что там произошло? Мы можем изменить /черника Для всего, что мы хотим, пока мы настраиваем то, что клиент должен видеть. Так что, если вы пошли на http://localhost: 3000/что-то или http://localhost: 3000/для чего-либо , Это
Давайте продемонстрируем это, изменив одну строку в наш код. Изменить эту строку:
if (req.url === '/blueberries') {К этому:
if (req.url === '/carrots') {Сохраните и перезапустите свой сервер. Теперь перейдите к: http://localhost: 3000/черника
Посмотрите, как это больше не работает? Перейти к http://localhost: 3000/морковь
Это должно работать сейчас, потому что у нас есть ответ, настроенный для /морковь путь, пока путь для /черника больше не существует (если мы не решим его создавать).
Разница между SetHeader и записью зажигания
SetHeader Метод принимает имя в качестве первого параметра и значение для его второго. Вы можете вызвать этот метод несколько раз в том же запросе, но убедитесь, что вы не включаете недопустимые символы, или вы получите ошибку – в частности, A Типеррор Отказ
Давайте попробуем это, измените свой запрос на страницу на это:
Сохранить и перезапустить сервер.
Вы должны увидеть новые заголовки на главной странице на вашей сети.
Чтобы получить доступ к вашей сетевой вкладке, щелкните правой кнопкой мыши → Осмотрите → Выберите вкладку «Сетевой» (в той же строке в качестве консоли).
Или на Mac: CMD + опция + J → Network Tab.
Не особо полезно установить случайные заголовки, но если вы работаете с аутентификацией или файлами cookie в браузере, SetHeader является частью этого процесса.
В нашем Последний урок Мы устанавливаем заголовок через Нарисование метод. Там мы устанавливаем код состояния. Разница между SetHeader и Нарисование Это SetHeader Устанавливает один заголовок за раз, и вы можете использовать столько SetHeader Методы, как вам нужно, прежде чем отправить ответ.
С другой стороны, Нарисование Можно установить код состояния (первый параметр) и несколько заголовков внутри объекта (второй параметр) одновременно.
Установка кода состояния вручную помогает убедиться, что страница будет загружаться правильно. Если вы включите SetHeader и Нарисование По тому же запросу они объединятся вместе с Нарисование Принимая приоритет. Это также означает любые заголовки с тем же именем в обоих SetHeader и Нарисование будет перезаписан Нарисование Заголовки.
Как служить файлам
Вы заметили, как наши ответы были только простые слова и простой HTML? Как разработчик, вы часто будете служить фактическими документами, поэтому давайте узнаем, как это сделать!
Либо вставьте это в ваш server.js или растреспределить шаг # 2.4 и прокомментировать шаг № 2.3. Можете ли вы угадать, что здесь происходит?
Это должно быть в вашем index.html файл:
… и этот маленький фрагмент должен быть в вашем still.css файл:
.see-me { background-color: black;}Посмотрите на код в server.js на шаге # 2.4. Прочитайте комментарии кода и посмотрите, можете ли вы понять, что происходит, прежде чем продолжить.
readfile это метод Файловая система, Один из основных модулей Node.js, который мы кратко покрывались Часть I Отказ И именно поэтому мы требовали этого модуля в нашем коде и хранили его в ФС Переменная. Он будет прочитать файл асинхронно и вызвать обратный вызов. Когда обратный вызов срабатывает, файл находится внутри него. Так что следующее, что мы сделали, было отправлено его клиенту, используя конец метод.
Вы также можете отправить более .js Файлы – и даже JSON – Просто не забудьте установить Content-Type заголовки, чтобы избежать ошибок. Например для .js Файл, Content-Type должно быть установлено на Приложение/JavaScript Отказ Они также известны как типы MIME.
__dirname В основном означает текущий каталог server.js файл. Подробнее о путях, модулях и библиотеках на следующем уроке!
Вы заметили, как мы настроили запрос на still.css ?
Почему вы думаете, что нам нужно сделать это?
Скорее всего, клиент не будет набрать в yourwebsite.com/style.css. Клиент просто хочет вашего still.css Чтобы автоматически быть там, чтобы ваша страница HTML выглядит очень хорошо? Вы могли бы проверить его и посетить localhost: 3000/style.csss И вы увидите это там, но как мы можем автоматически отправлять его на клиента?
Вы, вероятно, помните, что делаем HTML-страницы и включив ваши CSS в другом файле. Чтобы сделать это CSS на работу, нам нужно было включить CSS ссылка Тег внутри HTML-страницы. Мы уже сделали это в index.html :
Так что теперь, когда клиент запрашивает index.html Страница, сервер сканирует код внутри index.html Для любых других важных тегов, таких как ссылка (CSS-файлы) или Скрипс T (файлы JavaScript) теги.
В нашем случае мы только включали страницу CSS. Это найдет это ссылка Тег и по сути это похоже на отправку автоматического запроса на получение. В основном серверы похожи:
«Эй, смотри, клиент хочет, чтобы HTML-страницы! Хорошо, позвольте мне проверить, есть ли эта HTML-страница что-нибудь еще, что мне нужно отправить. О, посмотрите, A Link Tag для файла style.css ! Необходимо означать, что есть страница CSS для этой HTML-страницы. Хорошо, давайте вернемся к моему Server.js файл. Да! У меня тоже ответ для этого файла CSS, поэтому я буду служить обратно И файл HTML-файлы и CSS! “
Если вы посетите домашнюю страницу сейчас и откройте вкладку Network, вы должны правильно увидеть CSS. Если вы не видите его сразу, обновите браузер. И если вы все еще не видите это, убедитесь, что вы сохранили файл и перезапустили сервер:
В противном случае, если мы не настроили still.css Запрос в нашем Server.js, Только HTML-страница будет отправлена, и мы увидим об ошибке на нашей сетевой вкладке для still.css страница.
Мы также можем испытывать ненормально длительные времена нагрузки, потому что сервер ищет конфигурацию still.css Отказ Было бы думать:
«Я вижу, что файл HTML имеет Link тег, но я не могу найти ни одного ответ для этого файла CSS в Server.js . Я не понимаю. Где это ? Где это?”
И я хотел бы закрыть сегодняшний урок с нефте-маленьким трюком. Сначала он может выглядеть пугающим, особенно если это ваш первый раз, увидев Regex Отказ Я просто хотел поделиться этим удобным фрагментом в любом случае, если в ближайшее время вы настраиваете приложение, и все, что нужно, это служить файлы, которые заканчиваются .js, .html или .css. Вместо написания нескольких запросов.
Это нормально, если вы не понимаете это сразу – просто сохраните его на потом и вернемся к нему, когда будете готовы! Хорошо иметь в вашем заднем кармане:)
if (request.url.match(/.js$|.html$|.css$/)) { return response.end(fs.readFileSync(__dirname + '/..' + request.url));}Проверьте эти дополнительные ресурсы
- Объект ответа имеет некоторые подобные свойства, что и Запросить объект , но пока Запросить объект наследует от Incomingmessage объект , Объект ответа наследует от http.serverresponse объект Отказ
- Узнайте больше о заголовках здесь Отказ
- Обзор Запрос Типы
Поздравляю! Вы сделали это через Узнайте Node.js с бригадирными путаницами Часть III! Вы узнали о различных типах запросов, как настроить получить запросы на разных URL-адресах и как служить файлам!
На вершине всего этого вы должны иметь основное понимание объекта запроса И некоторые полезные методы! Отличная работа сегодня!
Мы узнаем больше об этих темах, а также другие, которые мы поцарапали только в следующие несколько уроков. Спасибо за чтение и оставайтесь на улице.
Держите свою мудрость на сегодняшний день, щелкнув ❤ ниже и следуя, как больше Узнайте Node.js с бригадирными путаницами скоро на среднем!
Часть I: Sync, Async, и создавая свой первый сервер!
Часть II: События, Eventemitter & Event Loop
Часть III: Запросить объект, настроить маршруты, подавать файлы