Использование шаблонного процессора для формирования HTML страниц

24.08.20

Интеграция - WEB-интеграция

В статье опишу использование шаблонного процессора Handlebars запущенного на Node.js

Вводные

  • Нужно по запросу к HTTP сервису 1С формировать HTML страницы по шаблонам.
  • Реализовать с возможностью запуска на windows

 

Вариант решения

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

 

Общая схема

Набор пакетов проекта node.js

 
 package.json

 

Сборка проекта node.js

Собирал пробный вариант по статьям https://metanit.com/web/nodejs/4.19.php

 
 Первый вариант app.js с использованием статичных данных

 

Для пробы работы с AdminLTE из пакета взял файл "starter.html", он при запуске сервиса node доступен для проверки работы по ссылке http://localhost:3000/starter.html, выделил из него заголовок, подвал, контент часть. Основу перенес в layout.hbs.

 
 \layouts\layout.hbs

 

Проверил работоспособность по ссылке http://localhost:3000/starter. Блоки указанные в layout.hbs имеют доступ к переменным переданным для форматирования, для передачи в дочерние шаблоны используется конструкция "{{> contentHeader title=title}}" (ссылка).

 

Реализация со стороны 1С

Реализовал HTTP сервис в виде раширения.

 
 Код модуля HTTP сервиса

 

Дополнение в node.js

Добавил в app.js обработчик запроса от 1С

 
 код обработчика

 

Перенес статические файлы (\dist, \plugins) из папки модуля admin-lte (\node_modules\admin-lte) в папку корневой страницы Apache и переделал в шаблонах ссылки с относительно страницы "dist/..." на относительно сервера "/dist/..".

 

Проверка работы

Запустил проект через командную строку "node app.js", перезапустил apache.

Запустил проверку из браузера.

 
 Скриншот результата

 

В заголовке страницы вывелось "Тестовый заголовок" что соответствует отправленным из 1С данным.

В мониторе сети видно что картинки отдаются с 304, это автоматическая настройка apache.

 

Запуск в качестве сервиса

Для работы приложения node.js в постоянном варианте можно его установить как сервис windows. Для этого нужно установить пакет node-windows (ссылка), сформировать и запустить скрипт регистрации сервиса.

 

Итог

При использовании 1С в качестве бекенд HTTP сервера можно использовать современные процессоры шаблонизации, что позволит

  • выделить работу с HTML версткой в отдельный блок без привязки к 1С
    • что позволит с меньшими техническими трудностями работать верстальщикам
  • при использовании компонентов шаблонов уменьшить стоимость перехода на генерацию HTML страниц вне 1С
    • используя промежуточную базу с кешем данных
    • реализуя sinle page application (SPA)

GitHub репозиторий проекта (ссылка)

Благодарю за внимание.

См. также

Интеграция Альфа Авто 5 / Альфа Авто 6 и AUTOCRM / Инфотек

Сайты и интернет-магазины WEB-интеграция Платформа 1С v8.3 Конфигурации 1cv8 1С:Управление торговлей 11 Автомобили, автосервисы Россия Управленческий учет Платные (руб)

Интеграционный модуль обмена между конфигурацией Альфа Авто 5 и Альфа Авто 6 и порталом AUTOCRM. Данный модуль универсален. Позволяет работать с несколькими обменами AUTOCRM разных брендов в одной информационной базе в ручном и автоматическом режиме. Без существенных изменений типовой конфигурации. Проверено с брендами: Интеграция 1С и GEELY Интеграция 1С и HAVAL Интеграция 1С и KIA Интеграция 1С и FORD Интеграция 1С и LADA ГАРАНТИЯ 100% ВНЕДРЕНИЯ!

36000 руб.

03.08.2020    15661    9    17    

9

Модуль для обмена "1С:Предприятие 8. УАТ. ПРОФ" с FortMonitor

