Подключение js файла к html: Внешние скрипты, порядок исполнения

Или, чтобы добавить файл на отдельную страницу:

• В своей учетной записи HubSpot перейдите к Marketing > Website > Website Pages or Landing Pages .
• Наведите указатель мыши на страницу , которую вы хотите отредактировать, затем щелкните Изменить .
• В редакторе страниц щелкните вкладку Настройки .
• Щелкните Дополнительные параметры .
• В разделе Footer HTML вставьте общедоступный URL-адрес в качестве значения для источника тега скрипта:

• Чтобы опубликовать изменения на странице в реальном времени, в правом верхнем углу нажмите Обновить .

Менеджер по дизайну

Введение в

Express / Node - Изучите веб-разработку

В этой первой статье Express мы отвечаем на вопросы «Что такое Node?» и «Что такое Express?» и дадут вам обзор того, что делает веб-платформу Express особенной.Мы опишем основные функции и покажем вам некоторые из основных строительных блоков приложения Express (хотя на данный момент у вас еще нет среды разработки, в которой можно было бы его протестировать).

Node (или более формально Node.js ) - это кроссплатформенная среда выполнения с открытым исходным кодом, которая позволяет разработчикам создавать все виды серверных инструментов и приложений на JavaScript. Среда выполнения предназначена для использования вне контекста браузера (т.е. работает непосредственно на компьютере или серверной ОС).Таким образом, в среде отсутствуют API-интерфейсы JavaScript для конкретных браузеров и добавлена ​​поддержка более традиционных API-интерфейсов ОС, включая HTTP и библиотеки файловой системы.

С точки зрения разработки веб-сервера Node имеет ряд преимуществ:

• Отличная производительность! Node был разработан для оптимизации пропускной способности и масштабируемости в веб-приложениях и является хорошим решением многих распространенных проблем веб-разработки (например, веб-приложений в реальном времени).

Код

• написан на «старом простом JavaScript», что означает, что меньше времени тратится на «сдвиг контекста» между языками, когда вы пишете как клиентский, так и серверный код.
• JavaScript - это относительно новый язык программирования, который имеет преимущества от улучшений в дизайне языка по сравнению с другими традиционными языками веб-серверов (например, Python, PHP и т. Д.). Многие другие новые и популярные языки компилируются / конвертируются в JavaScript, поэтому вы также можете использовать TypeScript. , CoffeeScript, ClojureScript, Scala, LiveScript и т. Д.
• Диспетчер пакетов узлов (NPM) предоставляет доступ к сотням тысяч повторно используемых пакетов. Он также имеет лучшее в своем классе разрешение зависимостей и может также использоваться для автоматизации большей части инструментальной цепочки сборки.
• Node.js - переносимый. Он доступен в Microsoft Windows, macOS, Linux, Solaris, FreeBSD, OpenBSD, WebOS и NonStop OS. Кроме того, он хорошо поддерживается многими провайдерами веб-хостинга, которые часто предоставляют определенную инфраструктуру и документацию для размещения сайтов Node.
• У него очень активная сторонняя экосистема и сообщество разработчиков с множеством людей, готовых помочь.

Вы можете использовать Node.js для создания простого веб-сервера с помощью пакета Node HTTP.

Hello Node.js

В следующем примере создается веб-сервер, который прослушивает любой тип HTTP-запроса по URL-адресу http://127.0.0.1:8000/ - когда запрос получен, сценарий ответит с строка: «Hello World». Если вы уже установили узел, вы можете выполнить следующие действия, чтобы опробовать пример:

1. Открыть терминал (в Windows откройте утилиту командной строки)
2. Создайте папку, в которой вы хотите сохранить программу, например, test-node , а затем войдите в нее, введя следующую команду в свой терминал:

    cd тестовый узел 

3. Используя свой любимый текстовый редактор, создайте файл с именем hello.js и вставьте в него следующий код:
   

    
   const http = require ("http");
   
   const hostname = "127.0.0.1";
   const порт = 8000;
   
   
   const server = http.createServer ((req, res) => {
   
      
      res.writeHead (200, {'Content-Type': 'text / plain'});
   
      
      res.end ('Привет, мир \ n');
   });
   
   
   server.listen (порт, имя хоста, () => {
      console.log (`Сервер работает по адресу http: // $ {hostname}: $ {port} /`);
   })
     

4. Сохраните файл в папке, которую вы создали выше.
5. Вернитесь к терминалу и введите следующую команду:

Наконец, перейдите по адресу http: // localhost: 8000 в своем веб-браузере; вы должны увидеть текст « Hello World » в верхнем левом углу пустой веб-страницы.

Другие общие задачи веб-разработки непосредственно не поддерживаются самим Node. Если вы хотите добавить особую обработку для разных HTTP-глаголов (например, GET , POST , DELETE и т. Д.), Отдельно обрабатывайте запросы по разным URL-адресам («маршрутам»), обслуживайте статические файлы или используйте шаблоны для динамически создавать ответ, Node сам по себе не принесет особой пользы. Вам придется либо написать код самостоятельно, либо вы можете не изобретать колесо и использовать веб-фреймворк!

Express - это самая популярная веб-среда Node и базовая библиотека для ряда других популярных веб-платформ Node.Предоставляет механизмы для:

