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

Публикация № 1103895

Обмен - Интеграция с WEB

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

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

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-скрипт

 

84

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

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

См. также

Специальные предложения

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

Ну я собственно к этому и клоню.
В Вашем случае при хранении в 1С Вы создаете дополнительную бесполезную нагрузку на сервер приложений.
К тому же, как скажем верстальщик будет дорабатывать ваш фронт в обработке?
11. Sedaiko 199 06.08.19 14:29 Сейчас в теме
(10) я не предлагаю создавать полноценное веб-приложение на 1С на большое число соединений. Тут и лицензий не напасешся. Я просто описал один из вариантов реализации простого "фронта". И кстати, браузеры сами кэшируют js и css, указанные в <head>
Fox-trot; +1 Ответить
14. blackhole321 1019 06.08.19 15:33 Сейчас в теме
(11)
Ну тогда для чего это может быть на Ваш взгляд использовано?
Как пример того, что http-сервис может возвращать html и другую текстовую (и не только) информацию (js & css) - подойдет.
Как подход для создания чего-либо более сложного, чем hello world - не уверен, т.к. гораздо удобнее создавать и редактировать html, css и js каким-либо заточенным для этого редактором, а не ковыряться в макете. И это не зависит от количества соединений и лицензий, просто на мой взгляд предложенный подход неудобен.
17. Sedaiko 199 06.08.19 23:33 Сейчас в теме
(14) Здесь и не написано, что разрабатывать и отлаживать нужно в макете. Я, например, сначала все подготавливал отдельными фалами и редактором notepad++, а потом помещал все в макеты.
18. blackhole321 1019 07.08.19 13:49 Сейчас в теме
(17)Вот и получается, что Вам надо иметь файловую копию для отладки и разработки, которую Вы руками пофайлово синхронизировать со своими макетами. Вопрос в том зачем, если можно этого не делать.
21. Sedaiko 199 07.08.19 23:47 Сейчас в теме
(18) если большое и сложное веб-приложение с постоянной модернизацией, то согласен. А если что-то вроде ежедневного отчета для сотрудников или вывода какой-либо статистики на большой монитор, то зачем. Или если конфигурация тиражируется в филиалы, или РИБ
19. trntv 23 07.08.19 16:34 Сейчас в теме
(11) Никаких проблем с лицензиями нет. HTTP сервисы не используют лицензии.
20. Sedaiko 199 07.08.19 23:44 Сейчас в теме
22. oleg_km 08.08.19 09:19 Сейчас в теме
(20) Там используется такое понятие как "одновременно осуществляется доступ".
12. opx 559 06.08.19 15:09 Сейчас в теме
(10)
Все идет к тому, чтобы использовать некий обработчик шаблонов по типу как twig для php.
13. blackhole321 1019 06.08.19 15:20 Сейчас в теме
(12)Полностью согласен, это хорошая идея. Что-то типа:
https://infostart.ru/public/549791/
15. s_vidyakin 61 06.08.19 15:36 Сейчас в теме
Давно хочу написать статью про фронт на VueJS но пока найду время, кто нибудь уже напишет (
dimaskin; nicxxx; soltik; +3 Ответить
16. Nikola23 413 06.08.19 19:49 Сейчас в теме
Правильное решение - статическое содержимое ранить в файлах. А запросами к http сервису получать динамическое содержимое.
Все остальные универсальные решения хороши только как пример для начинающих или "еще одна статья".
Оставьте свое сообщение