WEB-интеграция 8.3.8 Конфигурации 1cv8 Автомобили, автосервисы Беларусь Украина Россия Казахстан Управленческий учет Платные (руб)

Расширение предназначено для конфигурации "1С:Предприятие 8. Управление Автотранспортом. ПРОФ". Функционал модуля: 1. Заполнение регистров сведений по подсистеме "Мониторинг", а именно: события по мониторингу, координаты по мониторингу, пробег и расход по мониторингу, текущее местоположение ТС по мониторингу 2. Заполнение путевого листа: пробег по мониторингу, время выезда/заезда, табличная часть ГСМ, места стоянок по геозонам. 3. Отчеты по данным загруженным в регистры сведений. 4. Предусмотрена автоматическая загрузка данных в фоновом режиме (условия работы данной загрузке читайте в описании товара) Модуль работает без включенной константы по настройкам мониторинга. Модуль формы предоставляется с открытым кодом, общий модуль защищен. Любой заинтересованный пользователь, имеет возможность скачать демо-версию расширения.

22656 руб.

25.05.2021    12809    30    8    

10

Интеграция 1С — Битрикс24. Обмен задачами

Сайты и интернет-магазины Интеграция WEB-интеграция Платформа 1С v8.3 Конфигурации 1cv8 Управленческий учет Платные (руб)

Интеграция 1С и Битрикс24. Разработка имеет двухстороннюю синхронизацию 1С и Битрикс24 задачами. Решение позволяет создавать пользователя в 1С из Битрикс24 и наоборот. Данная разработка технически подходит под все основные конфигурации линейки продуктов 1С:Предприятие 8.3 (8.3.18.1289). При приобретении предоставляется 1 месяц бесплатных обновлений разработки. Доступна демо-версия продукта с подключением Вашего Битрикс24

5040 руб.

04.05.2021    17429    6    15    

13

[Расширение] БОР-Навигатор.Культура

Зарплата Бюджетный учет WEB-интеграция Обмен с ГосИС Платформа 1С v8.3 Сложные периодические расчеты 1С:Зарплата и кадры государственного учреждения 3 Государственные, бюджетные структуры Россия Бюджетный учет Платные (руб)

Расширение конфигурации, включающее в себя объекты, необходимые для подготовки и сдачи отчета "Штатная численность" системы "БОР-Навигатор.Культура" в программе "1С:Зарплата и кадры государственного учреждения", редакция 3.1.

8400 руб.

01.02.2019    25688    9    0    

7

Интеграция с сервисом vetmanager

WEB-интеграция Платформа 1С v8.3 Бухгалтерский учет 1С:Бухгалтерия 3.0 Бытовые услуги, сервис Платные (руб)

Внешняя обработка разрабатывалась для загрузки документов из Ветменеджер в 1С: Бухгалтерия 3.0

12000 руб.

02.02.2021    16260    41    49    

22
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. SizovE 262 24.08.20 10:01 Сейчас в теме
Держите в курсе, хватит ли возможностей для реализации полноценного дашборда
6. malikov_pro 1288 24.08.20 13:48 Сейчас в теме
(1) Опишите функционал, подумаю как организовать.
10. SizovE 262 24.08.20 14:47 Сейчас в теме
(6) мы сами сейчас подобный проект заканчиваем ;) у вас немного другое решение, интересно готовый результат какой будет
s_vidyakin; +1 Ответить
2. Steelvan 302 24.08.20 12:10 Сейчас в теме
Если на то пошло, то правильнее взять исходники шаблонизатора на delphi или иного языка и обернуть их в родную dll.

