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

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

Разработка - Системная интеграция - Интеграция с WEB

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

В статье описан способ создания "фронтенда" на 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-скрипт

 

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

Наименование Файл Версия Размер
Расширение с примером использования HTTP-сервиса (проверенно на 8.3.14.1779):

.cfe 93,97Kb
06.08.19
17
.cfe 93,97Kb 17 Скачать

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

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

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

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

См. также

Hello world на metadata.js Промо

Инструментарий разработчика WEB Мобильная разработка v8 1cv8.cf Абонемент ($m)

Про браузерные offline-first приложения можно написать миллионы слов. Сэкономлю своё и ваше время и перейду сразу к делу. В статье не будет рекламы и агитации за новые технологии, не будет критики традиционных или попсовых решений. Рассмотрим по шагам разработку простейшей программы на metadata.js. Постараюсь сделать акцент не на том «как это сделано», а «почему сделано именно так»

1 стартмани

11.08.2016    56921    unpete    208    

Перенос всех логов в Elasticsearch

WEB v8 Абонемент ($m)

В качестве стандартного места хранения логов в "1С:Предприятие" используется Журнал регистрации. Также часто для хранения служебных событий создают специальные Регистры сведений. Но у этих решений есть свои недостатки. В статье описан подход для хранения любых логов в самой популярной свободной поисковой системе Elasticsearch.

1 стартмани

15.07.2020    1760    kuleshov.x    4    

Выбираем российского провайдера для интеграции с WhatsApp

WEB Интеграция v8 Россия Абонемент ($m)

Собственно, почему выбираем именно провайдера и почему российского? WhatsApp, создавая свое API, преследовал две цели - делать деньги и минимизировать спам. И чтобы убить сразу двух зайцев, было принято решение предлагать API исключительно через партнеров. Ну а вопрос по поводу российского партнера скорее уже риторический. И не только из-за курса рубля, но и из-за таланта работать с российскими телефонными номерами, коим одарены далеко не все провайдеры. Между тем статья не претендует на всесторонний анализ всех возможностей всех провайдеров. Мы копнем лишь верхушку айсберга этого немаленького рынка.

1 стартмани

19.05.2020    3446    ripreal1    1    

Telegram bot API - разбор документации с примерами

WEB v8 Абонемент ($m)

Перевод документации на язык 1С.

1 стартмани

06.04.2020    29518    leongl    43    

Демо связи веб сервисов 1С и php Промо

Практика программирования Математика и алгоритмы WEB v8 1cv8.cf Абонемент ($m)

Демонстрация обращения к веб сервису 1С из php. Пример простейший, уровня hello world. Дана одна страница и информационная база 1С с одним справочником и одним веб сервисом. Веб сервис выдаёт содержимое справочника по запросу странички.

1 стартмани

19.07.2013    32008    Трактор    20    

Синтез речи из текста с помощью Яндекс SpeechKit

WEB v8 1cv8.cf Абонемент ($m)

В статье описан процесс подключения Яндекс SpeechKit API и программная реализация синтеза речи из текста с помощью этого API. Тестировалось на релизе платформы 8.3.16.1224. Может использоваться в любой конфигурации. Синтез речи может использоваться для самых разных целей, в моём случае потребовалось перевести лекции из текстовых файлов в звук

1 стартмани

05.04.2020    1525    m0zg153    2    

Вариант реализации REST API для 1С-Битрикс Управление сайтом

WEB v8 Россия Абонемент ($m)

В статье опишу вариант обмена 1С УТ 11.4 и 1С-Битрикс управление сайтом с иcпользованием компонентов Symfony, в качестве примера обмен данными по товарам.

1 стартмани

28.01.2020    3983    malikov_pro    2    

"Живые" картинки со Snap.SVG

Практика программирования WEB Работа с интерфейсом v8 Абонемент ($m)

В статье рассмотрен пример использования http-сервисов для визуализации данных

1 стартмани

24.10.2019    12775    blackhole321    7    

Примеры пользования web сервисов 1С из браузера Промо

WEB Практика программирования v8 1cv8.cf Абонемент ($m)

Даны примеры реализации доступа к web сервисам 1С из браузера. Примеры web сервисов, а также javascript'ы для доступа к этим сервисам. AJAX доступ к 1С.

1 стартмани

29.06.2008    147471    Трактор    233    

Интеграция 1С с сайтом (магазином) WordPress (WooCommerce) с помощью Rest API сайта. Часть 1. Авторизация

WEB v8 Абонемент ($m)

Интеграция 1С с сайтом (магазином) WordPress (WooCommerce) с помощью функционала Rest API предоставляемого платформой (CMS) WordPress (WooCommerce). Без дополнительных приложений на PHP/вставьте сюда любой другой язык программирования/.

1 стартмани

12.10.2019    22115    osivv    31    

АИТП. Автоматизируем управление ресурсами на примере Яндекс.Почта для домена

WEB v8 1cv8.cf Абонемент ($m)

В статье демонстрируется использование программного пакета АИТП для автоматизации предоставления ИТ-ресурсов сотрудникам на примере управления почтовыми ящиками Яндекс.Почта для домена.

1 стартмани

26.08.2019    4147    blackhole321    4    

Использование HTTP-сервиса для создания "фронтенда" HTML/CSS/jQuery. Продолжение

WEB v8 1cv8.cf Бесплатно (free)

Получение изображений из информационной базы и отправка файлов через "фронт" на HTML/CSS/JS.

