Использование HTTP-сервиса для создания "фронтенда" HTML/CSS/jQuery с кэшированием

06.08.19

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

В статье описан способ создания "фронтенда" на HTML/CSS/jQuery и скрипт кеширования AJAX запросов на PHP.

Скачать файлы

Наименование Файл Версия Размер
Расширение с примером использования HTTP-сервиса (проверенно на 8.3.14.1779):
.cfe 93,97Kb
25
.cfe 93,97Kb 25 Скачать

HTTP-сервисы появились в платформе 8.3.5 и с тех пор начали активно развиваться. С их помощью можно реализовать обмен данными без использования COM. Или создать какой-нибудь frontend  для информационной базы.

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

Итак, приступим. Вначале создадим объект конфигурации HTTP-сервис, укажем корневой URL, например, front

 
 Новый HTTP-Сервис

В нем создадим 5 шаблонов URL и методы к ним:

 
 Шаблоны URL
  • Старт - для инициализации начальной страницы; шаблон /index; HTTP-метод GET
 
 Свойства метода "Получить" шаблона "Старт"
  • JS - для получения JavaScript'ов для страницы; шаблон /js; HTTP-метод GET
  • CSS - для стилей для страницы; шаблон /css; HTTP-метод GET
  • JQuery - для подключения библиотеки JQuery; шаблон /jquery; HTTP-метод GET
  • ajax - для вызова; шаблон /ajax; HTTP-метод POST
 
 Свойства метода "МетодAJAX" шаблона "ajax"

Тексты скриптов JS, описание стилей CSS, библиотеку JQuery (Скачать) и начальную страницу HTML поместим в макеты обработки HTTP_ОбработкаСервиса. Процедуры для обработки запросов поместим в менеджер этой обработки.

Добавим экспортную функцию ПолучитьНачальнуюСтраницу() в модуль менеджера для загрузки начальной страницы

 
HTTP_ОбработкаСервиса

Заполним макеты:

Макет НачальнаяСтраница может иметь тип ТекстовыйТекумент, а может, как в данном случае, и HTTMДокумент.
(в тексте для публикации пришлось заменить onclick= на _onclick_=, иначе редактор просто удалял этот фрагмент. При копировании кода нужно убрать выделение знаками "_")

 
  Макет "НачальнаяСтраница"

 

В макет JS включим скрипты для обработки логики нашего front'a

 
 Текст макета "JS"

 

Теперь перейдем в модуль HTTP-Сервиса и создадим обработчики методов Получить, ПолучитьJS, ПолучитьСSS, ПолучитьJQuery и МетодAJAX:

 
 Обработчики HTTP-методов

Сохраняем конфигурацию (расширение).
Теперь необходимо опубликовать наш HTTP-сервис

 
 Пример файла публикации default.vrd

Перезапускаем веб сервер и набираем в адресной строке http://127.0.0.1/demo/hs/front/index. Произойдут следующие действия:

  1. 1С выполнит СтартПолучить и вернет текст начальной страницы
  2. Браузер при загрузке страницы обнаружит, что нужно загрузить еще три ссылки http://127.0.0.1/demo/hs/front/jqueryhttp://127.0.0.1/demo/hs/front/js и http://127.0.0.1/demo/hs/front/css и передаст вызовы 1С через веб сервер
  3. 1С выполнит методы JQueryПолучитьJQueryJSПолучитьJSCSSПолучитьСSS  и вернет содержание браузеру.
  4. Страница полностью загрузится

Теперь на полученной веб-странице введем значение в поле и нажмем кнопку Ок. Начнется выполнение ajax-запроса и 1С вернет какой-нибудь контент, который включиться в содержимое блока <div id="content"> без полной перезагрузки страницы.

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

Бонусом опубликую php-скрипт, который  кэширует запросы, тем самым минимизирует обращения напрямую к информационной базе

 
 PHP-скрипт

 

HTTPСервис Web Сайт Доступ HTML

См. также

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

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

Интеграционный модуль обмена между конфигурацией Альфа Авто 5 и Альфа Авто 6 и порталом AUTOCRM. Данный модуль универсален. Позволяет работать с несколькими обменами AUTOCRM разных брендов в одной информационной базе в ручном и автоматическом режиме.