Например на delphi https://www.dvdchief.com/delphi/
7. malikov_pro 1288 24.08.20 13:50 Сейчас в теме
(2) Как запустить на node можно разобраться за день-два, сделать обертку dll у меня еще не разу не получалось (потребность была).
3. Steelvan 302 24.08.20 12:11 Сейчас в теме
Родная dll понятна почти всем 1Сникам, а выстраивать огород из node.js и прочего это усложнение.
4. Steelvan 302 24.08.20 12:18 Сейчас в теме
И да, 304 заголовок говорит о том, что запрос был отправлен и сервер вернул ответ "Не изменено, бери из кеша".
Т.е. запрос к серверу все равно был.
Кешировать правильнее так, чтобы совсем исключить запросы от обозревателя, кроме html, к серверу.

Для этого надо использовать некий изменяемый параметр через "?" в запросах к серверу для ресурсов от обозревателя.
Например, хранить ресурсы в справочниках и параметром подставлять номер версии, который изменяется при каждом изменении.

Подробнее https://ruhighload.com/Кэширование+статики+и+cache-control
8. malikov_pro 1288 24.08.20 13:54 Сейчас в теме
(4) Я этим хотел показать что статику можно отдавать не из самой 1С (приложенные файлы к номенклатуре например) а web сервером. При реализации витрины нужно из 1С приложенные файлы выгрузить в эту папку и на уровне спр. зафиксировать пути, которые указывать при формировании HTML.
5. Steelvan 302 24.08.20 12:20 Сейчас в теме
А вообще согласен, правильно не в 1С html создавать, а на ОСП (одностраничные приложения) переходить и 1С сервер только команд дергать.
s_vidyakin; +1 Ответить
9. malikov_pro 1288 24.08.20 13:59 Сейчас в теме
(5) Идея организации описана в https://github.com/gothinkster/realworld, реализация на 1С в процессе.
SPA пишутся на JS обычно, модульность оч. похожа на шаблоны по структуре, поэтому этот вариант рассматриваю как переходный. Сам постепенно JS изучаю.
11. s_vidyakin 63 24.08.20 21:25 Сейчас в теме
(5) я тоже не понял зачем дергать ноду из 1С ради шаблонизатора, если надо наоборот - 1С должна давать API к своим данным, а вызывать его и делать всю работу с html и сервером должна node.js
12. malikov_pro 1288 24.08.20 21:41 Сейчас в теме
(11) У меня пока не хватает умения сделать нормальный node.js middleware (на symfony+mysql делал b2b, как структурно работает представляю), и на Онлайн-митап Web-клиенты для 1С не увидел удобного решения. Обычно в 1С-среде шаблоны в макетах/коде хранят и после что-то из них собирают, что на мой взгляд "костыльно". Предложенный мной вариант вариант переходный к SPA либо middleware, как пример чтобы программисты 1С попробовали что такое шаблоны и что нужно выделять слой подготовки данных, в Битрикс-среде куча программистов которые в слое представления данные из базы "дергают" и при выставлении требования "применять twig"/"писать нормальные слои" начинают задирать ценник.
13. s_vidyakin 63 24.08.20 21:51 Сейчас в теме
(12) да там не мидлварь а просто страницы-шаблоны будут, которые заберут данные из 1С и подставят в себя. В принципе даже node.js не нужна, можно на чистом фронте сделать SPA, которое будет состоять из страниц-шаблонов на реакте или vue.js, данные фронт может дергать и сам
14. malikov_pro 1288 24.08.20 21:56 Сейчас в теме
(13) Для нормальной работы SPA нужна нормальная реализация API для клиента с токенами, роутингом и т.д., шаблон реализации https://github.com/gothinkster/realworld. Руки дойдут - сделаю реализацию серверной части, наработки есть, после буду полноценно поднимать тему по SPA, пока на мой взгляд рано. Если есть системные наработки то давайте совместно развивать тему.
15. s_vidyakin 63 24.08.20 22:02 Сейчас в теме
(14) токенами и роутингом я бы не запаривался, предполагается же, что приложение будет работать в одной сети с 1С, а она поддерживает OAuth2 вроде бы. Для начала можно пароль и в http заголовке передавать
Главное найти жизненный пример как применить такую связку и сделать минимальное API на стороне 1С, клиента на Vue я могу накидать если что
16. malikov_pro 1288 24.08.20 22:12 Сейчас в теме
(15)
"предполагается же, что приложение будет работать в одной сети с 1С" - нет
"поддерживает OAuth2 вроде бы" - не проверял как работает применительно к web, из того что знаю это больше про тонкий клиент.
"Для начала можно пароль и в http заголовке передавать" - такого полно, такая реализация не интересна.
Посмотрите внимательно в спецификацию "realworld", запустите на связке vue+node если JS близок, а после попробуйте подобное на 1С организовать.

Проблема не на стороне vue, а на стороне 1С. т.к. нормальной реализации инструментов нет. Те же шаблоны админок, если на серверной стороне на symfony библиотека есть, а на JS все под SPA, например bulma, а в 1С берут шаблоны без разделения на модули, а после жалуются что это дорого в поддержке и куча конфликтов в разработке.
17. malikov_pro 1288 24.08.20 22:21 Сейчас в теме
(15) В среде web разработки решают вопросы положения middleware https://habr.com/ru/company/yandex/blog/514550/ и разбирают варианты реализации https://habr.com/ru/post/348964/, а в среде 1С разбирают реализацию HTTP RPC и считается достижениям если формируется документация на HTTP API. Можете помочь уменьшить разрыв за счет доступного инструментария - давайте совместно думать как.
18. s_vidyakin 63 25.08.20 01:39 Сейчас в теме
(17) про инструментарий не понял я... Чего не хватает? API пишете в конфигураторе, там никаких проблем нет, тестируете в Postman, клиент пишете на чем угодно. Уточните какой разрыв имеете в виду
19. malikov_pro 1288 25.08.20 03:56 Сейчас в теме
(18) "токенами и роутингом я бы не запаривался" - как раз про безопасность и роутинг, посмотрите как это организовано с популярных фреймворках (symfony, express, django) и как подобное реализовать в 1С.
Моя попытка с роутингом (буду доделывать) https://infostart.ru/1c/articles/1131305/, еще попытка https://infostart.ru/public/1257654/, попытка документирования https://infostart.ru/1c/articles/1136245/. Подумайте на какие грабли наступили люди, после чего начали писать такие решения.
20. s_vidyakin 63 25.08.20 10:28 Сейчас в теме
(19) так вы хотите сделать аналог express на 1С? Я концепцию по пойму никак, зачем это надо ) будет ли фронт или 1С всё должна генерировать сама. Хотите сделать типа cms и вывесить во внешнюю среду?
21. malikov_pro 1288 25.08.20 10:49 Сейчас в теме
(20) Фронт будет SPA, на 1С полноценный REST API HTTP. Пример B2B порталы и личные кабинеты.
22. s_vidyakin 63 25.08.20 10:54 Сейчас в теме
(21) тогда роутинг и шаблонизация на 1С не нужны, это все уже есть в SPA
23. malikov_pro 1288 25.08.20 10:59 Сейчас в теме
(22) Роутинг нужен, потому что SPA приложение к нему будет обращаться. Шаблоне не нужны.
24. s_vidyakin 63 25.08.20 11:07 Сейчас в теме
(23) да не нужен он) SPA обращается за данными к 1С по API например по адресу localhost/baza/hs/api/docs/Реализации?Период=20200801_20200825&Контрагент=0005241 и получает документы в json, показывает их на странице любым способом. 1С не знает о шаблонах и роутах, ее дело только отдавать данные
25. malikov_pro 1288 25.08.20 11:15 Сейчас в теме
(24) давайте в личку (мои рабочие примеры не для паблика), разберем вопрос с конкретными примерами по skype или подобному.
26. pm74 199 27.08.20 09:15 Сейчас в теме
пример реализации api на 1с есть здесь
Оставьте свое сообщение