08.08.2019    8099    Sedaiko    1    

Обмен с интернет-магазином на платформе DOCPART

WEB Оптовая торговля Розничная торговля Оптовая торговля Розничная торговля v8 1cv8.cf Абонемент ($m)

В настоящее время существует множество платформ для создания интернет-магазинов. Удобные и не очень, платные или бесплатные. У каждого решения найдутся свои сторонники, но наличие оперативного обмена с учётной системой важно для любой платформы. В этой публикации мы рассмотрим одну из популярных платформ для создания интернет-магазина по продаже автозапчастей Docpart и организацию обмена данными с ней.

10 стартмани

04.07.2019    4531    Johny_v    14    

1C + Python + Django Rest Framework + Vue.js. Опыт несложной full-stack разработки

Практика программирования Внешние источники данных Обмен через XML WEB Разработка v8 1cv8.cf Абонемент ($m)

В этой статье мы рассмотрим путь и основные моменты создания небольшого вэб-сервиса, который мы называем "Онлайн Прайс-лист". Выгрузка из 1С, бэкенд, фронтенд, получение заказов в 1С.

1 стартмани

22.04.2019    31183    riposte    63    

Подключение к REST API через OAuth протокол из 1С

WEB v8 1cv8.cf Абонемент ($m)

В статье описаны варианты подключения И решение граблей по подключению к REST API через протокол OAuth 2.0 из 1С. При разработке такого подключения для получения данных и загрузки в базу 1С я столкнулся с некоторыми проблемами, решил их и хочу поделиться этими наработками.

1 стартмани

06.09.2018    11584    chemezov    11    

HTTP Сервисы: Путь к своему сервису. Часть 1

Практика программирования WEB v8 1cv8.cf Абонемент ($m)

Уже много было написано про http-сервисы, но то и дело всплывают «Новые» статьи по обмену между базами V8 по COM, что «Немножко» удивляет. Решил внести свои 5 копеек, поработаем с http-сервисом.

1 стартмани

15.07.2018    77434    dsdred    24    

А чё это вы здесь делаете, а?

WEB v8 1cv8.cf Абонемент ($m)

Разработчикам тиражных обработок близка и понятна проблема обратной связи с пользователем. Много важного и полезного можно почерпнуть, зная, что делает бухгалтер, который запустил обработку. В большом мире вэба сбор статистики на сайте дело привычное и даже обязательное. Эта статья покажет практику применения инструментов сбора статистики из мира веба для обработок на платформе 1С:Предприятие.

1 стартмани

21.01.2018    23378    infosoft-v    42    

Пример заполнения/создания файла XML из XSD схемы, используя XDTO

Обмен через XML WEB v8 1cv8.cf Абонемент ($m)

Добрый день, коллеги! Наконец-то дошли руки написать сию статью. Хочу поделиться своим опытом по разбору xsd схемы используя Фабрику XDTO, а также связанным с этим XML файлом. Думаю, наверняка кому-то понадобится.

1 стартмани

21.12.2017    44343    sandybaev    24    

Получение данных из Wialon Hosting через HTTP запросы (Remote API)

WEB v8 1cv8.cf Автомобили, автосервисы Россия Абонемент ($m)

Статья будет полезна для быстрого старта работы с Wialon Hosting. Здесь я опишу основные принципы работы с системой Wialon через Remote API.

1 стартмани

12.09.2017    20831    maxopik2    20    

Google OAuth и мобильное приложение

Мобильная разработка Обмен данными 1С Внешние источники данных WEB v8 v8::Mobile 1cv8.cf Абонемент ($m)

Об аутентификации для работы с сервисами google из мобильного или настольного приложения

1 стартмани

29.08.2017    11412    stveans@gmail.com    3    

Заполнение ОГРН с использованием Инструментов разработчика

Обработка справочников WEB v8 Россия Абонемент ($m)

Вот и до нашей организации добралось требование указывать в отчетности для ГлавКонтроля ОГРН контрагента. Как всегда, задача возникла внезапно, и решить ее нужно было "вчера".

1 стартмани

14.04.2017    6577    vsuh    0    

Передача большого количества объектов через Web-сервисы

WEB v8 УТ11 Абонемент ($m)

Один из вариантов передачи большого количества объектов при использовании Web-сервисов.

1 стартмани

31.01.2017    15243    SinglCOOLer    14    

Пошаговая инструкция настройки web-сервисов для 1Сv8.3 и IIS 8.5

Практика программирования WEB v8 1cv8.cf Абонемент ($m)

Пошаговая инструкция настройки web-сервисов для 1Сv8.3 и IIS 8.5. Windows Server 2012 R2 Standard, 1С:Предприятие 8.3 (8.3.4.465)

30.04.2014    364967    alexstey    99    

Пошаговая инструкция по созданию мобильного приложения для iOS с обменом через WEB сервисы Часть II.

Практика программирования WEB v8 Абонемент ($m)

Пошаговая инструкция по созданию мобильного приложения для iOS с обменом через WEB сервисы Часть II.

1 стартмани

16.05.2013    17928    amrec.ru    11    

Пошаговая инструкция по созданию мобильного приложения для iOS (без xcode) с обменом через WEB сервисы Часть I.

Практика программирования WEB Мобильная разработка v8 1cv8.cf Россия Абонемент ($m)

Пошаговая инструкция по созданию мобильного приложения для iOS с обменом через WEB сервисы Часть I.

1 стартмани

12.05.2013    38851    amrec.ru    26