• Записать обработчики запросов с разными HTTP-командами на разных URL-путях (маршрутах).
• Интеграция с механизмами визуализации "просмотра" для генерации ответов путем вставки данных в шаблоны.
• Задайте общие параметры веб-приложения, такие как порт, используемый для подключения, и расположение шаблонов, которые используются для отображения ответа.
• Добавить дополнительное «промежуточное ПО» обработки запросов в любой момент конвейера обработки запросов.

Хотя Express сам по себе довольно минималистичен, разработчики создали совместимые пакеты промежуточного программного обеспечения для решения практически любой проблемы веб-разработки. Существуют библиотеки для работы с файлами cookie, сеансами, логинами пользователей, параметрами URL, данными POST , заголовками безопасности и многими другими . Вы можете найти список пакетов промежуточного программного обеспечения, поддерживаемых командой Express, на сайте Express Middleware (вместе со списком некоторых популярных пакетов сторонних производителей).

Примечание: Эта гибкость - палка о двух концах.Существуют пакеты промежуточного программного обеспечения для решения практически любой проблемы или требования, но разработка правильных пакетов для использования иногда может быть проблемой. Также не существует «правильного способа» структурировать приложение, и многие примеры, которые вы можете найти в Интернете, не оптимальны или показывают лишь небольшую часть того, что вам нужно сделать для разработки веб-приложения.

Node был первоначально выпущен только для Linux в 2009 году. Диспетчер пакетов NPM был выпущен в 2010 году, а встроенная поддержка Windows была добавлена ​​в 2012 году.На момент написания текущей версией LTS является Node v12.18.4, а последней версией является Node 14.13.0. Это крошечный снимок богатой истории; если хотите узнать больше, загляните в Википедию.

Express был первоначально выпущен в ноябре 2010 года и в настоящее время находится на версии API 4.17.1 (с 5.0 в «альфа»). Вы можете проверить журнал изменений для получения информации об изменениях в текущем выпуске и GitHub для получения более подробных исторических заметок о выпуске.

Популярность веб-фреймворка важна, потому что это показатель того, будет ли он и дальше поддерживаться, и какие ресурсы, вероятно, будут доступны с точки зрения документации, дополнительных библиотек и технической поддержки.

Нет какого-либо готового и окончательного показателя популярности серверных фреймворков (хотя вы можете оценить популярность, используя такие механизмы, как подсчет количества проектов GitHub и вопросов StackOverflow для каждой платформы). Лучше спросить, достаточно ли популярны Node и Express, чтобы избежать проблем, связанных с непопулярными платформами. Они продолжают развиваться? Можете ли вы получить помощь, если она вам понадобится? Есть ли у вас возможность получить оплачиваемую работу, если вы изучаете Express?

Если судить по количеству крупных компаний, использующих Express, количеству людей, вносящих свой вклад в базу кода, и количеству людей, предоставляющих как бесплатную, так и платную поддержку, то да, Express - популярный фреймворк!

Веб-фреймворки часто называют себя «самоуверенными» или «неверующими».

Фреймворки с мнением - это те, кто придерживается мнения о «правильном способе» решения любой конкретной задачи. Они часто поддерживают быструю разработку в определенной области (решение проблем определенного типа), потому что правильный способ делать что-либо обычно хорошо понят и хорошо задокументирован. Однако они могут быть менее гибкими при решении проблем за пределами своей основной области и, как правило, предлагают меньше вариантов того, какие компоненты и подходы они могут использовать.

Непредвиденные фреймворки, напротив, имеют гораздо меньше ограничений на лучший способ склеивания компонентов для достижения цели или даже на то, какие компоненты следует использовать.Они упрощают разработчикам использование наиболее подходящих инструментов для выполнения конкретной задачи, хотя и за счет того, что вам придется самостоятельно найти эти компоненты.

Express не пользуется авторитетом. Вы можете вставить практически любое совместимое промежуточное ПО в цепочку обработки запросов практически в любом порядке. Вы можете структурировать приложение в виде одного или нескольких файлов, используя любую структуру каталогов. Иногда вам может казаться, что у вас слишком много вариантов!

На традиционном веб-сайте, управляемом данными, веб-приложение ожидает HTTP-запросов от веб-браузера (или другого клиента).Когда запрос получен, приложение определяет, какое действие требуется, на основе шаблона URL и, возможно, связанной информации, содержащейся в данных POST или GET . В зависимости от того, что требуется, он может затем читать или записывать информацию из базы данных или выполнять другие задачи, необходимые для удовлетворения запроса. Затем приложение вернет ответ веб-браузеру, часто динамически создавая HTML-страницу для отображения браузером, вставляя полученные данные в заполнители в шаблоне HTML.

Express предоставляет методы для определения того, какая функция вызывается для конкретного HTTP-глагола ( GET , POST , SET и т. Д.) И шаблона URL («Маршрут»), а также методы для определения того, какой шаблон («представление» ), где находятся файлы шаблонов и какой шаблон использовать для рендеринга ответа. Вы можете использовать промежуточное программное обеспечение Express для добавления поддержки файлов cookie, сеансов и пользователей, получения параметров POST / GET и т. Д. Вы можете использовать любой механизм базы данных, поддерживаемый Node (Express не определяет какое-либо поведение, связанное с базой данных).

