fix: add Api challenges - Russian
This commit is contained in:
Beau Carnes
committed by
Kristofer Koishigawa
Kristofer Koishigawa
parent
f868294515
commit
24a9bb98ac
@@ -0,0 +1,48 @@
|
||||
---
|
||||
id: 587d7fb1367417b2b2512bf4
|
||||
title: Chain Middleware to Create a Time Server
|
||||
localeTitle: Промежуточное ПО для создания сервера времени
|
||||
challengeType: 2
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>app.METHOD(path, middlewareFunction)</code> можно смонтировать по определенному маршруту, используя <code>app.METHOD(path, middlewareFunction)</code> . Промежуточное программное обеспечение также может быть связано внутри определения маршрута.
|
||||
Посмотрите на следующий пример:
|
||||
<blockquote>app.get('/user', function(req, res, next) {<br> req.user = getTheUserSync(); // Hypothetical synchronous operation<br> next();<br>}, function(req, res) {<br> res.send(req.user);<br>})</blockquote>
|
||||
Этот подход полезен для разделения операций сервера на более мелкие единицы. Это приводит к лучшей структуре приложения и возможности повторного использования кода в разных местах. Этот подход также можно использовать для проверки данных. В каждой точке стека промежуточного программного обеспечения вы можете заблокировать выполнение текущей цепочки и передать управление функциям, специально разработанным для обработки ошибок. Или вы можете передать управление следующему подходящему маршруту для обработки особых случаев. Мы увидим, как в расширенном разделе Экспресс.
|
||||
В маршруте <code>app.get('/now', ...)</code> функцию промежуточного программного обеспечения и конечный обработчик. В функции промежуточного программного обеспечения вы должны добавить текущее время к объекту запроса в ключе <code>req.time</code> . Вы можете использовать <code>new Date().toString()</code> . В обработчике ответьте объектом JSON, взяв структуру <code>{time: req.time}</code> .
|
||||
Подсказка: тест не пройдет, если вы не подключите промежуточное ПО. Если вы смонтируете функцию где-то еще, тест не пройдёт, даже если результат вывода верный.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Конечная точка / now должна иметь смонтированное промежуточное ПО
|
||||
testString: 'getUserInput => $.get(getUserInput(''url'') + ''/_api/chain-middleware-time'').then(data => { assert.equal(data.stackLength, 2, ''"/now" route has no mounted middleware''); }, xhr => { throw new Error(xhr.responseText); })'
|
||||
- text: Конечная точка / now должна возвращать время +/- 20 секунд
|
||||
testString: 'getUserInput => $.get(getUserInput(''url'') + ''/_api/chain-middleware-time'').then(data => { var now = new Date(); assert.isAtMost(Math.abs(new Date(data.time) - now), 20000, ''the returned time is not between +- 20 secs from now''); }, xhr => { throw new Error(xhr.responseText); })'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
id: 587d7fb2367417b2b2512bf8
|
||||
title: Get Data from POST Requests
|
||||
localeTitle: Получить данные из запросов POST
|
||||
challengeType: 2
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Установите обработчик POST по пути <code>/name</code> . Это тот же путь, что и раньше. Мы подготовили форму на главной странице html. Он отправит те же данные упражнения 10 (Строка запроса). Если body-parser настроен правильно, вы должны найти параметры в объекте <code>req.body</code> . Посмотрите на обычный пример библиотеки:
|
||||
<blockquote>route: POST '/library'<br>urlencoded_body: userId=546&bookId=6754 <br>req.body: {userId: '546', bookId: '6754'}</blockquote>
|
||||
Ответьте тем же объектом JSON, что и раньше: <code>{name: 'firstname lastname'}</code> . Проверьте, работает ли ваша конечная точка, используя HTML-форму, предоставленную на главной странице приложения.
|
||||
Подсказка: есть несколько других методов http, отличных от GET и POST. По соглашению между глаголом http и операцией, которую вы собираетесь выполнить на сервере, есть соответствие. Обычное отображение:
|
||||
POST (иногда PUT) - создание нового ресурса с использованием информации, отправленной с запросом,
|
||||
GET - чтение существующего ресурса без его изменения,
|
||||
PUT или PATCH (иногда POST) - обновление ресурса с использованием данных отправлено,
|
||||
DELETE => Удалить ресурс.
|
||||
Есть также несколько других методов, которые используются для согласования соединения с сервером. За исключением GET, все другие методы, перечисленные выше, могут иметь полезную нагрузку (то есть данные в теле запроса). Промежуточное программное обеспечение body-parser также работает с этими методами.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: «Тест 1- ваша конечная точка API должна отвечать правильным именем»
|
||||
testString: 'getUserInput => $.post(getUserInput(''url'') + ''/name'', {first: ''Mick'', last: ''Jagger''}).then(data => { assert.equal(data.name, ''Mick Jagger'', ''Test 1: "POST /name" route does not behave as expected'') }, xhr => { throw new Error(xhr.responseText); })'
|
||||
- text: «Тест 2- ваша конечная точка API должна отвечать правильным именем»
|
||||
testString: 'getUserInput => $.post(getUserInput(''url'') + ''/name'', {first: ''Keith'', last: ''Richards''}).then(data => { assert.equal(data.name, ''Keith Richards'', ''Test 2: "POST /name" route does not behave as expected'') }, xhr => { throw new Error(xhr.responseText); })'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,46 @@
|
||||
---
|
||||
id: 587d7fb2367417b2b2512bf6
|
||||
title: Get Query Parameter Input from the Client
|
||||
localeTitle: Получить ввод параметров запроса от клиента
|
||||
challengeType: 2
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Другим распространенным способом получения ввода от клиента является кодирование данных после пути маршрута с использованием строки запроса. Строка запроса ограничена знаком вопроса (?) И включает пары поле = значение. Каждая пара отделяется амперсандом (&). Express может анализировать данные из строки запроса и заполнять объект <code>req.query</code> . Некоторые символы не могут быть в URL, они должны быть закодированы в <a href='https://en.wikipedia.org/wiki/Percent-encoding' target='_blank'>другом формате,</a> прежде чем вы сможете отправить их. Если вы используете API из JavaScript, вы можете использовать специальные методы для кодирования / декодирования этих символов.
|
||||
<blockquote>route_path: '/library'<br>actual_request_URL: '/library?userId=546&bookId=6754' <br>req.query: {userId: '546', bookId: '6754'}</blockquote>
|
||||
Создайте конечную точку API, смонтированную в <code>GET /name</code> . Ответить с JSON-документом, взяв структуру <code>{ name: 'firstname lastname'}</code> . Параметры имени и фамилии должны быть закодированы в строке запроса, например <code>?first=firstname&last=lastname</code> .
|
||||
СОВЕТ: В следующем упражнении мы собираемся получить данные из запроса POST по тому же пути <code>/name</code> маршрута. Если вы хотите, вы можете использовать метод <code>app.route(path).get(handler).post(handler)</code> . Этот синтаксис позволяет связывать разные обработчики глаголов на одном и том же пути маршрута. Вы можете сэкономить немного времени на ввод текста и получить более чистый код.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: «Тест 1- ваша конечная точка API должна отвечать правильным именем»
|
||||
testString: 'getUserInput => $.get(getUserInput(''url'') + ''/name?first=Mick&last=Jagger'').then(data => { assert.equal(data.name, ''Mick Jagger'', ''Test 1: "GET /name" route does not behave as expected'') }, xhr => { throw new Error(xhr.responseText); })'
|
||||
- text: «Тест 2- ваша конечная точка APi должна отвечать правильным именем»
|
||||
testString: 'getUserInput => $.get(getUserInput(''url'') + ''/name?last=Richards&first=Keith'').then(data => { assert.equal(data.name, ''Keith Richards'', ''Test 2: "GET /name" route does not behave as expected'') }, xhr => { throw new Error(xhr.responseText); })'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,45 @@
|
||||
---
|
||||
id: 587d7fb2367417b2b2512bf5
|
||||
title: Get Route Parameter Input from the Client
|
||||
localeTitle: Получить ввод параметров маршрута от клиента
|
||||
challengeType: 2
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
При создании API мы должны разрешать пользователям сообщать нам, что они хотят получить от нашего сервиса. Например, если клиент запрашивает информацию о пользователе, хранящемся в базе данных, ему нужен способ сообщить нам, какого пользователя он заинтересовал. Одним из возможных способов достижения этого результата является использование параметров маршрута. Параметры маршрута - это именованные сегменты URL, разделенные косой чертой (/). Каждый сегмент фиксирует значение той части URL, которая соответствует его позиции. Захваченные значения можно найти в объекте <code>req.params</code> .
|
||||
<blockquote>route_path: '/user/:userId/book/:bookId'<br>actual_request_URL: '/user/546/book/6754' <br>req.params: {userId: '546', bookId: '6754'}</blockquote>
|
||||
Построить эхо-сервер, смонтированный по маршруту <code>GET /:word/echo</code> . Ответьте с помощью объекта JSON, взяв структуру <code>{echo: word}</code> . Вы можете найти слово для повторения в <code>req.params.word</code> . Вы можете проверить свой маршрут из адресной строки вашего браузера, посетив несколько подходящих маршрутов, например, your-app-rootpath / freecodecamp / echo
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: «Тест 1- ваш эхо-сервер должен правильно повторять слова»
|
||||
testString: 'getUserInput => $.get(getUserInput(''url'') + ''/eChOtEsT/echo'').then(data => { assert.equal(data.echo, ''eChOtEsT'', ''Test 1: the echo server is not working as expected'') }, xhr => { throw new Error(xhr.responseText); })'
|
||||
- text: «Тест 2- ваш эхо-сервер должен правильно повторять слова»
|
||||
testString: 'getUserInput => $.get(getUserInput(''url'') + ''/ech0-t3st/echo'').then(data => { assert.equal(data.echo, ''ech0-t3st'', ''Test 2: the echo server is not working as expected'') }, xhr => { throw new Error(xhr.responseText); })'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
id: 587d7fb1367417b2b2512bf3
|
||||
title: Implement a Root-Level Request Logger Middleware
|
||||
localeTitle: Реализовать промежуточное программное обеспечение регистратора запросов корневого уровня
|
||||
challengeType: 2
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Прежде чем мы представили функцию промежуточного программного обеспечения <code>express.static()</code> . Теперь пришло время посмотреть, что такое промежуточное программное обеспечение, более подробно. Функции промежуточного программного обеспечения - это функции, которые принимают 3 аргумента: объект запроса, объект ответа и следующую функцию в цикле запрос-ответ приложения. Эти функции выполняют некоторый код, который может иметь побочные эффекты для приложения, и обычно добавляют информацию к объектам запроса или ответа. Они также могут завершить цикл отправки ответа, когда выполняется какое-либо условие. Если они не отправляют ответ, по завершении они начинают выполнение следующей функции в стеке. Это вызвано вызовом третьего аргумента <code>next()</code> . Больше информации в <a href='http://expressjs.com/en/guide/using-middleware.html' target='_blank'>экспресс-документации</a> .
|
||||
Посмотрите на следующий пример:
|
||||
<blockquote>function(req, res, next) {<br> console.log("I'm a middleware...");<br> next();<br>}</blockquote>
|
||||
Давайте предположим, что мы смонтировали эту функцию на маршруте. Когда запрос соответствует маршруту, он отображает строку «Я - промежуточное ПО…». Затем он выполняет следующую функцию в стеке.
|
||||
В этом упражнении мы собираемся создать промежуточное программное обеспечение корневого уровня. Как мы видели в задаче 4, чтобы смонтировать функцию промежуточного программного обеспечения на корневом уровне, мы можем использовать метод <code>app.use(<mware-function>)</code> . В этом случае функция будет выполнена для всех запросов, но вы также можете установить более конкретные условия. Например, если вы хотите, чтобы функция выполнялась только для запросов POST, вы можете использовать <code>app.post(<mware-function>)</code> . Аналогичные методы существуют для всех http-глаголов (GET, DELETE, PUT,…).
|
||||
Построй простой регистратор. Для каждого запроса он должен войти в консоль с строкой следующего формата: <code>method path - ip</code> . Пример будет выглядеть так: <code>GET /json - ::ffff:127.0.0.1</code> . Обратите внимание , что существует пространство между <code>method</code> и <code>path</code> и тир разделением <code>path</code> и <code>ip</code> окружен пространством с обоего сторон. Вы можете получить метод запроса (http-глагол), относительный путь маршрута и IP-адрес вызывающего абонента из объекта запроса, используя <code>req.method</code> , <code>req.path</code> и <code>req.ip</code> Не забудьте вызвать <code>next()</code> когда вы закончите, иначе ваш сервер застрянет навсегда. Обязательно откройте «Журналы» и посмотрите, что произойдет, когда поступит какой-то запрос…
|
||||
Подсказка: Express оценивает функции в порядке их появления в коде. Это верно и для промежуточного программного обеспечения. Если вы хотите, чтобы он работал для всех маршрутов, он должен быть установлен перед ними.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Промежуточное программное обеспечение Root Level Logger должно быть активным
|
||||
testString: 'getUserInput => $.get(getUserInput(''url'') + ''/_api/root-middleware-logger'').then(data => { assert.isTrue(data.passed, ''root-level logger is not working as expected''); }, xhr => { throw new Error(xhr.responseText); })'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,42 @@
|
||||
---
|
||||
id: 587d7fb0367417b2b2512bed
|
||||
title: Meet the Node console
|
||||
localeTitle: Встречайте консоль Node
|
||||
challengeType: 2
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
В процессе разработки важно иметь возможность проверить, что происходит в вашем коде. Node - это просто среда JavaScript. Как и клиентский JavaScript, вы можете использовать консоль для отображения полезной отладочной информации. На вашем локальном компьютере вы увидите вывод консоли в терминале. На Glitch вы можете открыть логи в нижней части экрана. Вы можете переключать панель журнала с помощью кнопки «Журналы» (вверху слева под названием приложения).
|
||||
Для начала просто распечатай классический «Hello World» в консоли. Мы рекомендуем держать панель журнала открытой во время работы с этими проблемами. Читая журналы, вы можете знать природу возможных ошибок.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Измените файл <code>myApp.js</code> чтобы <code>myApp.js</code> «Hello World» на консоль.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>"Hello World"</code> должен быть в консоли
|
||||
testString: 'getUserInput => $.get(getUserInput(''url'') + ''/_api/hello-console'').then(data => { assert.isTrue(data.passed, ''"Hello World" is not in the server console''); }, xhr => { throw new Error(xhr.responseText); })'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,45 @@
|
||||
---
|
||||
id: 587d7fb0367417b2b2512bef
|
||||
title: Serve an HTML File
|
||||
localeTitle: Подавать файл HTML
|
||||
challengeType: 2
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Мы можем ответить файлом, используя метод <code>res.sendFile(path)</code> .
|
||||
Вы можете поместить его в обработчик маршрута <code>app.get('/', ...)</code> . За кулисами этот метод установит соответствующие заголовки, чтобы инструктировать ваш браузер о том, как обрабатывать файл, который вы хотите отправить, в соответствии с его типом. Затем он прочитает и отправит файл. Этот метод требует абсолютного пути к файлу. Мы рекомендуем вам использовать глобальную переменную Node <code>__dirname</code> для вычисления пути.
|
||||
Например, <code>absolutePath = __dirname + relativePath/file.ext</code> .
|
||||
Файл для отправки - <code>/views/index.html</code> . Попробуйте «показать вживую» свое приложение, вы должны увидеть большой HTML-заголовок (и форму, которую мы будем использовать позже…), без применения стиля.
|
||||
Примечание: Вы можете отредактировать решение предыдущей задачи или создать новое. Если вы создаете новое решение, имейте в виду, что Express оценивает маршруты сверху вниз. Он выполняет обработчик для первого совпадения. Вы должны закомментировать предыдущее решение, иначе сервер продолжит отвечать строкой.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваше приложение должно обслуживать файл views / index.html
|
||||
testString: 'getUserInput => $.get(getUserInput(''url'')).then(data => { assert.match(data, /<h1>.*<\/h1>/, ''Your app does not serve the expected HTML''); }, xhr => { throw new Error(xhr.responseText); })'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
id: 587d7fb1367417b2b2512bf1
|
||||
title: Serve JSON on a Specific Route
|
||||
localeTitle: Служить JSON по определенному маршруту
|
||||
challengeType: 2
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Пока сервер HTML обслуживает (как вы уже догадались!) HTML, API обслуживает данные. <dfn>API REST</dfn> (REpresentational State Transfer) позволяет осуществлять простой обмен данными без необходимости для клиентов знать какие-либо подробности о сервере. Клиенту нужно только знать, где находится ресурс (URL) и какое действие он хочет с ним выполнить (глагол). Глагол GET используется, когда вы извлекаете некоторую информацию, ничего не изменяя. В наши дни предпочтительным форматом данных для перемещения информации по сети является JSON. Проще говоря, JSON - это удобный способ представления объекта JavaScript в виде строки, чтобы его можно было легко передавать.
|
||||
Давайте создадим простой API, создав маршрут, который отвечает JSON по пути <code>/json</code> . Вы можете сделать это, как обычно, с помощью <code>app.get()</code> . Внутри обработчика маршрута используйте метод <code>res.json()</code> , передавая объект в качестве аргумента. Этот метод закрывает цикл запрос-ответ, возвращая данные. За кулисами он преобразует действительный объект JavaScript в строку, затем устанавливает соответствующие заголовки, чтобы сообщить браузеру, что вы обслуживаете JSON, и отправляет данные обратно. Допустимый объект имеет обычную структуру <code>{key: data}</code> . Данные могут содержать число, строку, вложенный объект или массив. Данные также могут быть переменной или результатом вызова функции; в этом случае он будет оценен перед преобразованием в строку.
|
||||
Подайте объект <code>{"message": "Hello json"}</code> как ответ в формате JSON на запросы GET к маршруту <code>/json</code> . Затем укажите ваш браузер на ваш-app-url / json, вы должны увидеть сообщение на экране.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Конечная точка <code>/json</code> должна обслуживать объект json <code>{"message": "Hello json"}</code> '
|
||||
testString: 'getUserInput => $.get(getUserInput(''url'') + ''/json'').then(data => { assert.equal(data.message, ''Hello json'', ''The \''/json\'' endpoint does not serve the right data''); }, xhr => { throw new Error(xhr.responseText); })'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
id: 587d7fb0367417b2b2512bf0
|
||||
title: Serve Static Assets
|
||||
localeTitle: Служить статическим активам
|
||||
challengeType: 2
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML-сервер обычно имеет один или несколько каталогов, которые доступны пользователю. Вы можете разместить там статические ресурсы, необходимые для вашего приложения (таблицы стилей, скрипты, изображения). В Express вы можете реализовать эту функцию, используя промежуточное программное обеспечение <code>express.static(path)</code> , где параметр - это абсолютный путь к папке, содержащей ресурсы. Если вы не знаете, что такое промежуточное программное обеспечение, не беспокойтесь. Об этом мы поговорим позже. В основном промежуточные программы - это функции, которые перехватывают обработчики маршрутов, добавляя некоторую информацию. <code>app.use(path, middlewareFunction)</code> программное обеспечение должно быть смонтировано с использованием метода <code>app.use(path, middlewareFunction)</code> . Первый аргумент пути не является обязательным. Если вы не передадите его, промежуточное программное обеспечение будет выполнено для всех запросов.
|
||||
Установите <code>express.static()</code> промежуточный слой для всех запросов с <code>app.use()</code> . Абсолютный путь к папке ресурсов - <code>__dirname + /public</code> .
|
||||
Теперь ваше приложение должно обслуживать таблицу стилей CSS. Снаружи общедоступная папка будет выглядеть подключенной к корневому каталогу. Ваша первая страница должна выглядеть немного лучше!
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваше приложение должно обслуживать файлы ресурсов из каталога <code>/public</code>
|
||||
testString: 'getUserInput => $.get(getUserInput(''url'') + ''/style.css'').then(data => { assert.match(data, /body\s*\{[^\}]*\}/, ''Your app does not serve static assets''); }, xhr => { throw new Error(xhr.responseText); })'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,46 @@
|
||||
---
|
||||
id: 587d7fb0367417b2b2512bee
|
||||
title: Start a Working Express Server
|
||||
localeTitle: Запустить работающий экспресс-сервер
|
||||
challengeType: 2
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
В первых двух строках файла myApp.js вы можете увидеть, как легко создать объект приложения Express. У этого объекта есть несколько методов, и мы изучим многие из них в этих задачах. Одним из основных методов является <code>app.listen(port)</code> . Он говорит вашему серверу прослушивать данный порт, переводя его в рабочее состояние. Вы можете увидеть это внизу файла. Это внутри комментариев, потому что для тестирования нам нужно, чтобы приложение работало в фоновом режиме. Весь код, который вы можете добавить, находится между этими двумя основными частями. Glitch хранит номер порта в переменной окружения <code>process.env.PORT</code> . Его значение <code>3000</code> .
|
||||
Давай обслужим нашу первую строку! В Express маршруты имеют следующую структуру: <code>app.METHOD(PATH, HANDLER)</code> . МЕТОД - это http-метод в нижнем регистре. PATH - это относительный путь на сервере (это может быть строка или даже регулярное выражение). HANDLER - это функция, которая вызывает Express при совпадении маршрута.
|
||||
Обработчики принимают <code>function(req, res) {...}</code> формы <code>function(req, res) {...}</code> , где req - объект запроса, а res - объект ответа. Например, обработчик
|
||||
<blockquote>function(req, res) {<br> res.send('Response String');<br>}</blockquote>
|
||||
будет служить строкой «Response String».
|
||||
Используйте метод <code>app.get()</code> для обслуживания строки Hello Express для получения запросов, соответствующих пути / root. Убедитесь, что ваш код работает, просматривая журналы, затем просмотрите результаты в своем браузере, нажав кнопку «Показать вживую» в пользовательском интерфейсе Glitch.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваше приложение должно обслуживать строку «Hello Express»
|
||||
testString: 'getUserInput => $.get(getUserInput(''url'')).then(data => { assert.equal(data, ''Hello Express'', ''Your app does not serve the text "Hello Express"''); }, xhr => { throw new Error(xhr.responseText); })'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,48 @@
|
||||
---
|
||||
id: 587d7fb2367417b2b2512bf7
|
||||
title: Use body-parser to Parse POST Requests
|
||||
localeTitle: Используйте body-parser для разбора POST-запросов
|
||||
challengeType: 2
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Помимо GET есть еще один распространенный http глагол, это POST. POST - это метод по умолчанию, используемый для отправки данных клиента с помощью HTML-форм. В соглашении REST POST используется для отправки данных для создания новых элементов в базе данных (новый пользователь или новый пост в блоге). У нас нет базы данных в этом проекте, но мы все равно узнаем, как обрабатывать запросы POST.
|
||||
В таких запросах данные не отображаются в URL, они скрыты в теле запроса. Это часть запроса HTML, также называемая полезной нагрузкой. Поскольку HTML основан на тексте, даже если вы не видите данные, это не значит, что они являются секретными. Необработанное содержимое запроса HTTP POST показано ниже:
|
||||
<blockquote>POST /path/subpath HTTP/1.0<br>From: john@example.com<br>User-Agent: someBrowser/1.0<br>Content-Type: application/x-www-form-urlencoded<br>Content-Length: 20<br>name=John+Doe&age=25</blockquote>
|
||||
Как видите, тело закодировано как строка запроса. Это формат по умолчанию, используемый формами HTML. С Ajax мы также можем использовать JSON для обработки данных, имеющих более сложную структуру. Существует также другой тип кодирования: multipart / form-data. Этот используется для загрузки бинарных файлов.
|
||||
В этом упражнении мы будем использовать урлен-кодированное тело.
|
||||
Для анализа данных, поступающих из запросов POST, вам необходимо установить пакет: body-parser. Этот пакет позволяет использовать серию промежуточного программного обеспечения, которое может декодировать данные в разных форматах. Смотрите документы <a href="https://github.com/expressjs/body-parser" target="_blank" >здесь</a> .
|
||||
Установите модуль body-parser в ваш файл package.json. Тогда потребуйте это наверху файла. Сохраните его в переменной с именем bodyParser.
|
||||
<code>bodyParser.urlencoded({extended: false})</code> программное обеспечение для обработки URL-кодированных данных возвращается <code>bodyParser.urlencoded({extended: false})</code> . <code>extended=false</code> - это параметр конфигурации, который указывает синтаксическому анализатору использовать классическую кодировку. При его использовании значения могут быть только строками или массивами. Расширенная версия обеспечивает большую гибкость данных, но она превосходит JSON. Передайте <code>app.use()</code> функцию, возвращенную предыдущим вызовом метода. Как обычно, промежуточное программное обеспечение должно быть установлено перед всеми маршрутами, которые в нем нуждаются.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Промежуточное программное обеспечение body-parser должно быть установлено
|
||||
testString: 'getUserInput => $.get(getUserInput(''url'') + ''/_api/add-body-parser'').then(data => { assert.isAbove(data.mountedAt, 0, ''"body-parser" is not mounted correctly'') }, xhr => { throw new Error(xhr.responseText); })'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
id: 587d7fb1367417b2b2512bf2
|
||||
title: Use the .env File
|
||||
localeTitle: Используйте файл .env
|
||||
challengeType: 2
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Файл <code>.env</code> - это скрытый файл, который используется для передачи переменных среды вашему приложению. Этот файл является секретным, никто, кроме вас, не может получить к нему доступ, и его можно использовать для хранения данных, которые вы хотите сохранить в секрете или скрыть. Например, вы можете хранить ключи API от внешних служб или URI вашей базы данных. Вы также можете использовать его для хранения параметров конфигурации. Установив параметры конфигурации, вы можете изменить поведение вашего приложения без необходимости переписывать некоторый код.
|
||||
Переменные среды доступны из приложения как <code>process.env.VAR_NAME</code> . Объект <code>process.env</code> является глобальным объектом Node, а переменные передаются в виде строк. По соглашению имена переменных должны быть в верхнем регистре, а слова разделены подчеркиванием. <code>.env</code> - это файл оболочки, поэтому вам не нужно <code>.env</code> в кавычки имена или значения. Также важно отметить, что не должно быть пробела вокруг знака равенства, когда вы присваиваете значения своим переменным, например, <code>VAR_NAME=value</code> . Обычно вы помещаете каждое определение переменной в отдельную строку.
|
||||
Давайте добавим переменную окружения в качестве опции конфигурации. Сохраните переменную <code>MESSAGE_STYLE=uppercase</code> <code>.env</code> файле <code>.env</code> . Затем сообщите обработчику маршрута GET <code>/json</code> который вы создали в последнем вызове, чтобы преобразовать сообщение объекта ответа в верхний регистр, если <code>process.env.MESSAGE_STYLE</code> равен <code>process.env.MESSAGE_STYLE</code> <code>uppercase</code> . Объектом ответа должно стать <code>{"message": "HELLO JSON"}</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Реакция конечной точки <code>/json</code> должна меняться в зависимости от переменной окружения <code>MESSAGE_STYLE</code>
|
||||
testString: 'getUserInput => $.get(getUserInput(''url'') + ''/_api/use-env-vars'').then(data => { assert.isTrue(data.passed, ''The response of "/json" does not change according to MESSAGE_STYLE''); }, xhr => { throw new Error(xhr.responseText); })'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Reference in New Issue
Block a user