fix(curriculum): fix challenges for russian language

This commit is contained in:
Valeriy S
2019-08-28 16:26:13 +03:00
committed by mrugesh
parent a17c3c44aa
commit 12f65a6742
1418 changed files with 39634 additions and 19395 deletions

View File

@@ -1,23 +1,25 @@
---
id: 587d7fb1367417b2b2512bf4
title: Chain Middleware to Create a Time Server
localeTitle: Промежуточное ПО для создания сервера времени
challengeType: 2
forumTopicId: 301510
localeTitle: Промежуточное ПО для создания сервера времени
---
## Description
<section id='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 id='instructions'>
In the route <code>app.get('/now', ...)</code> chain a middleware function and the final handler. In the middleware function you should add the current time to the request object in the <code>req.time</code> key. You can use <code>new Date().toString()</code>. In the handler, respond with a JSON object, taking the structure <code>{time: req.time}</code>.
<strong>Note:</strong> The test will not pass if you dont chain the middleware. If you mount the function somewhere else, the test will fail, even if the output result is correct.
</section>
## Tests
@@ -25,24 +27,11 @@ challengeType: 2
```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); })'
- text: The /now endpoint should have mounted middleware
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: The /now endpoint should return a time that is +/- 20 secs from now
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>

View File

@@ -1,12 +1,13 @@
---
id: 587d7fb2367417b2b2512bf8
title: Get Data from POST Requests
localeTitle: Получить данные из запросов POST
challengeType: 2
forumTopicId: 301511
localeTitle: Получить данные из запросов POST
---
## Description
<section id='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-форму, предоставленную на главной странице приложения.
@@ -15,11 +16,11 @@ POST (иногда PUT) - создание нового ресурса с исп
GET - чтение существующего ресурса без его изменения,
PUT или PATCH (иногда POST) - обновление ресурса с использованием данных отправлено,
DELETE =&gt; Удалить ресурс.
Есть также несколько других методов, которые используются для согласования соединения с сервером. За исключением GET, все другие методы, перечисленные выше, могут иметь полезную нагрузку (то есть данные в теле запроса). Промежуточное программное обеспечение body-parser также работает с этими методами.
Есть также несколько других методов, которые используются для согласования соединения с сервером. За исключением GET, все другие методы, перечисленные выше, могут иметь полезную нагрузку (то есть данные в теле запроса). Промежуточное программное обеспечение body-parser также работает с этими методами.
</section>
## Instructions
<section id='instructions'>
<section id='instructions'>
</section>
@@ -28,24 +29,11 @@ DELETE =&gt; Удалить ресурс.
```yml
tests:
- text: «Тест 1- ваша конечная точка API должна отвечать правильным именем»
- text: 'Test 1 : Your API endpoint should respond with the correct name'
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 должна отвечать правильным именем»
- text: 'Test 2 : Your API endpoint should respond with the correct name'
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>

View File