В следующих разделах объясняются некоторые общие вещи, которые вы увидите при работе с кодом Express и Node .

Helloworld Express

Сначала давайте рассмотрим стандартный пример Express Hello World (мы обсуждаем каждую часть этого ниже и в следующих разделах).

Совет: Если у вас уже установлены Node и Express (или если вы устанавливаете их, как показано в следующей статье), вы можете сохранить этот код в текстовом файле под названием app.js и запустите его в командной строке bash, позвонив по номеру:

узел ./app.js

  const express = require ('экспресс');
константное приложение = экспресс ();
const порт = 3000;

app.get ('/', (req, res) => {
  res.send ('Привет, мир!')
});

app.listen (порт, () => {
  console.log (`Пример приложения, прослушивающего порт $ {port}!`)
});
  

Первые две строки требуют () (импорт) экспресс-модуля и создания экспресс-приложения.Этот объект, который традиционно называется app , имеет методы для маршрутизации HTTP-запросов, настройки промежуточного программного обеспечения, рендеринга HTML-представлений, регистрации механизма шаблонов и изменения параметров приложения, которые управляют поведением приложения (например, режим среды, определение маршрута с учетом регистра и т. д.)

Средняя часть кода (три строки, начинающиеся с app.get ) показывает определение маршрута . Метод app.get () определяет функцию обратного вызова, которая будет вызываться всякий раз, когда есть запрос HTTP GET с путем ( '/' ) относительно корня сайта.Функция обратного вызова принимает запрос и объект ответа в качестве аргументов и вызывает send () для ответа, чтобы вернуть строку «Hello World!»

Последний блок запускает сервер на указанном порту («3000») и выводит на консоль комментарий журнала. Когда сервер запущен, вы можете перейти на localhost: 3000 в своем браузере, чтобы увидеть возвращенный пример ответа.

Импорт и создание модулей

Модуль - это библиотека / файл JavaScript, которые можно импортировать в другой код с помощью функции Node require () . Express сам по себе является модулем, как и промежуточное программное обеспечение и библиотеки баз данных, которые мы используем в наших приложениях Express .

В приведенном ниже коде показано, как мы импортируем модуль по имени на примере инфраструктуры Express . Сначала мы вызываем функцию require () , определяя имя модуля в виде строки ( 'express' ) и вызывая возвращаемый объект для создания приложения Express. Затем мы можем получить доступ к свойствам и функциям объекта приложения.

  const express = require ('экспресс');
константное приложение = экспресс ();
  

Вы также можете создавать свои собственные модули, которые можно импортировать таким же образом.

Совет: Вам понадобится для создания ваших собственных модулей, потому что это позволяет вам организовать ваш код в управляемые части - монолитное однофайловое приложение трудно понять и поддерживать. Использование модулей также помогает управлять пространством имен, поскольку при использовании модуля импортируются только те переменные, которые вы явно экспортируете.

Чтобы сделать объекты доступными вне модуля, вам просто нужно предоставить их в качестве дополнительных свойств в объекте exports . Например, модуль square.js ниже представляет собой файл, который экспортирует методы area () и perimeter () :

  exports.area = function (width) {return width * width; };
export.perimeter = функция (ширина) {вернуть 4 * ширину; };
  

Мы можем импортировать этот модуль, используя require () , а затем вызвать экспортированный метод (ы), как показано:

  const square = require ('./квадрат');
console.log ('Площадь квадрата шириной 4 равна' + square.area (4));  

Примечание: Вы также можете указать абсолютный путь к модулю (или имя, как мы делали изначально).

Если вы хотите экспортировать весь объект в одном назначении вместо того, чтобы строить его по одному свойству за раз, назначьте его модулю .exports , как показано ниже (вы также можете сделать это, чтобы сделать корень объекта экспорта конструктором или другая функция):

  модуль.export = {
  area: function (width) {
    ширина возврата * ширина;
  },

  периметр: функция (ширина) {
    вернуть 4 * ширину;
  }
};
  

Примечание: Вы можете думать о , экспортирует как ярлык для module.exports внутри данного модуля. Фактически, exports - это просто переменная, которая инициализируется значением module.exports перед оценкой модуля. Это значение является ссылкой на объект (в данном случае пустой объект). Это означает, что exports содержит ссылку на тот же объект, на который ссылается модуль .экспорт . Это также означает, что, присвоив другое значение , экспортирует , он больше не привязан к модулю .exports .

Для получения дополнительной информации о модулях см. Модули (документация по API узла).

Использование асинхронных API-интерфейсов

Код JavaScript часто использует асинхронные, а не синхронные API-интерфейсы для операций, выполнение которых может занять некоторое время. Синхронный API - это API, в котором каждая операция должна завершиться до того, как может начаться следующая операция.Например, следующие функции журнала являются синхронными и выводят текст на консоль по порядку (первый, второй).

  console.log («Первый»);
console.log («Второй»);
  

Напротив, асинхронный API - это API, в котором API запускает операцию и немедленно возвращает (до завершения операции). После завершения операции API будет использовать некоторый механизм для выполнения дополнительных операций. Например, приведенный ниже код распечатает «Second, First», потому что, хотя метод setTimeout () вызывается первым и немедленно возвращается, операция не завершается в течение нескольких секунд.

  setTimeout (function () {
   console.log («Первый»);
   }, 3000);
