diff options
Diffstat (limited to 'files/ru/learn/server-side/express_nodejs')
5 files changed, 90 insertions, 90 deletions
diff --git a/files/ru/learn/server-side/express_nodejs/development_environment/index.html b/files/ru/learn/server-side/express_nodejs/development_environment/index.html index c0c188f731..626090c6a0 100644 --- a/files/ru/learn/server-side/express_nodejs/development_environment/index.html +++ b/files/ru/learn/server-side/express_nodejs/development_environment/index.html @@ -85,7 +85,7 @@ translation_of: Learn/Server-side/Express_Nodejs/development_environment <p><span class="tlid-translation translation" lang="ru"><span title="">Самый простой способ установить последнюю версию LTS Node 6.x - это использовать</span></span> <a href="https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions">package manager</a> <span class="tlid-translation translation" lang="ru"><span title="">чтобы получить его из репозитория бинарных дистрибутивов Ubuntu.</span> <span title="">Это можно сделать очень просто, выполнив следующие две команды на вашем терминале:</span></span></p> -<pre class="brush: bash notranslate"><code>curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - +<pre class="brush: bash"><code>curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install -y nodejs</code> </pre> @@ -100,12 +100,12 @@ sudo apt-get install -y nodejs</code> <p><span class="tlid-translation translation" lang="ru"><span title="">Самый простой способ проверить, установлен ли этот узел, - это запустить команду «версия» в своём терминале / командной строке и проверить, что возвращается строка версии:</span></span></p> -<pre class="brush: bash notranslate">>node -v +<pre class="brush: bash">>node -v v8.11.3</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Менеджер пакетов Nodejs NPM также должен быть установлен и может быть протестирован таким же образом:</span></span></p> -<pre class="brush: bash notranslate">>npm -v +<pre class="brush: bash">>npm -v 5.8.0</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">В качестве немного более захватывающего теста давайте создадим очень простой сервер «чистого узла», который просто печатает «Hello World» в браузере, когда вы посещаете правильный URL в вашем браузере:</span></span></p> @@ -113,7 +113,7 @@ v8.11.3</pre> <ol> <li><span class="tlid-translation translation" lang="ru"><span title="">Скопируйте следующий текст в файл с именем hellonode.js.</span> <span title="">Здесь используются чистые функции Node (ничего из Express) и некоторый синтаксис ES6:</span></span> - <pre class="brush: js notranslate">//Загрузка модуля HTTP + <pre class="brush: js">//Загрузка модуля HTTP const http = require("http"); <code>const hostname = '127.0.0.1'; const port = 3000; @@ -141,7 +141,7 @@ server.listen(port, hostname, () => { </div> </li> <li><span class="tlid-translation translation" lang="ru"><span title="">Запустите сервер, перейдя в тот же каталог, что и ваш файл hellonode.js в командной строке, и вызвав узел вместе с именем скрипта, например так:</span></span> - <pre class="brush: bash notranslate">>node hellonode.js + <pre class="brush: bash">>node hellonode.js Server running at http://127.0.0.1:3000/ </pre> </li> @@ -169,15 +169,15 @@ Server running at http://127.0.0.1:3000/ <ol> <li><span class="tlid-translation translation" lang="ru"><span title="">Сначала создайте каталог для вашего нового приложения и перейдите в него:</span></span> - <pre class="brush: bash notranslate">mkdir myapp + <pre class="brush: bash">mkdir myapp cd myapp</pre> </li> <li><span class="tlid-translation translation" lang="ru"><span title="">Используйте команду npm init для создания файла package.json для вашего приложения.</span> <span title="">Эта команда запрашивает у вас несколько вещей, включая имя и версию вашего приложения, а также имя исходного файла точки входа (по умолчанию это index.js).</span> <span title="">Сейчас просто примите значения по умолчанию:</span></span> - <pre class="brush: bash notranslate">npm init</pre> + <pre class="brush: bash">npm init</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Если вы отобразите файл package.json (cat package.json), вы увидите принятые по умолчанию значения, заканчивающиеся лицензией.</span></span></p> - <pre class="brush: json notranslate">{ + <pre class="brush: json">{ "name": "myapp", "version": "1.0.0", "description": "", @@ -192,11 +192,11 @@ cd myapp</pre> </li> <li><span class="tlid-translation translation" lang="ru"><span title="">Теперь установите Express в каталог myapp и сохраните его в списке зависимостей вашего файла package.json</span></span></li> <li> - <pre class="brush: bash notranslate">npm install express --save</pre> + <pre class="brush: bash">npm install express --save</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Раздел зависимостей вашего package.json теперь появится в конце файла package.json и будет содержать Express.</span></span></p> - <pre class="brush: json notranslate">{ + <pre class="brush: json">{ "name": "myapp", "version": "1.0.0", "description": "", @@ -213,7 +213,7 @@ cd myapp</pre> </pre> </li> <li><span class="tlid-translation translation" lang="ru"><span title="">Для использования библиотеки вы вызываете функцию require (), как показано ниже в вашем файле index.js.</span></span> - <pre class="notranslate"><code><strong>const express = require('express')</strong> + <pre><code><strong>const express = require('express')</strong> const app = express(); app.get('/', (req, res) => { @@ -230,7 +230,7 @@ app.listen(</code>8000<code>, () => { <span class="tlid-translation translation" lang="ru"><span title="">Создайте файл с именем index.js в корне каталога приложения «myapp» и передайте ему содержимое, показанное выше.</span></span></p> </li> <li><span class="tlid-translation translation" lang="ru"><span title="">Вы можете запустить сервер, вызвав узел с помощью скрипта в командной строке:</span></span> - <pre class="brush: bash notranslate">>node index.js + <pre class="brush: bash">>node index.js Example app listening on port 8000 </pre> </li> @@ -241,11 +241,11 @@ Example app listening on port 8000 <p><span class="tlid-translation translation" lang="ru"><span title="">Если зависимость используется только во время разработки, вы должны вместо этого сохранить её как «зависимость разработки» (чтобы пользователям вашего пакета не приходилось устанавливать её в производстве).</span> <span title="">Например, чтобы использовать популярный инструмент JavaScript Linting eslint, вы должны вызвать NPM, как показано ниже:</span></span></p> -<pre class="brush: bash notranslate"><code>npm install eslint --save-dev</code></pre> +<pre class="brush: bash"><code>npm install eslint --save-dev</code></pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Следующая запись будет добавлена в package.json вашего приложения:</span></span></p> -<pre class="brush: js notranslate"> "devDependencies": { +<pre class="brush: js"> "devDependencies": { "eslint": "^4.12.1" } </pre> @@ -264,7 +264,7 @@ Example app listening on port 8000 <p><span class="tlid-translation translation" lang="ru"><span title="">Например, чтобы определить скрипт для запуска зависимости разработки eslint, которую мы указали в предыдущем разделе, мы могли бы добавить следующий блок скрипта в наш файл package.json (при условии, что наш источник приложения находится в папке / src / js):</span></span></p> -<pre class="brush: js notranslate">"scripts": { +<pre class="brush: js">"scripts": { ... "lint": "eslint src/js" ... @@ -275,7 +275,7 @@ Example app listening on port 8000 <p><span class="tlid-translation translation" lang="ru"><span title="">Затем мы сможем запустить eslint с помощью NPM, вызвав:</span></span></p> -<pre class="brush: bash notranslate"><code>npm run-script lint +<pre class="brush: bash"><code>npm run-script lint # OR (using the alias) npm run lint</code> </pre> @@ -286,16 +286,16 @@ npm run lint</code> <p><span class="tlid-translation translation" lang="ru"><span title="">Инструмент Express Application Generator создаёт «скелет» приложения Express.</span> <span title="">Установите генератор, используя NPM, как показано (флаг -g устанавливает инструмент глобально, чтобы вы могли вызывать его из любого места):</span></span></p> -<pre class="notranslate"><code>npm install express-generator -g</code></pre> +<pre><code>npm install express-generator -g</code></pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Чтобы создать приложение Express с именем «helloworld» с настройками по умолчанию, перейдите туда, где вы хотите его создать, и запустите приложение, как показано ниже:</span></span></p> -<pre class="brush: bash notranslate">express helloworld</pre> +<pre class="brush: bash">express helloworld</pre> <div class="note"> <p><strong>Замечание:</strong> <span class="tlid-translation translation" lang="ru"><span title="">Вы также можете указать библиотеку шаблонов для использования и ряд других настроек.</span> <span title="">Используйте команду help, чтобы увидеть все параметры:</span></span></p> -<pre class="brush: bash notranslate">express --help +<pre class="brush: bash">express --help </pre> </div> @@ -304,7 +304,7 @@ npm run lint</code> <div class="note"> <p><span class="tlid-translation translation" lang="ru"><span title="">Новое приложение будет иметь файл package.json в своём корневом каталоге.</span> <span title="">Вы можете открыть это, чтобы увидеть, какие зависимости установлены, включая Express и библиотеку шаблонов Jade:</span></span></p> -<pre class="brush: js notranslate">{ +<pre class="brush: js">{ "name": "helloworld", "version": "0.0.0", "private": true, @@ -325,13 +325,13 @@ npm run lint</code> <p><span class="tlid-translation translation" lang="ru"><span title="">Установите все зависимости для приложения helloworld, используя NPM, как показано ниже:</span></span></p> -<pre class="brush: bash notranslate">cd helloworld +<pre class="brush: bash">cd helloworld npm install </pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Затем запустите приложение (команды немного отличаются для Windows и Linux / macOS), как показано ниже:</span></span></p> -<pre class="brush: bash notranslate"># Run the helloworld on Windows with Command Prompt +<pre class="brush: bash"># Run the helloworld on Windows with Command Prompt SET DEBUG=helloworld:* & npm start # Run the helloworld on Windows with PowerShell @@ -343,7 +343,7 @@ DEBUG=helloworld:* npm start <p><span class="tlid-translation translation" lang="ru"><span title="">Команда DEBUG создаёт полезное ведение журнала, что приводит к выводу, подобному показанному ниже.</span></span></p> -<pre class="brush: bash notranslate">>SET DEBUG=helloworld:* & npm start +<pre class="brush: bash">>SET DEBUG=helloworld:* & npm start > helloworld@0.0.0 start D:\Github\expresstests\helloworld > node ./bin/www diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html index c8b39b2872..830c895bc8 100644 --- a/files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html +++ b/files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html @@ -7,7 +7,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_ba <p>Откройте файл <strong>/views/layout.pug </strong>и замените его содержимое следующим.</p> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html">doctype html +<pre class="brush: html line-numbers language-html"><code class="language-html">doctype html html(lang='en') head title= title @@ -53,7 +53,7 @@ html(lang='en') <p>Базовый шаблон также ссылается на локальный файл стилей (<strong>style.css</strong>), что обеспечивает дополнительное управление внешним видом. Откройте <strong>/public/stylesheets/style.css</strong> и замените его содержимое таким текстом:</p> -<pre class="brush: css line-numbers language-css notranslate"><code class="language-css"><span class="selector token"><span class="class token">.sidebar-nav</span> </span><span class="punctuation token">{</span> +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.sidebar-nav</span> </span><span class="punctuation token">{</span> <span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span> <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> <span class="property token">list-style</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span> diff --git a/files/ru/learn/server-side/express_nodejs/forms/index.html b/files/ru/learn/server-side/express_nodejs/forms/index.html index 1a6208f065..910f6a53ed 100644 --- a/files/ru/learn/server-side/express_nodejs/forms/index.html +++ b/files/ru/learn/server-side/express_nodejs/forms/index.html @@ -46,7 +46,7 @@ translation_of: Learn/Server-side/Express_Nodejs/forms <p>Определённые в HTML формы собираются внутри тэга <code><form>...</form></code>, содержащего хотя ы один элемент <code>input</code> с <code>type="submit"</code>.</p> -<pre class="brush: html notranslate"><form action="/team_name_url/" method="post"> +<pre class="brush: html"><form action="/team_name_url/" method="post"> <label for="team_name">Enter name: </label> <input id="team_name" type="text" name="name_field" value="Default name for team."> <input type="submit" value="OK"> @@ -108,7 +108,7 @@ translation_of: Learn/Server-side/Express_Nodejs/forms <p>Установите модуль, выполнив следующую команду в корне проекта</p> -<pre class="brush: bash notranslate">npm install express-validator +<pre class="brush: bash">npm install express-validator </pre> <h4 id="Использование_express-validator">Использование express-validator</h4> @@ -119,7 +119,7 @@ translation_of: Learn/Server-side/Express_Nodejs/forms <p>Для того, чтобы использовать валидатор в наших контроллерах, мы должны требовать функции, которые мы хотим использовать из модулей <strong>'express-validator/check</strong>' и <strong>'express-validator/filter</strong>', как показано ниже:</p> -<pre class="brush: js notranslate">const { body,validationResult } = require('express-validator/check'); +<pre class="brush: js">const { body,validationResult } = require('express-validator/check'); const { sanitizeBody } = require('express-validator/filter'); </pre> @@ -130,12 +130,12 @@ const { sanitizeBody } = require('express-validator/filter'); <ul> <li><code><a href="https://github.com/ctavan/express-validator#bodyfields-message">body(fields[, message])</a></code>: Задаёт набор полей в теле запроса (параметр <code>POST</code>) для проверки, а также необязательное сообщение об ошибке, которое может отображаться в случае сбоя тестов. Критерии проверки последовательно связаны с методом <code>body()</code>. Например, первая проверка ниже проверяет, что поле" имя "не пустое и задаёт сообщение об ошибке" пустое имя", если оно не пустое. Второй тест проверяет, что поле age является допустимой датой, и с помощью optional() указывает, что пустые и пустые строки не пройдут проверку. - <pre class="brush: js notranslate">body('name', 'Empty name').isLength({ min: 1 }), + <pre class="brush: js">body('name', 'Empty name').isLength({ min: 1 }), body('age', 'Invalid age').optional({ checkFalsy: true }).isISO8601(), </pre> Можно также последовательно подключить различные валидаторы и добавить сообщения, отображаемые при выполнении предыдущих валидаторов.</li> <li> - <pre class="brush: js notranslate">body('name').isLength({ min: 1 }).trim().withMessage('Name empty.') + <pre class="brush: js">body('name').isLength({ min: 1 }).trim().withMessage('Name empty.') .isAlpha().withMessage('Name must be alphabet letters.'), </pre> @@ -144,11 +144,11 @@ body('age', 'Invalid age').optional({ checkFalsy: true }).isISO8601(), </div> </li> <li><code><a href="https://github.com/ctavan/express-validator#sanitizebodyfields">sanitizeBody(fields)</a></code>: Задаёт поле тела для очистки. затем операции очистки последовательно соединяются с этим методом. Например, операция очистки <code>escape()</code>, описанная ниже, удаляет символы HTML из переменной name, которые могут использоваться в атаках сценариев между сайтами JavaScript. - <pre class="brush: js notranslate">sanitizeBody('name').trim().escape(), + <pre class="brush: js">sanitizeBody('name').trim().escape(), sanitizeBody('date').toDate(),</pre> </li> <li><code><a href="https://github.com/ctavan/express-validator#validationresultreq">validationResult(req)</a></code>: Запускает проверку, делая ошибки доступными в виде объекта результата проверки. Это вызывается в отдельном обратном вызове, как показано ниже: - <pre class="brush: js notranslate">(req, res, next) => { + <pre class="brush: js">(req, res, next) => { // Extract the validation errors from a request. const errors = validationResult(req); @@ -193,7 +193,7 @@ sanitizeBody('date').toDate(),</pre> <p>Мы уже создали маршруты для всех страниц создания нашей модели в <strong>/routes/catalog.js</strong> (in a <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes">previous tutorial</a>). Например, жанровые маршруты показаны ниже:</p> -<pre class="brush: js notranslate">// GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id). +<pre class="brush: js">// GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id). router.get('/genre/create', genre_controller.genre_create_get); // POST request for creating Genre. diff --git a/files/ru/learn/server-side/express_nodejs/introduction/index.html b/files/ru/learn/server-side/express_nodejs/introduction/index.html index 881a3c70d6..cbcafaa64a 100644 --- a/files/ru/learn/server-side/express_nodejs/introduction/index.html +++ b/files/ru/learn/server-side/express_nodejs/introduction/index.html @@ -46,13 +46,13 @@ translation_of: Learn/Server-side/Express_Nodejs/Introduction <li>Создайте папку, куда вы хотите сохранить программу, к примеру <code>test-node</code> и перейдите в неё с помощью следующей команды:</li> </ol> -<pre class="notranslate"><code>cd test-node</code></pre> +<pre><code>cd test-node</code></pre> <ol start="3"> <li>Используя любимый текстовый редактор, создайте файл <code>hello.js</code> и вставьте в него код:</li> </ol> -<pre class="brush: js notranslate">// Загружаем HTTP модуль +<pre class="brush: js">// Загружаем HTTP модуль const http = require("http"); const hostname = "127.0.0.1"; @@ -79,7 +79,7 @@ server.listen(port, hostname, () => { <li>Вернитесь в терминал и выполните следующую команду:</li> </ol> -<pre class="notranslate"><code>node hello.js</code></pre> +<pre><code>node hello.js</code></pre> <p>В итоге, перейдите по ссылке <code>http://localhost:8000</code> в вашем браузере; вы должны увидеть текст "<strong>Hello World</strong>" в верху слева на чистой странице.</p> @@ -144,7 +144,7 @@ server.listen(port, hostname, () => { <p><span class="tlid-translation translation" lang="ru"><span title="">Совет: Если у вас уже установлены Node и Express (или если вы устанавливаете их, как показано в следующей статье), вы можете сохранить этот код в файле с именем app.js и запустить его в командной строке, вызвав узел app.js.</span> <span title="">отражения</span><span title="">)</span><span title="">.</span></span></p> </div> -<pre class="brush: js notranslate">var express = require('express'); +<pre class="brush: js">var express = require('express'); var app = express(); <strong>app.get('/', function(req, res) { @@ -168,7 +168,7 @@ app.listen(3000, function() { <br> <span title="">Приведённый ниже код показывает, как мы импортируем модуль по имени, используя в качестве примера платформу Express.</span> <span title="">Сначала мы вызываем функцию require (), определяя имя модуля в виде строки («express») и вызывая возвращённый объект для создания приложения Express.</span> <span title="">Затем мы можем получить доступ к свойствам и функциям объекта приложения.</span></span></p> -<pre class="brush: js notranslate">var express = require('express'); +<pre class="brush: js">var express = require('express'); var app = express(); </pre> @@ -180,13 +180,13 @@ var app = express(); <p><span class="tlid-translation translation" lang="ru"><span title="">Чтобы сделать объекты доступными вне модуля, вам просто нужно назначить их объекту экспорта.</span> <span title="">Например, модуль square.js ниже представляет собой файл, который экспортирует методы area () и perimeter ():</span></span></p> -<pre class="brush: js notranslate">exports.area = function(width) { return width * width; }; +<pre class="brush: js">exports.area = function(width) { return width * width; }; exports.perimeter = function(width) { return 4 * width; }; </pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Мы можем импортировать этот модуль, используя require (), а затем вызвать экспортированные методы, как показано:</span></span></p> -<pre class="brush: js notranslate">var square = require('./square'); // Here we require() the name of the file without the (optional) .js file extension +<pre class="brush: js">var square = require('./square'); // Here we require() the name of the file without the (optional) .js file extension console.log('The area of a square with a width of 4 is ' + square.area(4));</pre> <div class="note"> @@ -195,7 +195,7 @@ console.log('The area of a square with a width of 4 is ' + square.area(4));</pre <p><span class="tlid-translation translation" lang="ru"><span title="">Если вы хотите экспортировать полный объект в одном назначении, а не создавать его по одному свойству за раз, назначьте его для module.exports, как показано ниже (вы также можете сделать это, чтобы сделать корень объекта экспорта конструктором или другой функцией)</span> <span title="">:</span></span></p> -<pre class="brush: js notranslate">module.exports = { +<pre class="brush: js">module.exports = { area: function(width) { return width * width; }, @@ -212,13 +212,13 @@ console.log('The area of a square with a width of 4 is ' + square.area(4));</pre <p><span class="tlid-translation translation" lang="ru"><span title="">Код JavaScript часто использует асинхронные, а не синхронные API для операций, выполнение которых может занять некоторое время.</span> <span title="">Синхронный API - это тот, в котором каждая операция должна завершиться до начала следующей операции.</span> <span title="">Например, следующие функции журнала являются синхронными и выводят текст на консоль по порядку (первый, второй).</span></span></p> -<pre class="brush: js notranslate">console.log('First'); +<pre class="brush: js">console.log('First'); console.log('Second'); </pre> <p><span class="tlid-translation translation" lang="ru"><span title="">В отличие от этого, асинхронный API - это тот, в котором API начнёт операцию и сразу же вернётся (до завершения операции).</span> <span title="">После завершения операции API будет использовать некоторый механизм для выполнения дополнительных операций.</span> <span title="">Например, приведённый ниже код выведет «Second, First», потому что хотя метод setTimeout () вызывается первым и возвращается немедленно, операция не завершается в течение нескольких секунд.</span></span></p> -<pre class="brush: js notranslate">setTimeout(function() { +<pre class="brush: js">setTimeout(function() { console.log('First'); }, 3000); console.log('Second'); @@ -240,7 +240,7 @@ console.log('Second'); <p><span class="tlid-translation translation" lang="ru"><span title="">В нашем примере Hello World Express (см. Выше) мы определили функцию обработчика маршрута (колбэка) для HTTP-запросов GET к корню сайта ('/').</span></span></p> -<pre class="brush: js notranslate">app.<strong>get</strong>('/', function(req, res) { +<pre class="brush: js">app.<strong>get</strong>('/', function(req, res) { res.send('Hello World!'); }); </pre> @@ -255,7 +255,7 @@ console.log('Second'); <p><span class="tlid-translation translation" lang="ru"><span title="">Существует специальный метод маршрутизации app.all (), который будет вызываться в ответ на любой метод HTTP.</span> <span title="">Это используется для загрузки функций промежуточного программного обеспечения по определённому пути для всех методов запроса.</span> <span title="">В следующем примере (из документации Express) показан обработчик, который будет выполняться для запросов к / secret независимо от используемого глагола HTTP (при условии, что он поддерживается модулем http).</span></span></p> -<pre class="brush: js notranslate">app.all('/secret', function(req, res, next) { +<pre class="brush: js">app.all('/secret', function(req, res, next) { console.log('Accessing the secret section ...'); next(); // pass control to the next handler });</pre> @@ -264,7 +264,7 @@ console.log('Second'); <br> <span title="">Часто полезно группировать обработчики маршрутов для определённой части сайта и получать к ним доступ с помощью общего префикса маршрута (например, сайт с вики может иметь все связанные с вики маршруты в одном файле и иметь к ним доступ с префиксом маршрута</span> <span title="">из / вики /).</span> <span title="">В Express это достигается с помощью объекта express.Router.</span> <span title="">Например, мы можем создать наш вики-маршрут в модуле с именем wiki.js, а затем экспортировать объект Router, как показано ниже:</span></span></p> -<pre class="brush: js notranslate">// wiki.js - Wiki route module +<pre class="brush: js">// wiki.js - Wiki route module var express = require('express'); var router = express.Router(); @@ -288,7 +288,7 @@ module.exports = router; <p><span class="tlid-translation translation" lang="ru"><span title="">Чтобы использовать маршрутизатор в нашем главном файле приложения, нам потребуется () модуль route (wiki.js), а затем вызовите use () в приложении Express, чтобы добавить маршрутизатор в путь обработки промежуточного программного обеспечения.</span> <span title="">Эти два маршрута будут доступны из / wiki / и / wiki / about /.</span></span></p> -<pre class="brush: js notranslate">var wiki = require('./wiki.js'); +<pre class="brush: js">var wiki = require('./wiki.js'); // ... app.use('/wiki', wiki);</pre> @@ -306,12 +306,12 @@ app.use('/wiki', wiki);</pre> <br> <span title="">Для использования стороннего промежуточного программного обеспечения сначала необходимо установить его в своё приложение с помощью NPM.</span> <span title="">Например, чтобы установить промежуточное программное обеспечение средства регистрации HTTP-запросов morgan, вы должны сделать следующее:</span></span></p> -<pre class="brush: bash notranslate"><code>$ npm install morgan +<pre class="brush: bash"><code>$ npm install morgan </code></pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Затем вы можете вызвать use () для объекта приложения Express, чтобы добавить промежуточное программное обеспечение в стек:</span></span></p> -<pre class="brush: js notranslate">var express = require('express'); +<pre class="brush: js">var express = require('express'); <strong>var logger = require('morgan');</strong> var app = express(); <strong>app.use(logger('dev'));</strong> @@ -327,7 +327,7 @@ var app = express(); <br> <span title="">В приведённом ниже примере показано, как можно добавить функцию промежуточного программного обеспечения, используя оба метода, а также с / без маршрута.</span></span></p> -<pre class="brush: js notranslate">var express = require('express'); +<pre class="brush: js">var express = require('express'); var app = express(); // An example middleware function @@ -357,12 +357,12 @@ app.listen(3000);</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете использовать промежуточное программное обеспечение express.static для обслуживания статических файлов, включая ваши изображения, CSS и JavaScript (static () - единственная функция промежуточного программного обеспечения, которая фактически является частью Express).</span> <span title="">Например, вы должны использовать строку ниже для обслуживания изображений, файлов CSS и файлов JavaScript из каталога с именем public на том же уровне, где вы вызываете узел:</span></span></p> -<pre class="brush: js notranslate">app.use(express.static('public')); +<pre class="brush: js">app.use(express.static('public')); </pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Любые файлы в публичном каталоге обслуживаются путём добавления их имени файла (относительно базового «публичного» каталога) к базовому URL.</span> <span title="">Так, например:</span></span></p> -<pre class="notranslate"><code>http://localhost:3000/images/dog.jpg +<pre><code>http://localhost:3000/images/dog.jpg http://localhost:3000/css/style.css http://localhost:3000/js/app.js http://localhost:3000/about.html @@ -370,18 +370,18 @@ http://localhost:3000/about.html <p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете вызывать static () несколько раз для обслуживания нескольких каталогов.</span> <span title="">Если файл не может быть найден одной функцией промежуточного программного обеспечения, он будет просто передан последующему промежуточному программному обеспечению (порядок вызова промежуточного программного обеспечения основан на вашем порядке объявления).</span></span></p> -<pre class="brush: js notranslate">app.use(express.static('public')); +<pre class="brush: js">app.use(express.static('public')); app.use(express.static('media')); </pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Вы также можете создать виртуальный префикс для ваших статических URL-адресов, вместо добавления файлов к базовому URL-адресу.</span> <span title="">Например, здесь мы указываем путь монтирования, чтобы файлы загружались с префиксом "/ media":</span></span></p> -<pre class="brush: js notranslate">app.use('/media', express.static('public')); +<pre class="brush: js">app.use('/media', express.static('public')); </pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Теперь вы можете загружать файлы, находящиеся в публичном каталоге, из префикса / media path.</span></span></p> -<pre class="notranslate"><code>http://localhost:3000/media/images/dog.jpg +<pre><code>http://localhost:3000/media/images/dog.jpg http://localhost:3000/media/video/cat.mp4 http://localhost:3000/media/cry.mp3</code> </pre> @@ -392,7 +392,7 @@ http://localhost:3000/media/cry.mp3</code> <p><span class="tlid-translation translation" lang="ru"><span title="">Ошибки обрабатываются одной или несколькими специальными функциями промежуточного программного обеспечения, которые имеют четыре аргумента вместо обычных трёх: (err, req, res, next).</span> <span title="">Например:</span></span></p> -<pre class="brush: js notranslate">app.use(function(err, req, res, next) { +<pre class="brush: js">app.use(function(err, req, res, next) { console.error(err.stack); res.status(500).send('Something broke!'); }); @@ -418,12 +418,12 @@ http://localhost:3000/media/cry.mp3</code> <br> <span title="">Чтобы использовать их, вы должны сначала установить драйвер базы данных, используя NPM.</span> <span title="">Например, чтобы установить драйвер для популярной NoSQL MongoDB, вы должны использовать команду:</span></span></p> -<pre class="brush: bash notranslate"><code>$ npm install mongodb +<pre class="brush: bash"><code>$ npm install mongodb </code></pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Сама база данных может быть установлена локально или на облачном сервере.</span> <span title="">В вашем экспресс-коде вам требуется драйвер, подключиться к базе данных, а затем выполнить операции создания, чтения, обновления и удаления (CRUD).</span> <span title="">Пример ниже (из документации Express) показывает, как вы можете найти записи «млекопитающих», используя MongoDB.</span></span></p> -<pre class="brush: js notranslate">var MongoClient = require('mongodb').MongoClient; +<pre class="brush: js">var MongoClient = require('mongodb').MongoClient; MongoClient.connect('mongodb://localhost:27017/animals', function(err, db) { if (err) throw err; @@ -445,7 +445,7 @@ MongoClient.connect('mongodb://localhost:27017/animals', function(err, db) { <br> <span title="">В своём коде настроек приложения вы задаёте механизм шаблонов для использования и место, где Express должен искать шаблоны, используя настройки «views» и «engine», как показано ниже (вам также нужно будет установить пакет, содержащий вашу библиотеку шаблонов).</span> <span title="">!</span><span title="">)</span></span></p> -<pre class="brush: js notranslate">var express = require('express'); +<pre class="brush: js">var express = require('express'); var app = express(); // Set directory to contain the templates ('views') @@ -457,7 +457,7 @@ app.set('view engine', 'some_template_engine_name'); <p><span class="tlid-translation translation" lang="ru"><span title="">Внешний вид шаблона будет зависеть от того, какой движок вы используете.</span> <span title="">Предполагая, что у вас есть файл шаблона с именем «index. <Template_extension>», который содержит заполнители для переменных данных с именами «title» и «message», вы должны вызвать Response.render () в функции обработчика маршрута для создания и отправки ответа HTML.</span> <span title="">:</span></span></p> -<pre class="brush: js notranslate">app.get('/', function(req, res) { +<pre class="brush: js">app.get('/', function(req, res) { res.render('index', { title: 'About dogs', message: 'Dogs rock!' }); });</pre> diff --git a/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html b/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html index f1c993e54d..90ec704439 100644 --- a/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html +++ b/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html @@ -36,12 +36,12 @@ translation_of: Learn/Server-side/Express_Nodejs/skeleton_website <p>Вы уже должны были установить <code>express-generator</code>, читая статью <a>установка среды разработки Node</a>. Напомним, что генератор установлен с помощью менеджера пакетов NPM, при выполнении команды:</p> -<pre class="brush: bash notranslate"><code>npm install express-generator -g</code> +<pre class="brush: bash"><code>npm install express-generator -g</code> </pre> <p><code>E</code><code>xpress-generator </code>имеет ряд параметров, которые можно увидеть, выполнив команду express --help (или express -h):</p> -<pre class="brush: bash notranslate">> express --help +<pre class="brush: bash">> express --help Usage: express [options] [dir] @@ -63,7 +63,7 @@ translation_of: Learn/Server-side/Express_Nodejs/skeleton_website <p>Команда <code>express</code> создаст проект в <em>текущем</em> каталоге с использованием (устаревшего) движка представления <em>Jade</em> и обычного CSS. Если указать <font face="Courier New, monospace">express </font><font face="Courier New, monospace">name</font>, проект будет создан в подкаталоге name текущего каталога. </p> -<pre class="brush: bash notranslate"><code>express</code></pre> +<pre class="brush: bash"><code>express</code></pre> <p>Можно выбрать движок представления (шаблон), используя --<code>view; </code><code><font face="Times New Roman, serif">параметр</font></code><code> --</code><code>css </code> позволяет выбрать движок для создания CSS.</p> @@ -127,12 +127,12 @@ translation_of: Learn/Server-side/Express_Nodejs/skeleton_website <p>Выберем место для нового проекта — каталог <font face="Courier New, monospace">express-locallibrary-tutorial - </font><font face="Times New Roman, serif">и выполним</font><font face="Courier New, monospace"> </font>команду:</p> -<pre class="brush: bash notranslate">express express-locallibrary-tutorial --view=pug +<pre class="brush: bash">express express-locallibrary-tutorial --view=pug </pre> <p>Будет создан каталог <font face="Courier New, monospace">express-locallibrary-tutorial </font><font face="Times New Roman, serif">и выведен список созданных внутри каталога проектных файлов</font>.</p> -<pre class="brush: bash notranslate"> create : express-locallibrary-tutorial +<pre class="brush: bash"> create : express-locallibrary-tutorial create : express-locallibrary-tutorial/package.json create : express-locallibrary-tutorial/app.js create : express-locallibrary-tutorial/public/images @@ -169,16 +169,16 @@ translation_of: Learn/Server-side/Express_Nodejs/skeleton_website <ol> <li>Прежде всего установим зависимости (команда <code>install</code> запросит все пакеты зависимостей, указанные в файле<strong> package.json</strong>). - <pre class="brush: bash notranslate">cd express-locallibrary-tutorial + <pre class="brush: bash">cd express-locallibrary-tutorial npm install</pre> </li> <li>Затем запустим приложение. <ul> <li>В Windows используйте команду: - <pre class="brush: bash notranslate">SET DEBUG=express-locallibrary-tutorial:* & npm start</pre> + <pre class="brush: bash">SET DEBUG=express-locallibrary-tutorial:* & npm start</pre> </li> <li>В Mac OS X или Linux используйте команду: - <pre class="brush: bash notranslate">DEBUG=express-locallibrary-tutorial:* npm start + <pre class="brush: bash">DEBUG=express-locallibrary-tutorial:* npm start </pre> </li> </ul> @@ -193,7 +193,7 @@ npm install</pre> <div class="note"> <p><strong>Примечание:</strong> Можно также запустить приложение командой <code>npm start</code>. Переменная DEBUG, указанная в примере, включает логирование в консоль для дальнейшей отладки. Так, при посещении страницы веб-приложения, вы увидите похожий вывод в консоль:</p> -<pre class="brush: bash notranslate">>SET DEBUG=express-locallibrary-tutorial:* & npm start +<pre class="brush: bash">>SET DEBUG=express-locallibrary-tutorial:* & npm start > express-locallibrary-tutorial@0.0.0 start D:\express-locallibrary-tutorial > node ./bin/www @@ -212,7 +212,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <p>Одно из самых простых средств для этого --<br> <a href="https://github.com/remy/nodemon">nodemon</a>. Его обычно устанавливают глобально (так как это "инструмент"), но сейчас мы установим его и будем применять локально как зависимость разработки, так что любые разработчики проекта получат его автоматически при установке приложения. Выполним следующую команду (предполагаем, что мы находимся в корневом каталоге):</p> -<pre class="brush: bash notranslate">npm install --save-dev nodemon</pre> +<pre class="brush: bash">npm install --save-dev nodemon</pre> @@ -220,20 +220,20 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> -<pre class="notranslate"><code><font color="#333333"><font face="Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace"><font size="3">npm install -g nodemon</font></font></font></code></pre> +<pre><code><font color="#333333"><font face="Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace"><font size="3">npm install -g nodemon</font></font></font></code></pre> <p>В файле <strong>package.json </strong>проекта появится новый раздел с этой зависимостью (на вашей машине номер версии nodemon может быть другим) :</p> -<pre class="brush: json notranslate"> "devDependencies": { +<pre class="brush: json"> "devDependencies": { "nodemon": "^1.11.0" } </pre> <p>Поскольку nodemon не установлен глобально, его нельзя запустить из командной строки (пока мы не добавим его в путь), но его можно вызвать из сценария NPM, так как NPM знает все об установленных пакетах. Раздел <code>scripts</code> в файле package.json исходно будет содержать одну строку, которая начинается с <code>"start"</code>. Обновите его, поставив запятую в конце строки, и добавьте строку <code>"devstart",</code> показанную ниже:</p> -<pre class="brush: json notranslate"> "scripts": { +<pre class="brush: json"> "scripts": { "start": "node ./bin/www"<strong>,</strong> <strong> "devstart": "nodemon ./bin/www"</strong> }, @@ -245,13 +245,13 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <li>В Windows:</li> </ul> -<pre class="brush: bash notranslate">SET DEBUG=express-locallibrary-tutorial:* & npm <strong>run devstart</strong></pre> +<pre class="brush: bash">SET DEBUG=express-locallibrary-tutorial:* & npm <strong>run devstart</strong></pre> <ul> <li>Для macOS или Linux:</li> </ul> -<pre class="notranslate"><code>DEBUG=express-locallibrary-tutorial:* npm <strong>run devstart</strong></code></pre> +<pre><code>DEBUG=express-locallibrary-tutorial:* npm <strong>run devstart</strong></code></pre> <div class="note"> <p><strong>Примечание:</strong> Сейчас после изменения любого файла проекта сервер будет перезапускаться (или можно самостоятельно перезапустить его, введя <code>rs</code> в командной строке). Вам всё равно придётся обновить страницу в браузере .</p> @@ -267,7 +267,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <p>После установки зависимостей проект имеет такую структуру файлов (файлы - это элементы <strong>без </strong>префикса"/"). Файл <strong>package.json</strong> определяет имя файла с приложением, сценарии запуска, зависимости и др. Сценарий запуска задаёт точку входа приложения, у нас -- файл JavaScript <strong>/bin/www</strong>. Этот файл настраивает некоторые обработчики ошибок приложения, а затем загружает <strong>app.js </strong>для выполнения остальной работы. Пути приложения хранятся в отдельных модулях каталога <strong>routes/</strong>. Шаблоны хранятся в каталоге /<strong>views</strong>.</p> -<pre class="notranslate">/express-locallibrary-tutorial +<pre>/express-locallibrary-tutorial <strong>app.js</strong> /bin <strong>www</strong> @@ -295,7 +295,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <p>Файл <strong>package.json </strong>указывает зависимости приложения и содержит другие данные:</p> -<pre class="brush: json notranslate">{ +<pre class="brush: json">{ "name": "express-locallibrary-tutorial", "version": "0.0.0", "private": true, @@ -329,7 +329,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <p>Раздел "scripts" определяет скрипт" start", выполняемый при запуске сервера командой <code>npm start</code>. Можно видеть, что самом деле выполняется команда node <strong>./bin/www</strong>. Кроме того, определяется script "<em>devstart</em>", который вызывается командой <code>npm run devstart</code>. Запускается тот же файл <strong>./bin/www</strong> ,но командой <em>nodemon</em> вместо <em>node</em>.</p> -<pre class="notranslate"><code>"scripts": { +<pre><code>"scripts": { "start": "node ./bin/www", "devstart": "nodemon ./bin/www" },</code></pre> @@ -338,7 +338,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <p>Файл <strong>/bin/www</strong> – это входная точка приложения. Сначала в файле создаётся объект основного приложения, расположенного в app.js — выполняется app=<code>require(./</code><code>app</code><code>).</code></p> -<pre class="brush: js notranslate">#!/usr/bin/env node +<pre class="brush: js">#!/usr/bin/env node /** * Module dependencies. @@ -357,7 +357,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <p>Этот файл создаёт объект приложения <code>express </code>(с именем<code>app</code>, по соглашению), настраивает приложение и промежуточное ПО, а затем экспортирует приложение из модуля. В приведённом ниже коде показаны только те части файла, которые создают и экспортируют объект приложения:</p> -<pre class="brush: js notranslate"><code>var express = require('express'); +<pre class="brush: js"><code>var express = require('express'); var app = express(); ... </code>module.exports = app; @@ -367,7 +367,7 @@ var app = express(); <p>Рассмотрим детали файла app.js. Сначала при помощи require(...) выполняется импорт некоторых полезных библиотек node: <em>express,</em> s<em>erve-favicon</em>, <em>morgan</em>, <em>cookie-parse, body-parser </em>(они ранее были загружены для нашего приложения командой npm install), а также path из основной библиотеки node (применяется для разбора путей каталогов и файлов).</p> -<pre class="brush: js notranslate">var express = require('express'); +<pre class="brush: js">var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); @@ -377,7 +377,7 @@ var bodyParser = require('body-parser'); <p>Затем require запрашивает модули из каталога путей route. Эти модули и файлы содержат код для обработки конкретного набора соответствующих путей (URL маршрутов). Если мы расширим каркас приложения, например, чтобы получить список книг библиотеки, нам следует добавить новый файл для обработки пути, связанного с книгами.</p> -<pre class="brush: js notranslate">var index = require('./routes/index'); +<pre class="brush: js">var index = require('./routes/index'); var users = require('./routes/users'); </pre> @@ -387,7 +387,7 @@ var users = require('./routes/users'); <p>Далее, импортированные модули express применяются для создания объекта app, который потом устанавливает движки-шаблоны представления. Установка движков состоит их двух частей. В первой мы задаём значение 'view', указывая папку, в которой будут размещаться шаблоны (у нас это /views). Во второй мы задаём значение движка 'view engine', указывая на библиотеку шаблона (у нас — "pug").</p> -<pre class="brush: js notranslate">var app = express(); +<pre class="brush: js">var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); @@ -396,7 +396,7 @@ app.set('view engine', 'pug'); <p>Следующие строки вызывают app.use(...), чтобы добавить промежуточные (middleware) библиотеки в цепочку обработки запросов. Кроме сторонних библиотек, импортированных ранее, используем библиотеку Express.static, что позволит обрабатывать статические файлы из папки <strong>/public </strong>корня проекта.</p> -<pre class="brush: js notranslate">// uncomment after placing your favicon in /public +<pre class="brush: js">// uncomment after placing your favicon in /public //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(logger('dev')); app.use(bodyParser.json()); @@ -407,7 +407,7 @@ app.use(cookieParser()); <p>Теперь, когда промежуточные библиотеки настроены, мы добавляем (импортированный ранее) код обработки путей в цепочку обработки запросов. Импортированный код будет задавать отдельные пути для разных частей сайта:</p> -<pre class="brush: js notranslate">app.use('/', index); +<pre class="brush: js">app.use('/', index); app.use('/users', users); </pre> @@ -417,7 +417,7 @@ app.use('/users', users); <p>Последняя в файле промежуточная библиотека добавляет методы обработки ошибок и ответов 404 от HTTP.</p> -<pre class="brush: js notranslate">// catch 404 and forward to error handler +<pre class="brush: js">// catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; @@ -438,13 +438,13 @@ app.use(function(err, req, res, next) { <p>Объект app приложения Express теперь полностью настроен. Остался последний шаг - добавить его к экспортируемым элементам модуля (это позволит импортировать его в файле <strong>/bin/www</strong>).</p> -<pre class="brush: js notranslate">module.exports = app;</pre> +<pre class="brush: js">module.exports = app;</pre> <h3 id="Пути_Routes">Пути (Routes)</h3> <p>Файл путей /routes/users.js приведён ниже (файлы путей имеют сходную структуру, поэтому нет необходимости приводить также index.js). Сначала загружается модуль Express, затем он используется для получения объекта express.Router. После этого для этого объекта задаётся путь, и, наконец, объект-роутер экспортируется из модуля (именно это позволяет импортировать файл в app.js):.</p> -<pre class="brush: js notranslate">var express = require('express'); +<pre class="brush: js">var express = require('express'); var router = express.Router(); /* GET users listing. */ @@ -467,7 +467,7 @@ module.exports = router; <p>Файлы преставлений (шаблонов) хранятся в каталоге <strong><font color="#333333"><font face="Arial, x-locale-body, sans-serif"><font size="3">/views </font></font></font></strong><font color="#333333"><font face="Times New Roman, serif"><font size="3">(это указано в </font></font><font face="Courier New, monospace"><font size="3">app.js</font></font><font face="Times New Roman, serif"><font size="3">) и имеют расширение</font></font></font><strong><font color="#333333"><font face="Times New Roman, serif"><font size="3"> </font></font></font></strong><strong>.pug</strong>. Метод <code><a href="http://expressjs.com/en/4x/api.html#res.render">Response.render()</a></code> выполняет указанный шаблон, передавая объекту значение именованной переменной, и затем посылает результат как ответ. В коде из <strong>/routes/index.js</strong> (приводится ниже) можно увидеть, что роут отвечает, используя шаблон "index" с переданным значением переменной "title" из шаблона.</p> -<pre class="brush: js notranslate">/* GET home page. */ +<pre class="brush: js">/* GET home page. */ router.get('/', function(req, res) { res.render('index', { title: 'Express' }); }); @@ -475,7 +475,7 @@ router.get('/', function(req, res) { <p>Шаблон для пути '/' приведён ниже (файл <strong>index.pug</strong>). О синтаксисе мы поговорим позже. Сейчас важно знать, что переменная title со значением 'Express' помещена в определённое место шаблона.</p> -<pre class="notranslate">extends layout +<pre>extends layout block content h1= title |