@@ -1,21 +1,23 @@
---
id: 587d7fb2367417b2b2512bf6
title: Get Query Parameter Input from the Client
localeTitle: Получить ввод параметров запроса от клиента
challengeType: 2
forumTopicId: 301512
localeTitle: Получить ввод параметров запроса от клиента
---
## Description
<section id='description'>
<section id='description'>
Другим распространенным способом получения ввода от клиента является кодирование данных после пути маршрута с использованием строки запроса. Строка запроса ограничена знаком вопроса (?) И включает пары поле = значение. Каждая пара отделяется амперсандом (&amp;). 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&amp;last=lastname</code> .
СОВЕТ: В следующем упражнении мы собираемся получить данные из запроса POST по тому же пути <code>/name</code> маршрута. Если вы хотите, вы можете использовать метод <code>app.route(path).get(handler).post(handler)</code> . Этот синтаксис позволяет связывать разные обработчики глаголов на одном и том же пути маршрута. Вы можете сэкономить немного времени на ввод текста и получить более чистый код.
СОВЕТ: В следующем упражнении мы собираемся получить данные из запроса POST по тому же пути <code>/name</code> маршрута. Если вы хотите, вы можете использовать метод <code>app.route(path).get(handler).post(handler)</code> . Этот синтаксис позволяет связывать разные обработчики глаголов на одном и том же пути маршрута. Вы можете сэкономить немного времени на ввод текста и получить более чистый код.
</section>
## Instructions
<section id='instructions'>
<section id='instructions'>
Build an API endpoint, mounted at <code>GET /name</code>. Respond with a JSON document, taking the structure <code>{ name: 'firstname lastname'}</code>. The first and last name parameters should be encoded in a query string e.g. <code>?first=firstname&last=lastname</code>.
<strong>Note:</strong> In the following exercise you are going to receive data from a POST request, at the same <code>/name</code> route path. If you want, you can use the method <code>app.route(path).get(handler).post(handler)</code>. This syntax allows you to chain different verb handlers on the same path route. You can save a bit of typing, and have cleaner code.
</section>
## Tests
@@ -23,24 +25,11 @@ challengeType: 2
```yml
tests:
- text: «Тест 1- ваша конечная точка API должна отвечать правильным именем»
- text: 'Test 1 : Your API endpoint should respond with the correct name'
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 должна отвечать правильным именем»
- text: 'Test 2 : Your APi endpoint should respond with the correct name'
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>

View File

@@ -1,20 +1,21 @@
---
id: 587d7fb2367417b2b2512bf5
title: Get Route Parameter Input from the Client
localeTitle: Получить ввод параметров маршрута от клиента
challengeType: 2
forumTopicId: 301513
localeTitle: Получить ввод параметров маршрута от клиента
---
## Description
<section id='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
Построить эхо-сервер, смонтированный по маршруту <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 id='instructions'>
Build an echo server, mounted at the route <code>GET /:word/echo</code>. Respond with a JSON object, taking the structure <code>{echo: word}</code>. You can find the word to be repeated at <code>req.params.word</code>. You can test your route from your browser's address bar, visiting some matching routes, e.g. <code>your-app-rootpath/freecodecamp/echo</code>.
</section>
## Tests
@@ -22,24 +23,11 @@ challengeType: 2
```yml
tests:
- text: «Тест 1- ваш эхо-сервер должен правильно повторять слова»
- text: 'Test 1 : Your echo server should repeat words correctly'
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- ваш эхо-сервер должен правильно повторять слова»
- text: 'Test 2 : Your echo server should repeat words correctly'
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>

View File

@@ -1,24 +1,26 @@
---
id: 587d7fb1367417b2b2512bf3
title: Implement a Root-Level Request Logger Middleware
localeTitle: Реализовать промежуточное программное обеспечение регистратора запросов корневого уровня
challengeType: 2
forumTopicId: 301514
localeTitle: Реализовать промежуточное программное обеспечение регистратора запросов корневого уровня
---
## Description
<section id='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(&lt;mware-function&gt;)</code> . В этом случае функция будет выполнена для всех запросов, но вы также можете установить более конкретные условия. Например, если вы хотите, чтобы функция выполнялась только для запросов POST, вы можете использовать <code>app.post(&lt;mware-function&gt;)</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 оценивает функции в порядке их появления в коде. Это верно и для промежуточного программного обеспечения. Если вы хотите, чтобы он работал для всех маршрутов, он должен быть установлен перед ними.
Подсказка: Express оценивает функции в порядке их появления в коде. Это верно и для промежуточного программного обеспечения. Если вы хотите, чтобы он работал для всех маршрутов, он должен быть установлен перед ними.
</section>
## Instructions
<section id='instructions'>
<section id='instructions'>
Build a simple logger. For every request, it should log to the console a string taking the following format: <code>method path - ip</code>. An example would look like this: <code>GET /json - ::ffff:127.0.0.1</code>. Note that there is a space between <code>method</code> and <code>path</code> and that the dash separating <code>path</code> and <code>ip</code> is surrounded by a space on both sides. You can get the request method (http verb), the relative route path, and the callers ip from the request object using <code>req.method</code>, <code>req.path</code> and <code>req.ip</code>. Remember to call <code>next()</code> when you are done, or your server will be stuck forever. Be sure to have the Logs opened, and see what happens when some request arrives.
<strong>Note:</strong> Express evaluates functions in the order they appear in the code. This is true for middleware too. If you want it to work for all the routes, it should be mounted before them.
</section>
## Tests
@@ -26,22 +28,9 @@ challengeType: 2
```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); })'
- text: Root level logger middleware should be active
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>

View File

@@ -1,19 +1,20 @@
---
id: 587d7fb0367417b2b2512bed
title: Meet the Node console
localeTitle: Встречайте консоль Node
challengeType: 2
forumTopicId: 301515
localeTitle: Встречайте консоль Node
---
## Description
<section id='description'>
<section id='description'>
В процессе разработки важно иметь возможность проверить, что происходит в вашем коде. Node - это просто среда JavaScript. Как и клиентский JavaScript, вы можете использовать консоль для отображения полезной отладочной информации. На вашем локальном компьютере вы увидите вывод консоли в терминале. На Glitch вы можете открыть логи в нижней части экрана. Вы можете переключать панель журнала с помощью кнопки «Журналы» (вверху слева под названием приложения).
Для начала просто распечатай классический «Hello World» в консоли. Мы рекомендуем держать панель журнала открытой во время работы с этими проблемами. Читая журналы, вы можете знать природу возможных ошибок.
Для начала просто распечатай классический «Hello World» в консоли. Мы рекомендуем держать панель журнала открытой во время работы с этими проблемами. Читая журналы, вы можете знать природу возможных ошибок.
</section>
## Instructions
<section id='instructions'>
Измените файл <code>myApp.js</code> чтобы <code>myApp.js</code> «Hello World» на консоль.
<section id='instructions'>
Измените файл <code>myApp.js</code> чтобы <code>myApp.js</code> «Hello World» на консоль.
</section>
## Tests
@@ -21,22 +22,9 @@ challengeType: 2
```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); })'
- text: <code>"Hello World"</code> should be in the console
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>

