MDN Web Docs: учебник по Express, ч.5-4: главная страница сайта
Пост по статье:
https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Home_page
https://developer.mozilla.org/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Home_page
В статье описывается создание главной страницы динамического сайта (веб-приложения) в примере, который мы разрабатывали с самого начала данного руководства. В статье не излагается ничего принципиально нового, только собирается всё, рассказанное ранее, воедино. После окончания прочтения этой статьи мы, наконец, можем видеть первый результат разработки веб-приложения на базе веб-фреймворка «Express».
Вот снимок экрана, приведенный в конце обсуждаемой статьи в качестве иллюстрации работы главной страницы нашего динамического сайта:
Вот что получилось у меня:
В принципе, то же самое, только я перевел текст сайта на русский язык.
Хоть этот динамический сайт пока что работает локально (развертывание сайта в реальную эксплуатацию будет описано в конце руководства), но база данных сайта расположена в облаке через веб-сервис «Atlas» компании «MongoDB» под управлением СУБД (системы управления базой данных) этой же компании.
У меня есть та же база данных, установленная на моем компьютере локально. Я могу подключить сайт к этой базе данных вместо расположенной в облаке. Это можно сделать, изменив одну строку в файле «app.js» проекта.
Меню сайта слева пока что не работает. Выдает лишь однострочные текстовые заглушки (кроме пункта «Главная») следующего вида (эта строчка выдается при нажатии на пункт «Все книги»):
NOT IMPLEMENTED: Book list
Сайт еще будет дорабатываться в следующих главах руководства.
Как это работает в проекте
В моём представлении работа веб-приложения сейчас выглядит примерно так (не всё здесь правильно, кое-что упрощено или опущено, но это же просто схема):
Мы запускаем наше веб-приложение в работу посредством запуска текстового файла «www» (содержащего программу на языке JavaScript) в рамках среды выполнения «Node.js». Этот файл находится в каталоге «bin» проекта. Маленькими стрелками на схеме изображена «зависимость». Файл «www» зависит от файла «app.js» (в коде файла «www» происходит подключение файла «app.js»), в котором прописан хребет нашего веб-приложения.
На схеме можно увидеть «маршруты» (по-английски «routes»), они описаны в файле «catalog.js», расположенном в каталоге «routes» проекта. Можно увидеть «контроллеры» (по-английски «controllers»), это функции, они описаны в файле «bookController.js», расположенном в каталоге «controllers» проекта.
Также можно увидеть «модели» и «шаблоны», описанные в указанных на схеме файлах и расположенные в каталогах «models» и «views» проекта.
«Маршруты» направляют запрос от браузера в соответствующую «функцию-контроллер», которая при посредничестве «моделей» получает данные из базы данных сайта и после этого формирует HTML-страницу с помощью соответствующих шаблонов, вставляя в эти шаблоны данные, полученные из базы данных. Сформированная HTML-страница после этого отправляется браузеру в качестве ответа на его запрос.
https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Home_page
https://developer.mozilla.org/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Home_page
В статье описывается создание главной страницы динамического сайта (веб-приложения) в примере, который мы разрабатывали с самого начала данного руководства. В статье не излагается ничего принципиально нового, только собирается всё, рассказанное ранее, воедино. После окончания прочтения этой статьи мы, наконец, можем видеть первый результат разработки веб-приложения на базе веб-фреймворка «Express».
Вот снимок экрана, приведенный в конце обсуждаемой статьи в качестве иллюстрации работы главной страницы нашего динамического сайта:
Вот что получилось у меня:
В принципе, то же самое, только я перевел текст сайта на русский язык.
Хоть этот динамический сайт пока что работает локально (развертывание сайта в реальную эксплуатацию будет описано в конце руководства), но база данных сайта расположена в облаке через веб-сервис «Atlas» компании «MongoDB» под управлением СУБД (системы управления базой данных) этой же компании.
У меня есть та же база данных, установленная на моем компьютере локально. Я могу подключить сайт к этой базе данных вместо расположенной в облаке. Это можно сделать, изменив одну строку в файле «app.js» проекта.
Меню сайта слева пока что не работает. Выдает лишь однострочные текстовые заглушки (кроме пункта «Главная») следующего вида (эта строчка выдается при нажатии на пункт «Все книги»):
NOT IMPLEMENTED: Book list
Сайт еще будет дорабатываться в следующих главах руководства.
Как это работает в проекте
В моём представлении работа веб-приложения сейчас выглядит примерно так (не всё здесь правильно, кое-что упрощено или опущено, но это же просто схема):
Мы запускаем наше веб-приложение в работу посредством запуска текстового файла «www» (содержащего программу на языке JavaScript) в рамках среды выполнения «Node.js». Этот файл находится в каталоге «bin» проекта. Маленькими стрелками на схеме изображена «зависимость». Файл «www» зависит от файла «app.js» (в коде файла «www» происходит подключение файла «app.js»), в котором прописан хребет нашего веб-приложения.
На схеме можно увидеть «маршруты» (по-английски «routes»), они описаны в файле «catalog.js», расположенном в каталоге «routes» проекта. Можно увидеть «контроллеры» (по-английски «controllers»), это функции, они описаны в файле «bookController.js», расположенном в каталоге «controllers» проекта.
Также можно увидеть «модели» и «шаблоны», описанные в указанных на схеме файлах и расположенные в каталогах «models» и «views» проекта.
«Маршруты» направляют запрос от браузера в соответствующую «функцию-контроллер», которая при посредничестве «моделей» получает данные из базы данных сайта и после этого формирует HTML-страницу с помощью соответствующих шаблонов, вставляя в эти шаблоны данные, полученные из базы данных. Сформированная HTML-страница после этого отправляется браузеру в качестве ответа на его запрос.