console.log («Второй»);
  

Использование неблокирующих асинхронных API-интерфейсов в Node даже более важно, чем в браузере, потому что Node - это однопоточная среда выполнения, управляемая событиями. «Однопоточный» означает, что все запросы к серверу выполняются в одном потоке (а не порождаются отдельными процессами). Эта модель чрезвычайно эффективна с точки зрения скорости и ресурсов сервера, но это означает, что если какая-либо из ваших функций вызывает синхронные методы, выполнение которых занимает много времени, они будут блокировать не только текущий запрос, но и все остальные запросы, обрабатываемые ваше веб-приложение.

Существует несколько способов для асинхронного API уведомить ваше приложение о завершении работы. Наиболее распространенный способ - зарегистрировать функцию обратного вызова при вызове асинхронного API, которая будет вызываться после завершения операции. Это подход, использованный выше.

Совет: Использование обратных вызовов может быть довольно «беспорядочным», если у вас есть последовательность зависимых асинхронных операций, которые должны выполняться по порядку, поскольку это приводит к нескольким уровням вложенных обратных вызовов.Эта проблема широко известна как «ад обратного вызова». Эту проблему можно уменьшить с помощью хороших методов кодирования (см. Http://callbackhell.com/), использования такого модуля, как async, или даже перехода к функциям ES6, таким как Promises.

Примечание. Распространенным соглашением для Node и Express является использование обратных вызовов при первой ошибке. В этом соглашении первое значение в ваших функциях обратного вызова является значением ошибки, а последующие аргументы содержат данные об успехе. В этом блоге есть хорошее объяснение того, почему этот подход полезен: The Node.js Way - Общие сведения об обратных вызовах при первой ошибке (fredkschott.com).

Создание обработчиков маршрутов

В нашем примере Hello World Express (см. Выше) мы определили функцию обработчика маршрута (обратного вызова) для запросов HTTP GET к корню сайта ( '/' ).

  app.get ('/', (req, res) => {
  res.send ('Привет, мир!')
});
  

Функция обратного вызова принимает в качестве аргументов объект запроса и ответ. В этом случае метод вызывает send () в ответе, чтобы вернуть строку «Hello World!» Существует ряд других методов ответа для завершения цикла запроса / ответа, например, вы можете вызвать res.json () для отправки ответа JSON или res.sendFile () для отправки файла.

Совет по JavaScript: Вы можете использовать любые имена аргументов в функциях обратного вызова; когда вызывается обратный вызов, первым аргументом всегда будет запрос, а вторым всегда будет ответ. Имеет смысл назвать их так, чтобы вы могли идентифицировать объект, с которым работаете, в теле обратного вызова.

checkout () , copy () , delete () , get () , head () , lock () , merge () , mkactivity ( ) , mkcol () , move () , m-search () , notify () , options () , patch () , post () , purge () , put () , report () , search () , подписаться () , trace () , unlock () , unlock () .

Существует специальный метод маршрутизации app.all () , который будет вызываться в ответ на любой HTTP-метод. Это используется для загрузки функций промежуточного программного обеспечения по определенному пути для всех методов запроса. В следующем примере (из документации Express) показан обработчик, который будет выполняться для запросов к / secret независимо от используемого HTTP-глагола (при условии, что он поддерживается модулем http).

  app.all ('/ secret', function (req, res, next) {
  приставка.log ('Доступ к секретному разделу ...');
  следующий();
});  

Маршруты

позволяют сопоставлять определенные шаблоны символов в URL-адресе, извлекать некоторые значения из URL-адреса и передавать их в качестве параметров обработчику маршрута (как атрибуты объекта запроса, переданного в качестве параметра).

Часто бывает полезно сгруппировать обработчики маршрутов для определенной части сайта вместе и получить к ним доступ, используя общий префикс маршрута (например, сайт с Wiki может иметь все связанные с Wiki маршруты в одном файле и получать к ним доступ с помощью маршрута префикс / wiki / ).В Express это достигается с помощью объекта express.Router . Например, мы можем создать наш вики-маршрут в модуле с именем wiki.js , а затем экспортировать объект Router , как показано ниже:

 

const express = require ('экспресс');
const router = express.Router ();


router.get ('/', function (req, res) {
  res.send ('Домашняя страница Wiki');
});


router.get ('/ about', function (req, res) {
  res.send ('Об этой вики');
});

module.exports = маршрутизатор;
  

Примечание: Добавление маршрутов к объекту Router аналогично добавлению маршрутов к объекту app (как показано ранее).

Чтобы использовать маршрутизатор в нашем основном файле приложения, мы должны затем require () модуль маршрута ( wiki.js ), а затем вызвать use () в приложении Express , чтобы добавить маршрутизатор к обработке промежуточного программного обеспечения. дорожка. После этого два маршрута будут доступны из / wiki / и / wiki / about / .

  const wiki = require ('./ wiki.js');

app.use ('/ вики', вики);  

Мы покажем вам намного больше о работе с маршрутами, и в частности об использовании Router , позже в связанном разделе Маршруты и контроллеры.

Использование промежуточного программного обеспечения

Промежуточное программное обеспечение широко используется в приложениях Express для задач от обслуживания статических файлов до обработки ошибок и сжатия HTTP-ответов. В то время как функции маршрутизации завершают цикл HTTP-запрос-ответ, возвращая некоторый ответ HTTP-клиенту, функции промежуточного программного обеспечения обычно выполняют некоторую операцию с запросом или ответом, а затем вызывают следующую функцию в «стеке», которая может быть дополнительным промежуточным программным обеспечением или обработчик маршрута. Порядок вызова промежуточного программного обеспечения определяется разработчиком приложения.

Примечание: Промежуточное ПО может выполнять любую операцию, выполнять любой код, вносить изменения в объект запроса и ответа, а также может завершать цикл запрос-ответ. Если он не завершает цикл, он должен вызвать next () , чтобы передать управление следующей функции промежуточного программного обеспечения (или запрос останется зависшим).

Большинство приложений будут использовать стороннее промежуточное ПО для упрощения общих задач веб-разработки, таких как работа с файлами cookie, сеансы, аутентификация пользователей, запрос доступа POST и данные JSON, ведение журнала и т. Д.Вы можете найти список пакетов промежуточного программного обеспечения, поддерживаемых командой Express (который также включает другие популярные сторонние пакеты). Другие пакеты Express доступны в диспетчере пакетов NPM.

Чтобы использовать стороннее промежуточное программное обеспечение, вам сначала необходимо установить его в свое приложение с помощью NPM. Например, чтобы установить промежуточное ПО для регистратора HTTP-запросов morgan, вы должны сделать это:

Затем вы можете вызвать use () для объекта приложения Express , чтобы добавить промежуточное ПО в стек:

  const express = require ('экспресс');
const logger = require ('morgan');
константное приложение = экспресс ();
приложение.используйте (logger ('dev'));
...  

Примечание. Промежуточное ПО и функции маршрутизации вызываются в том порядке, в котором они объявлены. Для некоторого промежуточного программного обеспечения порядок важен (например, если промежуточное программное обеспечение сеанса зависит от промежуточного программного обеспечения cookie, тогда обработчик cookie должен быть добавлен первым). Почти всегда промежуточное программное обеспечение вызывается перед установкой маршрутов, или ваши обработчики маршрутов не будут иметь доступа к функциям, добавленным вашим промежуточным программным обеспечением.

Вы можете написать свои собственные функции промежуточного программного обеспечения, и вам, вероятно, придется это сделать (хотя бы для создания кода обработки ошибок).Отличие только между функцией промежуточного программного обеспечения и обратным вызовом обработчика маршрута состоит в том, что функции промежуточного программного обеспечения имеют третий аргумент , следующий за , который, как ожидается, будут вызывать функции промежуточного программного обеспечения, если они не завершают цикл запроса (когда вызывается функция промежуточного программного обеспечения. , он содержит следующую функцию , которая должна быть вызвана).

Вы можете добавить функцию промежуточного программного обеспечения в цепочку обработки для всех ответов с помощью app.use () или для определенного HTTP-глагола, используя связанный метод: app.get () , app.post () и т. д. Маршруты указываются одинаково для обоих случаев, хотя маршрут не является обязательным при вызове app.use () .

В приведенном ниже примере показано, как можно добавить функцию промежуточного программного обеспечения, используя оба подхода, а также с маршрутом или без него.

  const express = require ('экспресс');
константное приложение = экспресс ();


let a_middleware_function = function (req, res, next) {
  
  следующий();
}


app.use (a_middleware_function);


app.use ('/ someroute', a_middleware_function);


приложение.получить ('/', a_middleware_function);

app.listen (3000);  

JavaScript Tip: Выше мы объявляем функцию промежуточного программного обеспечения отдельно, а затем устанавливаем ее как обратный вызов. В нашей предыдущей функции обработчика маршрута мы объявили функцию обратного вызова, когда она использовалась. В JavaScript допустим любой подход.

В документации Express есть намного больше отличной документации по использованию и написанию промежуточного программного обеспечения Express.

Обслуживание статических файлов

Вы можете использовать экспресс.статическое промежуточное программное обеспечение для обслуживания статических файлов, включая ваши изображения, CSS и JavaScript ( static () - единственная функция промежуточного программного обеспечения, которая фактически является частью из Express ). Например, вы могли бы использовать строку ниже для обслуживания изображений, файлов CSS и файлов JavaScript из каталога с именем « public» на том же уровне, где вы вызываете node:

  app.use (экспресс.статический ('общедоступный'));
  

Любые файлы в общедоступном каталоге обслуживаются путем добавления их имени файла ( относительно к базовому "общедоступному" каталогу) к базовому URL-адресу.Так например:

  http: // localhost: 3000 / images / dog.jpg
http: // локальный: 3000 / css / style.css
http: // локальный: 3000 / js / app.js
http: // локальный: 3000 / about.html
  

Вы можете вызывать static () несколько раз для обслуживания нескольких каталогов. Если файл не может быть найден одной функцией промежуточного программного обеспечения, он будет передан следующему промежуточному программному обеспечению (порядок вызова промежуточного программного обеспечения зависит от вашего порядка объявления).

  ок. Использования (экспресс.статический ('общедоступный'));
app.use (express.static ('media'));
  

Вы также можете создать виртуальный префикс для своих статических URL-адресов вместо добавления файлов к базовому URL-адресу. Например, здесь мы указываем путь монтирования, чтобы файлы загружались с префиксом «/ media»:

  app.use ('/ media', express.static ('public'));
  

Теперь вы можете загружать файлы, которые находятся в общедоступном каталоге , с префикса пути / media .

  http: // localhost: 3000 / media / images / dog.jpg
http: // локальный: 3000 / медиа / видео / cat.mp4
http: // локальный: 3000 / media / cry.mp3 
 

Обработка ошибок

Ошибки обрабатываются одной или несколькими специальными функциями промежуточного программного обеспечения, которые имеют четыре аргумента вместо обычных трех: (err, req, res, next) . Например:

  app.use (function (err, req, res, next) {
  console.error (стек ошибок);
  res.status (500) .send («Что-то сломалось!»);
});
  

Они могут возвращать любой требуемый контент, но должны вызываться после всех остальных приложений .use () и направляет вызовы так, чтобы они были последним промежуточным программным обеспечением в процессе обработки запроса!

Express поставляется со встроенным обработчиком ошибок, который заботится обо всех оставшихся ошибках, которые могут возникнуть в приложении. Эта функция промежуточного программного обеспечения по умолчанию для обработки ошибок добавляется в конец стека функций промежуточного программного обеспечения. Если вы передадите ошибку в next () и не обработаете ее в обработчике ошибок, она будет обработана встроенным обработчиком ошибок; ошибка будет записана клиенту с трассировкой стека.

Примечание: Трассировка стека не включена в производственную среду. Чтобы запустить его в производственном режиме, вам необходимо установить для переменной среды NODE_ENV значение « production» .

Примечание. HTTP404 и другие коды состояния «ошибки» не рассматриваются как ошибки. Если вы хотите справиться с этим, вы можете добавить для этого функцию промежуточного программного обеспечения. Для получения дополнительной информации см. FAQ.

Дополнительную информацию см. В разделе Обработка ошибок (Экспресс-документация).

Использование баз данных

Приложения Express могут использовать любой механизм базы данных, поддерживаемый узлом Node (сам Express не определяет какого-либо конкретного дополнительного поведения / требований для управления базой данных). Есть много вариантов, включая PostgreSQL, MySQL, Redis, SQLite, MongoDB и т. Д.

Чтобы использовать их, сначала необходимо установить драйвер базы данных с помощью NPM. Например, чтобы установить драйвер для популярного NoSQL MongoDB, вы должны использовать команду:

Сама база данных может быть установлена ​​локально или на облачном сервере.В коде Express вам потребуется драйвер, подключитесь к базе данных, а затем выполните операции создания, чтения, обновления и удаления (CRUD). В приведенном ниже примере (из документации Express) показано, как с помощью MongoDB найти записи о «млекопитающих».

 
const MongoClient = требуется ('mongodb'). MongoClient;

MongoClient.connect ('mongodb: // localhost: 27017 / animals', function (err, db) {
  если (ошибка) бросить ошибку;

  db.collection ('млекопитающие'). find (). toArray (function (err, result) {
    если (ошибка) бросить ошибку;

    приставка.журнал (результат);
  });
});


const MongoClient = требуется ('mongodb'). MongoClient;
MongoClient.connect ('mongodb: // localhost: 27017 / animals', function (err, client) {
   если (ошибка) бросить ошибку;

   пусть db = client.db ('животные');
   db.collection ('млекопитающие'). find (). toArray (function (err, result) {
     если (ошибка) бросить ошибку;
     console.log (результат);
     client.close ();
   });
});
  

Другой популярный подход - косвенный доступ к базе данных через объектно-реляционный преобразователь (ORM). В этом подходе вы определяете свои данные как «объекты» или «модели», и ORM сопоставляет их с базовым форматом базы данных.Этот подход имеет то преимущество, что как разработчик вы можете продолжать мыслить в терминах объектов JavaScript, а не семантики базы данных, и что есть очевидное место для выполнения валидации и проверки входящих данных. Подробнее о базах данных мы поговорим в следующей статье.

Для получения дополнительной информации см. Интеграция с базой данных (Экспресс-документация).

Данные визуализации (представления)

Механизмы шаблонов (называемые «механизмами просмотра» в Express ) позволяют указать структуру выходного документа в шаблоне, используя заполнители для данных, которые будут заполняться, когда страница создается.Шаблоны часто используются для создания HTML, но могут также создавать другие типы документов. Express поддерживает ряд движков шаблонов, и здесь есть полезное сравнение наиболее популярных движков: Сравнение движков шаблонов JavaScript: Jade, Mustache, Dust и др.

В коде настроек вашего приложения вы устанавливаете механизм шаблонов для использования и место, где Express должен искать шаблоны, используя настройки «видов» и «механизмов просмотра», как показано ниже (вам также необходимо установить пакет, содержащий вашу библиотеку шаблонов. тоже!)

  const express = require ('экспресс');
const path = require ('путь');
константное приложение = экспресс ();


приложение.set ('просмотры', path.join (__ dirname, 'views'));


app.set ('механизм просмотра', 'some_template_engine_name');
  

Внешний вид шаблона будет зависеть от того, какой движок вы используете. Предполагая, что у вас есть файл шаблона с именем «index. », который содержит заполнители для переменных данных с именами «title» и «message», вы должны вызвать Response.render () в функции обработчика маршрута для создания и отправки HTML-ответ:

  app.get ('/', function (req, res) {
  рез.render ('index', {title: 'О собаках', message: 'Собаки молодцы!'});
});  

Для получения дополнительной информации см. Использование шаблонизаторов с Express (документация по Express).

Файловая структура

Express не делает никаких предположений относительно структуры или используемых вами компонентов. Маршруты, представления, статические файлы и другая логика, зависящая от приложения, могут находиться в любом количестве файлов с любой структурой каталогов. Хотя вполне возможно разместить все приложение Express в одном файле, обычно имеет смысл разделить ваше приложение на файлы на основе функций (например,г. управление учетными записями, блоги, доски обсуждений) и предметную область архитектурных проблем (например, модель, представление или контроллер, если вы используете архитектуру MVC).

В следующем разделе мы будем использовать Express Application Generator , который создает модульный каркас приложения, который мы можем легко расширить для создания веб-приложений.

Поздравляем, вы выполнили первый шаг на пути к Express / Node! Теперь вы должны понимать основные преимущества Express и Node и примерно то, как могут выглядеть основные части приложения Express (маршруты, промежуточное ПО, обработка ошибок и код шаблона).Вы также должны понимать, что, учитывая, что Express является малоизвестным фреймворком, то, как вы собираете эти части вместе, и библиотеки, которые вы используете, в значительной степени зависит от вас!

Конечно, Express намеренно является очень легкой структурой веб-приложений, поэтому большая часть его преимуществ и потенциала исходит от сторонних библиотек и функций. Мы рассмотрим их более подробно в следующих статьях. В нашей следующей статье мы рассмотрим настройку среды разработки Node, чтобы вы могли увидеть в действии некоторый код Express.

Упаковка Код JavaScript для Shiny

Если вы хотите написать собственный код JavaScript для настройки и расширения приложения Shiny, в конечном итоге вам нужно будет выяснить, как заставить Shiny обслуживать ваш JavaScript. Есть несколько различных возможностей:

1. Вставьте JavaScript в код пользовательского интерфейса в виде буквального текста
2. Создайте файл .js в каталоге www / и укажите на него ссылку из пользовательского интерфейса, используя

   client.js

    console.log ('Выполняется клиентский код');
   
   const button = document.getElementById ('myButton');
   button.addEventListener ('щелчок', функция (e) {
     console.log («нажата кнопка»);
   }); 

   server.js

    console.log ('Выполняется код на стороне сервера');
   
   const express = require ('экспресс');
   
   константное приложение = экспресс ();
   
   // обслуживаем файлы из публичного каталога
   приложение.используйте (express.static ('public'));
   
   // запускаем экспресс-веб-сервер, прослушивающий 8080
   app.listen (8080, () => {
     console.log ('прослушивание 8080');
   });
   
   // обслуживаем домашнюю страницу
   app.get ('/', (req, res) => {
     res.sendFile (__ dirname + '/index.html');
   }); 

   Теперь вы можете запустить свой серверный код с помощью узла server.js .

   Вам нужно будет закрыть (CTRL + C) сервер и перезапускать его каждый раз, когда вы вносите изменения в server.js . Во время разработки это может стать проблемой.Чтобы упростить этот процесс, установите nodemon - инструмент, который будет отслеживать изменения в вашем коде и при необходимости автоматически перезапускать сервер. Чтобы установить nodemon:

   npm install -g nodemon

   Затем вы можете запустить nodemon server.js , чтобы запустить свой сервер и перезагрузить его при внесении изменений.

   Попробуйте, перейдя по адресу http: // localhost: 8080. Когда вы нажимаете кнопку, он должен войти в консоль.

   Часть 3 - Подключение к MongoDB

   Предполагается, что у вас уже есть доступ к серверу, на котором запущен MongoDB.Есть несколько вариантов, которые вы можете использовать для этого:

   1. Установите MongoDB локально на свой компьютер, следуя этим инструкциям. Примечание: вам необходимо создать папку / data / db на Mac или C: \ data \ db в Windows, чтобы она действовала как хранилище данных для MongoDB. После установки вам необходимо, чтобы на вашем компьютере был запущен mongod и слушал соединения. Вы можете использовать Compass для управления данными в MongoDB. Вы должны создать базу данных, содержащую коллекцию с именем кликов .
   2. Используйте базу данных MongoDB на сервере IADT с именем daneel. Сначала используйте Compass для подключения к daneel и создайте коллекцию с именем clicks в вашей базе данных. В качестве имени пользователя и пароля следует использовать номер вашего студента (строчные n ). Затем используйте URL-адрес подключения mongodb: // n000xyz: n000xyz @ daneel из вашего кода JavaScript (где n000xyz - номер вашего ученика).
   3. Создайте бесплатную учетную запись в mLab. После того, как вы создали учетную запись, вы должны создать базу данных, содержащую коллекцию с именем , щелкнуть и добавить нового пользователя с доступом к этой коллекции. Примечание: вы не сможете получить доступ к mLab из IADT, поскольку трафик блокируется брандмауэром 😞. Опять же, вы можете проверить, что это работает, подключившись с помощью компаса.

   После того, как вы выполнили одну из описанных выше настроек и убедились, что можете подключиться с помощью Compass, вы можете переходить к подключению с помощью кода JavaScript на стороне сервера.

   Требовать модуль mongodb и добавить код подключения MongoDB к server.js :

    console.log ('Выполняется код на стороне сервера');
   
   const express = require ('экспресс');
   const MongoClient = требуется ('mongodb').MongoClient;
   константное приложение = экспресс ();
   
   // обслуживаем файлы из публичного каталога
   app.use (express.static ('общедоступный'));
   
   // подключаемся к базе данных и запускаем экспресс-сервер
   пусть дб;
   
   // *** Замените URL-адрес ниже URL-адресом вашей базы данных ***
   const url = 'mongodb: // user: password @ mongo_address: mongo_port / databaseName';
   // Например, для варианта 2) выше это будет:
   // const url = 'mongodb: // localhost: 21017 / databaseName';
   
   MongoClient.connect (url, (err, database) => {
     if (err) {
       вернуть console.log (ошибка);
     }
     db = база данных;
     // запускаем экспресс-веб-сервер, прослушивающий 8080
     приложение.слушайте (8080, () => {
       console.log ('прослушивание 8080');
     });
   });
   
   // обслуживаем домашнюю страницу
   app.get ('/', (req, res) => {
     res.sendFile (__ dirname + '/index.html');
   }); 

   Если вы все сделали правильно, то Node.

   Часть 4 - Щелчки кнопки записи в DB

   Давайте изменим client.js так, чтобы он отправлял HTTP-запрос POST на конечную точку API http: // localhost: 8080 / clicked на нашем сервере. Примечание: здесь мы используем fetch () , как описано в недавней лекции, мы также могли бы использовать XHR, jQuery, await + async или аналогичные средства для выполнения асинхронного запроса.

   client.js

    console.log ('Выполняется клиентский код');
   
   const button = document.getElementById ('myButton');
   button.addEventListener ('щелчок', функция (e) {
     console.log («нажата кнопка»);
   
     fetch ('/ clicked', {метод: 'POST'})
       .then (функция (ответ) {
         if (response.ok) {
           console.log («Клик был записан»);
           возвращение;
         }
         выдать новую ошибку («Запрос не удался.»);
       })
       .catch (функция (ошибка) {
         console.log (ошибка);
       });
   }); 

   Но... конечная точка API http: // localhost: 8080 / clicked еще не существует на нашем сервере. Мы можем настроить эту конечную точку (или маршрут), добавив следующее к end из server.js .

    // добавляем документ в коллекцию БД, записывающий событие клика
   app.post ('/ clicked', (req, res) => {
     const click = {clickTime: new Date ()};
     console.log (щелкните);
     console.log (БД);
   
     db.collection ('clicks'). save (click, (err, result) => {
       if (err) {
         вернуть console.log (ошибка);
       }
       приставка.log ('щелкните добавлено в базу данных');
       res.sendStatus (201);
     });
   }); 

   Обратите внимание, что добавлен маршрут POST по адресу http: // localhost: 8080 / clicked. Предоставляемый анонимный обратный вызов использует метод Mongo save () для добавления нового документа в коллекцию, содержащую текущую дату и время.

   Если вы попробуете это и просмотрите содержимое своей базы данных (с помощью такого инструмента, как Compass), вы увидите, что эти новые документы появляются в вашей коллекции кликов .

   Часть 5 - Получение данных из БД

   Добавьте новый маршрут к концу сервера .js :

    // получаем данные о кликах из базы данных
   app.get ('/ clicks', (req, res) => {
   
     db.collection ('клики'). find (). toArray ((err, result) => {
       если (ошибка) вернуть console.log (ошибка);
       res.send (результат);
     });
   }); 

   Это добавляет конечную точку GET по адресу http: // localhost: 8080 / clicks, которая вернет массив, содержащий все документы в базе данных, то есть записи о каждом нажатии кнопки. Чтобы проверить это, вы можете просто посетить http: // localhost: 8080 / clicks в браузере (убедитесь, что у вас установлен сервер .js , работающий в узле).

   Затем мы будем потреблять (использовать) эту конечную точку API из нашего клиентского кода. Мы добавим функцию setInterval () , которая будет опрашивать сервер каждую секунду, извлекать все данные о кликах, а затем отображать количество кликов в пользовательском интерфейсе.

   Добавьте это в конец client.js :

    setInterval (function () {
     fetch ('/ clicks', {метод: 'ПОЛУЧИТЬ'})
       .then (функция (ответ) {
         если (response.ok) return response.json ();
         throw new Error ('Request failed.');
       })
       .then (функция (данные) {
         document.getElementById ('counter'). innerHTML = `Кнопка была нажата $ {data.length} раз`;
       })
       .catch (функция (ошибка) {
         console.log (ошибка);
       });
   }, 1000); 

   Готово 🙌! Веб-страница теперь должна обновляться каждую секунду в зависимости от количества кликов, записанных в базе данных. Это будет записывать общее количество кликов от всех пользователей за несколько сеансов!

   Но ... есть задержка между нажатием кнопки и обновлением веб-страницы.Почему? Вы можете это улучшить?

   Ниже приведены окончательные версии трех ключевых файлов.

   .

   Добавить комментарий Отменить ответ

   Ваш адрес email не будет опубликован. Обязательные поля помечены *

   Комментарий *

   Имя *

   Email *

   Сайт