View File

@@ -1,22 +1,25 @@
---
id: 587d7fb0367417b2b2512bef
title: Serve an HTML File
localeTitle: Подавать файл HTML
challengeType: 2
forumTopicId: 301516
localeTitle: Подавать файл HTML
---
## Description
<section id='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 оценивает маршруты сверху вниз. Он выполняет обработчик для первого совпадения. Вы должны закомментировать предыдущее решение, иначе сервер продолжит отвечать строкой.
Примечание: Вы можете отредактировать решение предыдущей задачи или создать новое. Если вы создаете новое решение, имейте в виду, что Express оценивает маршруты сверху вниз. Он выполняет обработчик для первого совпадения. Вы должны закомментировать предыдущее решение, иначе сервер продолжит отвечать строкой.
</section>
## Instructions
<section id='instructions'>
<section id='instructions'>
Send the <code>/views/index.html</code> file as a response to GET requests to the <code>/</code> path. If you view your live app, you should see a big HTML heading (and a form that we will use later…), with no style applied.
<strong>Note:</strong> You can edit the solution of the previous challenge or create a new one. If you create a new solution, keep in mind that Express evaluates routes from top to bottom, and executes the handler for the first match. You have to comment out the preceding solution, or the server will keep responding with a string.
</section>
## Tests
@@ -24,22 +27,9 @@ challengeType: 2
```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); })'
- text: Your app should serve the file 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>

View File

@@ -1,20 +1,21 @@
---
id: 587d7fb1367417b2b2512bf1
title: Serve JSON on a Specific Route
localeTitle: Служить JSON по определенному маршруту
challengeType: 2
forumTopicId: 301517
localeTitle: Служить JSON по определенному маршруту
---
## Description
<section id='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, вы должны увидеть сообщение на экране.
Подайте объект <code>{"message": "Hello json"}</code> как ответ в формате JSON на запросы GET к маршруту <code>/json</code> . Затем укажите ваш браузер на ваш-app-url / json, вы должны увидеть сообщение на экране.
</section>
## Instructions
<section id='instructions'>
<section id='instructions'>
Serve the object <code>{"message": "Hello json"}</code> as a response, in JSON format, to GET requests to the <code>/json</code> route. Then point your browser to <code>your-app-url/json</code>, you should see the message on the screen.
</section>
## Tests
@@ -22,22 +23,9 @@ challengeType: 2
```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); })'
- text: 'The endpoint <code>/json</code> should serve the json object <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>

View File

