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

06.08.19

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

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

Скачать файл

ВНИМАНИЕ: Файлы из Базы знаний - это исходный код разработки. Это примеры решения задач, шаблоны, заготовки, "строительные материалы" для учетной системы. Файлы ориентированы на специалистов 1С, которые могут разобраться в коде и оптимизировать программу для запуска в базе данных. Гарантии работоспособности нет. Возврата нет. Технической поддержки нет.

Наименование По подписке [?] Купить один файл
Расширение с примером использования HTTP-сервиса (проверенно на 8.3.14.1779):
.cfe 93,97Kb
26
26 Скачать (1 SM) Купить за 1 850 руб.

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

См. также

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

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

36000 руб.

03.08.2020    17782    19    22    

16

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

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

5040 руб.

04.05.2021    19848    13    17    

16

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

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

22656 руб.

25.05.2021    14422    42    8    

18

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

Расширение значительно упрощает написание API на 1С. Веб программисты получают простой и понятный доступ к 1С. Описание API создаётся автоматически и представляется в виде удобном как для человека, так и для программной обработки.

24000 руб.

27.09.2024    1172    1    0    

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

Ну я собственно к этому и клоню.
В Вашем случае при хранении в 1С Вы создаете дополнительную бесполезную нагрузку на сервер приложений.
К тому же, как скажем верстальщик будет дорабатывать ваш фронт в обработке?
11. Sedaiko 590 06.08.19 14:29 Сейчас в теме
(10) я не предлагаю создавать полноценное веб-приложение на 1С на большое число соединений. Тут и лицензий не напасешся. Я просто описал один из вариантов реализации простого "фронта". И кстати, браузеры сами кэшируют js и css, указанные в <head>
Fox-trot; +1 Ответить
14. blackhole321 1314 06.08.19 15:33 Сейчас в теме
(11)
Ну тогда для чего это может быть на Ваш взгляд использовано?
Как пример того, что http-сервис может возвращать html и другую текстовую (и не только) информацию (js & css) - подойдет.
Как подход для создания чего-либо более сложного, чем hello world - не уверен, т.к. гораздо удобнее создавать и редактировать html, css и js каким-либо заточенным для этого редактором, а не ковыряться в макете. И это не зависит от количества соединений и лицензий, просто на мой взгляд предложенный подход неудобен.
17. Sedaiko 590 06.08.19 23:33 Сейчас в теме
(14) Здесь и не написано, что разрабатывать и отлаживать нужно в макете. Я, например, сначала все подготавливал отдельными фалами и редактором notepad++, а потом помещал все в макеты.
18. blackhole321 1314 07.08.19 13:49 Сейчас в теме
(17)Вот и получается, что Вам надо иметь файловую копию для отладки и разработки, которую Вы руками пофайлово синхронизировать со своими макетами. Вопрос в том зачем, если можно этого не делать.
21. Sedaiko 590 07.08.19 23:47 Сейчас в теме
(18) если большое и сложное веб-приложение с постоянной модернизацией, то согласен. А если что-то вроде ежедневного отчета для сотрудников или вывода какой-либо статистики на большой монитор, то зачем. Или если конфигурация тиражируется в филиалы, или РИБ
19. trntv 25 07.08.19 16:34 Сейчас в теме
(11) Никаких проблем с лицензиями нет. HTTP сервисы не используют лицензии.
20. Sedaiko 590 07.08.19 23:44 Сейчас в теме
22. oleg_km 08.08.19 09:19 Сейчас в теме
(20) Там используется такое понятие как "одновременно осуществляется доступ".
12. opx 694 06.08.19 15:09 Сейчас в теме
(10)
Все идет к тому, чтобы использовать некий обработчик шаблонов по типу как twig для php.
13. blackhole321 1314 06.08.19 15:20 Сейчас в теме
(12)Полностью согласен, это хорошая идея. Что-то типа:
https://infostart.ru/public/549791/
15. s_vidyakin 68 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 68 26.12.19 16:15 Сейчас в теме
(23) заготовку обработки набросал, Vue-страница отображается. Надо придумать пример полезный )
Для начала сделаю вывод какого-нибудь справочника через vue-компоненты и потом в статье напишу.
Если есть более интересные предложения, пишите
Кстати возможны 2 варианта - когда страница на форме как поле html-документа и когда отдельное веб-приложение на Vue выводит данные по http-сервису
Я пока 1й вариант сделал
16. Nikola23 705 06.08.19 19:49 Сейчас в теме
Правильное решение - статическое содержимое ранить в файлах. А запросами к http сервису получать динамическое содержимое.
Все остальные универсальные решения хороши только как пример для начинающих или "еще одна статья".
25. serverstar 69 12.10.20 18:02 Сейчас в теме
отличная статья, то что надо. кратко, понятно и по делу.
26. Mikeware 9 05.07.21 14:17 Сейчас в теме
пытаюсь повторить. возник вопрос:
а почему сервис может не публиковаться?
для публикации доступен только сервис из основной конфиги, из расширения - не вижу в списке.
27. Sedaiko 590 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) спасибо, но ручная публикация тоже не помогает.
"запрошеный УРЛ не найден на сервере"
перенес из расширения в основную конфигу - все равно УРЛ не найден.
вроде строку формирую по всем правилам.
как можно понять, где я накосячил?
Оставьте свое сообщение