36000 руб.

03.08.2020    15749    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    17556    6    15    

13

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

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

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

12000 руб.

02.02.2021    16361    42    49    

23

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

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

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

8400 руб.

01.02.2019    25746    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    88587    160    215    

318
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. MORT32Ram 16 06.08.19 09:28 Сейчас в теме
Спасибо большое, отличная статья.
2. user953800 06.08.19 13:04 Сейчас в теме
Предложение: в макете "Начальная страница" вставить ссылку на загрузку JQuery с Google, а не с сервера IIS (если речь идет не о пользователях в локальной сети)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


Непонятно, почему часть кода по получению макетов в модуле http-сервиса, а часть в модуле менеджера обработки.
В модуле http-сервиса примерно такой код, для каждого url своя строка с названием макета:
Функция СтартПолучить(Запрос)
	Возврат СформироватьОтвет("НачальнаяСтраница");
КонецФункции

Функция СформироватьОтвет(ИмяМакета)
	Ответ = Новый HTTPСервисОтвет(200);	
	Ответ.УстановитьТелоИзСтроки(Обработки.HTTP_ОбработкаСервиса.ПолучитьТекстМакета(ИмяМакета));
	Возврат Ответ;
КонецФункции
Показать


В модуле менеджера обработки:
Функция ПолучитьТекстМакета(ИмяМакета) Экспорт
	Возврат ПолучитьМакет(ИмяМакета).ПолучитьТекст();
КонецФункции
4. Sedaiko 572 06.08.19 13:21 Сейчас в теме
(2) Статья описывает один из вариантов реализации. А вариантов может быт куча.
3. Razrab1c 41 06.08.19 13:18 Сейчас в теме
Правильно ли я понял, что для каждой страницы нужно будет повторять схему, или заморачиваться с параметрами?
5. Sedaiko 572 06.08.19 13:25 Сейчас в теме
(3) Это зависит от разработчика. Я обычно содержание одной страницы изменяю js-скриптом в зависимости от параметров ajax-запроса. В этой публикации этот метод и реализован.
6. blackhole321 1303 06.08.19 13:46 Сейчас в теме
Я правильно понимаю, что Вы храните javascript и css файлы (/JS и /CSS) как макеты в 1С? Если да, то с какой целью?
7. Sedaiko 572 06.08.19 13:59 Сейчас в теме
(6) Да храню. С той же целью, что и, например, хранятся правила обмена между зарплатой и бухгалтерией .
8. blackhole321 1303 06.08.19 14:07 Сейчас в теме
(7)Честно говоря не уловил связи между правилами обмена и файлами стилей :). У Вас же все равно я так понимаю на фронте php?
9. Sedaiko 572 06.08.19 14:12 Сейчас в теме
(8) Нет. php - это так, примочка для кеширования, работает как "шлюз". Все прекрасно работает и без нее. js и css нужно же где-то хранить и не потерять при переносе/развертывании конфигурации. Как вариант - их можно хранить и в теле страницы html, и внешних файлах.
10. blackhole321 1303 06.08.19 14:22 Сейчас в теме
(9)
и внешних файлах

Ну я собственно к этому и клоню.
В Вашем случае при хранении в 1С Вы создаете дополнительную бесполезную нагрузку на сервер приложений.
К тому же, как скажем верстальщик будет дорабатывать ваш фронт в обработке?
11. Sedaiko 572 06.08.19 14:29 Сейчас в теме
(10) я не предлагаю создавать полноценное веб-приложение на 1С на большое число соединений. Тут и лицензий не напасешся. Я просто описал один из вариантов реализации простого "фронта". И кстати, браузеры сами кэшируют js и css, указанные в <head>
Fox-trot; +1 Ответить
14. blackhole321 1303 06.08.19 15:33 Сейчас в теме
(11)
Ну тогда для чего это может быть на Ваш взгляд использовано?
Как пример того, что http-сервис может возвращать html и другую текстовую (и не только) информацию (js & css) - подойдет.
Как подход для создания чего-либо более сложного, чем hello world - не уверен, т.к. гораздо удобнее создавать и редактировать html, css и js каким-либо заточенным для этого редактором, а не ковыряться в макете. И это не зависит от количества соединений и лицензий, просто на мой взгляд предложенный подход неудобен.
17. Sedaiko 572 06.08.19 23:33 Сейчас в теме
(14) Здесь и не написано, что разрабатывать и отлаживать нужно в макете. Я, например, сначала все подготавливал отдельными фалами и редактором notepad++, а потом помещал все в макеты.
18. blackhole321 1303 07.08.19 13:49 Сейчас в теме
(17)Вот и получается, что Вам надо иметь файловую копию для отладки и разработки, которую Вы руками пофайлово синхронизировать со своими макетами. Вопрос в том зачем, если можно этого не делать.
21. Sedaiko 572 07.08.19 23:47 Сейчас в теме
(18) если большое и сложное веб-приложение с постоянной модернизацией, то согласен. А если что-то вроде ежедневного отчета для сотрудников или вывода какой-либо статистики на большой монитор, то зачем. Или если конфигурация тиражируется в филиалы, или РИБ
19. trntv 25 07.08.19 16:34 Сейчас в теме
(11) Никаких проблем с лицензиями нет. HTTP сервисы не используют лицензии.
20. Sedaiko 572 07.08.19 23:44 Сейчас в теме
22. oleg_km 08.08.19 09:19 Сейчас в теме
(20) Там используется такое понятие как "одновременно осуществляется доступ".
12. opx 794 06.08.19 15:09 Сейчас в теме
(10)
Все идет к тому, чтобы использовать некий обработчик шаблонов по типу как twig для php.
13. blackhole321 1303 06.08.19 15:20 Сейчас в теме
(12)Полностью согласен, это хорошая идея. Что-то типа:
https://infostart.ru/public/549791/
15. s_vidyakin 63 06.08.19 15:36 Сейчас в теме
Давно хочу написать статью про фронт на VueJS но пока найду время, кто нибудь уже напишет (
dimaskin; nicxxx; soltik; +3 Ответить
23. puzo 26.12.19 08:28 Сейчас в теме
(15) времени пока не появилось? хотелось бы прочитать про вуе + 1С. а тут вроде пока не было.
s_vidyakin; +1 Ответить
24. s_vidyakin 63 26.12.19 16:15 Сейчас в теме
(23) заготовку обработки набросал, Vue-страница отображается. Надо придумать пример полезный )
Для начала сделаю вывод какого-нибудь справочника через vue-компоненты и потом в статье напишу.
Если есть более интересные предложения, пишите
Кстати возможны 2 варианта - когда страница на форме как поле html-документа и когда отдельное веб-приложение на Vue выводит данные по http-сервису
Я пока 1й вариант сделал
16. Nikola23 696 06.08.19 19:49 Сейчас в теме
Правильное решение - статическое содержимое ранить в файлах. А запросами к http сервису получать динамическое содержимое.
Все остальные универсальные решения хороши только как пример для начинающих или "еще одна статья".
25. serverstar 62 12.10.20 18:02 Сейчас в теме
отличная статья, то что надо. кратко, понятно и по делу.
26. Mikeware 9 05.07.21 14:17 Сейчас в теме
пытаюсь повторить. возник вопрос:
а почему сервис может не публиковаться?
для публикации доступен только сервис из основной конфиги, из расширения - не вижу в списке.
27. Sedaiko 572 05.07.21 14:45 Сейчас в теме
(26) Я обычно публикую все
<ws pointEnableCommon="true" publishExtensionsByDefault="true">	
</ws>
<httpServices publishByDefault="true" publishExtensionsByDefault="true">	
</httpServices>
Мастером давно не пользуюсь, кофиги всегда вручную правлю:
Описание default.vrd
28. Mikeware 9 06.07.21 12:14 Сейчас в теме
(27) спасибо, но ручная публикация тоже не помогает.
"запрошеный УРЛ не найден на сервере"
перенес из расширения в основную конфигу - все равно УРЛ не найден.
вроде строку формирую по всем правилам.
как можно понять, где я накосячил?
Оставьте свое сообщение