@@ -1,20 +1,22 @@
---
id: 587d7fb0367417b2b2512bf0
title: Serve Static Assets
localeTitle: Служить статическим активам
challengeType: 2
forumTopicId: 301518
localeTitle: Служить статическим активам
---
## Description
<section id='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. Снаружи общедоступная папка будет выглядеть подключенной к корневому каталогу. Ваша первая страница должна выглядеть немного лучше!
Теперь ваше приложение должно обслуживать таблицу стилей CSS. Снаружи общедоступная папка будет выглядеть подключенной к корневому каталогу. Ваша первая страница должна выглядеть немного лучше!
</section>
## Instructions
<section id='instructions'>
<section id='instructions'>
Mount the <code>express.static()</code> middleware for all requests with <code>app.use()</code>. The absolute path to the assets folder is <code>__dirname + /public</code>.
Now your app should be able to serve a CSS stylesheet. From outside, the public folder will appear mounted to the root directory. Your front-page should look a little better now!
</section>
## Tests
@@ -22,22 +24,9 @@ HTML-сервер обычно имеет один или несколько к
```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); })'
- text: Your app should serve asset files from the <code>/public</code> directory
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>

View File

@@ -1,23 +1,25 @@
---
id: 587d7fb0367417b2b2512bee
title: Start a Working Express Server
localeTitle: Запустить работающий экспресс-сервер
challengeType: 2
forumTopicId: 301519
localeTitle: Запустить работающий экспресс-сервер
---
## Description
<section id='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.
Используйте метод <code>app.get()</code> для обслуживания строки Hello Express для получения запросов, соответствующих пути / root. Убедитесь, что ваш код работает, просматривая журналы, затем просмотрите результаты в своем браузере, нажав кнопку «Показать вживую» в пользовательском интерфейсе Glitch.
</section>
## Instructions
<section id='instructions'>
<section id='instructions'>
Use the <code>app.get()</code> method to serve the string "Hello Express" to GET requests matching the <code>/</code> (root) path.
<strong>Note:</strong> Be sure that your code works by looking at the logs, then see the results in your browser by clicking the Show Live button if you are using Glitch.
</section>
## Tests
@@ -25,22 +27,9 @@ challengeType: 2
```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); })'
- text: Your app should serve the string '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>

View File

@@ -1,12 +1,13 @@
---
id: 587d7fb2367417b2b2512bf7
title: Use body-parser to Parse POST Requests
localeTitle: Используйте body-parser для разбора POST-запросов
challengeType: 2
forumTopicId: 301520
localeTitle: Используйте body-parser для разбора POST-запросов
---
## Description
<section id='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>
@@ -14,12 +15,13 @@ challengeType: 2
В этом упражнении мы будем использовать урлен-кодированное тело.
Для анализа данных, поступающих из запросов 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> функцию, возвращенную предыдущим вызовом метода. Как обычно, промежуточное программное обеспечение должно быть установлено перед всеми маршрутами, которые в нем нуждаются.
<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 id='instructions'>
Install the <code>body-parser</code> module in your <code>package.json</code>. Then, <code>require</code> it at the top of the file. Store it in a variable named <code>bodyParser</code>. The middleware to handle urlencoded data is returned by <code>bodyParser.urlencoded({extended: false})</code>. Pass to <code>app.use()</code> the function returned by the previous method call. As usual, the middleware must be mounted before all the routes which need it.
<strong>Note:</strong> <code>extended=false</code> is a configuration option that tells the parser to use the classic encoding. When using it, values can be only strings or arrays. The extended version allows more data flexibility, but it is outmatched by JSON.
</section>
## Tests
@@ -27,22 +29,9 @@ challengeType: 2
```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); })'
- text: The 'body-parser' middleware should be mounted
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>

View File

@@ -1,20 +1,22 @@
---
id: 587d7fb1367417b2b2512bf2
title: Use the .env File
localeTitle: Используйте файл .env
challengeType: 2
forumTopicId: 301521
localeTitle: Используйте файл .env
---
## Description
<section id='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> .
Давайте добавим переменную окружения в качестве опции конфигурации. Сохраните переменную <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 id='instructions'>
Let's add an environment variable as a configuration option.
Store the variable <code>MESSAGE_STYLE=uppercase</code> in the <code>.env</code> file. Then tell the GET <code>/json</code> route handler that you created in the last challenge to transform the response objects message to uppercase if <code>process.env.MESSAGE_STYLE</code> equals <code>uppercase</code>. The response object should become <code>{"message": "HELLO JSON"}</code>.
</section>
## Tests
@@ -22,22 +24,9 @@ challengeType: 2
```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); })'
- text: The response of the endpoint <code>/json</code> should change according to the environment variable <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>