Добавление статической веб-страницы

Если вы придерживались всех предыдущих шагов в этом руководстве, перейдите к Введение в связующее ПО.

Если вы перешли к этому шагу без выполнения предыдущих, то вам следует выполнить следующие шаги…

Получите приложение (в состояни предшествуещем этому шагу) с GitHub и установите все связи:

$ git clone https://github.com/strongloop/loopback-getting-started.git
$ cd loopback-getting-started
$ git checkout step3
$ npm install

Введение в связующее ПО

LoopBack построен на Express, на одном из самых популярных Node фреймворков.  Объекты верхнего уровня LoopBack приложения, наследует все методы и свойства Express объектов приложени. См Работа с LoopBack объектами.

Перед тем как продолжить, вы должны понять основную концепцию наследованием LoopBack(ом) Express: связующее ПО (middleware).

Связующее ПО (Middleware) это простая JavaScript функция с доступом к объекту запроса (req)  представляющий HTTP запрос, и объекту ответа  прдставляющий HTTP ответ, далее связующее ПО (middleware) - встраиваемый запрос-ответ цикл приложения Express , обычно обозначается перменной с далее идущим именем:

• Выполнение кода
• Внесение изминения в запрос и в объект ответа.
• Завершение цикла запрос-ответ
• Вызов следующего связующего ПО в стеке

LoopBack связующее ПО такое же как Express связующее ПО, кроме того, что LoopBack добовляет понятие фаз, что позволяет настроить в каком порядке связующее ПО вызывается. Это позволяет избежать одного из сложных аспектов Express: убедится, что связующее ПО запускаеться, тогда, когда должно.

Когда вы создаете приложение с помощью slc loopback, создаеться server/middleware.json  файл, который определяет фазу выполненя связующего ПО. Регистрация нового связующего ПО так же проста, как редактирование этого JSON файла. Разверните этот код, чтоб увидеть как он выглядит.

server/middleware.json

{
  "initial:before": {
    "loopback#favicon": {}
  },
  "initial": {
    "compression": {}
  },
  "session": {
  },
  "auth": {
  },
  "parse": {
  },
  "routes": {
    "loopback#status": {
      "paths": "/"
    }
  },
  "files": {
  },
  "final": {
    "loopback#urlNotFound": {}
  },
  "final:after": {
    "errorhandler": {}
  }
}

Каждый из ключей верхнего уровня middlewre.json определяет промежуточный этап: initial, session, auth, и так далее заканчивается final. Есть также модификаторы, чтоб зарегестрировтаь связующее ПО до и после данной фазы. Это нанмого больше этого, но это охватывает основы.  См Определение связующего ПО для получения более подробной информации.

Изминени или модификация кореного маршрута заданногоп о умолчанию

Приложение как правило необхоимо  для обслуживания статического контента как HTML и CSS файлы, клиентские JavaScript файлы, изображения и другие. Это очень легко сделать  с помощью базового построения LoopBack  приложения. Вы собираетесь настроить приложение, чтобы обеспечить работу с файлами в /client  папке как статическими ресурсами.

Во-первых, вам придется отключить обработчик маршрута по умолчанию, для корневого URL. Вспомним Создание простого API (вы ведь выполняли все о порядку, не так ли?), когда вы загружали корень URL приложения http://localhost:3000/, вы видели как приложение реагирует с простым статус сообщением, наподобии этого:

{"started":"2014-11-20T21:59:47.155Z","uptime":42.054}

Это происходит, потому как базавое приложение имеет  следующую запись  в server/middleware.json:

/server/middleware.json

...
"routes": {
    "loopback#status": {
      "paths": "/"
    }
  },
...

Эта запись говорит, что для любого HTTP  запроса приложения будет возвращать результат [oopback.status()](http://apidocs.strongloop.com/loopback/#loopbackstatus), одного из небольшого набора  встроеного встроенного LoopBack связующего ПО.  Как с Express, кога вы указываете орневой URL, любой запрос, который  нчинается с  этого паттерна  будет вызывать связующее ПО,  тоесть любой  URL запрос будет вызывать его. 

Чтобы отключить это, просто удалите запись ”loopback#status”, или измините его на  чтоб статус связующего ПО вызывался только по пути /status (как это сделано в loopback-getting-started):

...
"routes": {
    "loopback#status": {
      "paths": "/status"
    }
  },
...<

Определение статического связующего ПО

Дале вы должны определить статическое связующее ПО для обеспечения файлов в /client папке.   

Измените server/middleware.json.  Найдите запись “files”:

server/middleware.json

...
  "files": {
  },
...

Добавьте:

...
  "files": {
    "loopback#static": {
      "params": "$!../client"
  },
...

Эти строки определяют статическое связующее ПО которое позволяет приложению обеспечивтаь  работу с файлами в /client папке как статический контент. 

These lines define static middleware that makes the application serve files in the /client directory as static content.   $! символы указывают, что путь относитеьно middleware.json.

Добавление HTML файла

Теперь приложение будет использовать файлы, которые вы поместите в папку /client как статический контент. Тоеть, чтоб увидеть это в действии, добавьте HTML файл в /client. для примера, добавьте файл с именем index.html с данным контентом:

/client/index.html

<head><title>LoopBack</title></head>
<body>
    <h1>LoopBack Rocks!</h1>
    <p>Hello World... </p>
</body>

Конечно вы можите добавить любой статический HTML  для примера.

Запустите его….!

Теперь запустите приложение снова:

$ slc run

Когда вы загрузите http://0.0.0.0:3000/ теперь вместо JSON состояния вы увидите вот это: