Использование шаблонного процессора для формирования 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 разных брендов в одной информационной базе в ручном и автоматическом режиме.

36000 руб.

03.08.2020    15747    10    17    

11

Интеграция 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    17548    6    15    

13

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

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

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

12000 руб.

02.02.2021    16359    42    49    

23

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

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

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

8400 руб.

01.02.2019    25741    9    0    

7

Заполнение по ИНН или наименованию реквизитов контрагента по данным сайта ФНС

Обмен с ГосИС WEB-интеграция Платформа 1С v8.3 Управляемые формы 1С:Комплексная автоматизация 1.х 1С:Бухгалтерия 2.0 1С:Управление торговлей 10 1С:Управление производственным предприятием 1С:Управление нашей фирмой 1.6 1С:Бухгалтерия государственного учреждения 1С:Документооборот 1С:ERP Управление предприятием 2 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Платные (руб)

Обработка является альтернативой механизму, разработанному фирмой 1С и заполняющему реквизиты контрагента по ИНН или наименованию. Не требуется действующей подписки ИТС. Вызывается как внешняя дополнительная обработка, т.е. используется, непосредственно, из карточки контрагента. Заполнение по ИНН или наименованию реквизитов контрагента по данным сайта ФНС (egrul.nalog.ru) для БП 2.0, БП 3.0, БГУ 1.0, БГУ 2.0, УТ 10.3, УТ 11.x, КА 1.1, КА 2.x, УПП 1.x, ERP 2.x, УНФ 1.5, УНФ 1.6, УНФ 3.0, ДО 2.1

2400 руб.

28.04.2016    88580    160    215    

318
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. SizovE 262 24.08.20 10:01 Сейчас в теме
Держите в курсе, хватит ли возможностей для реализации полноценного дашборда
6. malikov_pro 1292 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 1292 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 1292 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 1292 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 1292 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 1292 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 1292 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 1292 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 1292 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 1292 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 1292 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 1292 25.08.20 11:15 Сейчас в теме
(24) давайте в личку (мои рабочие примеры не для паблика), разберем вопрос с конкретными примерами по skype или подобному.
26. pm74 199 27.08.20 09:15 Сейчас в теме
пример реализации api на 1с есть здесь
Оставьте свое сообщение