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

08.08.19

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

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

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

Кроме текстового содержимого можно выводить изображения и двоичные файлы для скачивания. Для этого создадим еще один шаблон URL src с двумя методами GET и POST и обработчик к нему. В модуль менеджера обработки включим  функцию для получения изображений:

 
Новый шаблон URL и функции
Модуль HTTP-сервиса
Функция srcПолучить(Запрос)
	Ответ = Новый HTTPСервисОтвет(200);
	Если Запрос.ПараметрыURL["BIN"]="1" Тогда
		Ответ.УстановитьТелоИзДвоичныхДанных(Обработки.HTTP_ОбработкаСервиса.ПолучитьДвоичныеДанные(Запрос.ПараметрыURL["ID_SRC"],Ложь));
	Иначе
		Ответ.УстановитьТелоИзСтроки(Обработки.HTTP_ОбработкаСервиса.ПолучитьДвоичныеДанные(Запрос.ПараметрыURL["ID_SRC"],Истина));
	КонецЕсли;
	Возврат Ответ;
КонецФункции
Модуль менеджера обработки HTTP_ОбработкаСервиса
Функция ПолучитьДвоичныеДанные(Идентификатор,Base64=Ложь) Экспорт
	Если Base64 Тогда
		возврат Base64Строка(БиблиотекаКартинок[Идентификатор].ПолучитьДвоичныеДанные());
	Иначе
		возврат БиблиотекаКартинок[Идентификатор].ПолучитьДвоичныеДанные();
	КонецЕсли;	
КонецФункции

Здесь используется сложный шаблон URL чтобы передать два параметра - формат получения картинки (двоичный или строкой base64) и имя картинки в библиотеке картинок.

Включим в конфигурацию две общие картинки МояКартинка1 и МояКартинка2.

Дополним текст HTML начальной страницы "Получить картинку" и изменим макет JS, добавив два фрагмента:

 
Текст HTML и JS
<!-- Статическая картинка при загрузке страницы-->
<div><img src="src/1/МояКартинка1"></div>


<!-- Кнопка и область для интерактивной загрузки изображения-->
<button type="submit" 
        id="ImgButton" 
        style="top: 8px; left: 0px; height: 21px; width: 150px;" 
        _onclick="GetImage('МояКартинка2')">
     Получить картинку
</button>
<div id="content_img">

</div>
Если начальную страницу формируем из макета "HTML документ", то добавим в $(document).ready фрагмент для инициализации
$('img').each(function(i,elem) {
		$(elem).attr('src',cur_url+"/"+$(elem).attr('src'))
	});
И функцию для получения изображения
function GetImage(img_name)
{
$.ajax({
	  type: "POST",
	  url: cur_url+"/src/2/"+img_name,
	  cache: false,
	  success: function(res){
		 $("#content_img").html("<img src='data:image/png;base64,"+res+"'>");
	   }
    });
}

Изменять атрибут src на абсолютный необходимо в случае, если вы использовали для хранения макет "HTML Документ", так как при вызове метода ПолучитьТекст() 1С подставляет в заголовок страницы фиксированный абсолютный адрес (что-то вроде <base href="v8config://811089b6-4d46-4837-8d19-b992f162542f/mdobject/id07b27b2d-6393-47c9-8641-307eadff3798").

Перезапускаем  веб-сервер и обновим страницу. При загрузке сразу же отобразится изображение МояКартинка1. При нажатии кнопки "Получить картинку" зарузится МояКартинка2, без полной загрузки страницы. Хочу обратить внимание, что вторая картинка приходит с сервера в виде Base64-строки. Таким способом можно в качестве результата возвращать сразу несколько значений в формате JSON или XML, например название, цену, количество и изображение товара (см. ajax-запрос из первой части)


Для отправки файла из браузера на сервер также будем использовать формат base64.

Добавим следующий текст HTML и функцию JavaScript.

 
 Загрузка файлов: HTML и JS
HTML
<div>
	<input type="file" id="file">
	<button
	<div id="status"></div>
</div>
JavaScript
function SendFile()
{
   var reader = new FileReader();
   reader.readAsDataURL($("#file")[0].files[0]);
   reader.onload = function () {

	  $.ajax({
		  type: "POST",
		  url: cur_url+"/ajax",
		  data: JSON.stringify(
                  {action: "SendFile", 
		  		   name: $("#file")[0].files[0].name,
		  		   file: reader.result.split('base64,')[1]
		  		  }),
		  cache: false,
		  success: function(html){
			 $("#status").html(html);
		   }
	    }); 
   };
}

И изменим созданную в первой части функцию в модуле менеджера обработки:

 
 Обработки.HTTP_ОбработкаСервиса.ОбработатьЗапросAjax()
Функция ОбработатьЗапросAjax(СтруктураJSON) Экспорт
	Если СтруктураJSON.action="SendFile" Тогда
		Попытка
			ДД=Base64Значение(СтруктураJSON.file);
			ДД.Записать("D:\"+СтруктураJSON.name);
			Контент="<font color='green'>Файл успешно Принят</font>";
		Исключение
			Контент="<font color='red'>"+ОписаниеОшибки()+"</font>";			
		КонецПопытки;
	Иначе
		Контент="Вы ввели <b>"+
		СтруктураJSON.t+
		"</b>";
	КонецЕсли;
	возврат Контент;
КонецФункции

Теперь функция ОбработатьЗапросAJAX() будет обрабатывать данные и возвращать различный результат в зависимости от значения свойства action. В этом примере для простоты файл записывается из двоичных данных на диск. Однако можно использовать, например, процедура БСП РаботаСФайлами.ДобавитьФайл() для записи файла в информационную базу.


Заключение.

Описанный вариант использования HTTP-сервиса можно использовать для простых задач, например, заполнение анкет и отправка файла с мобильного устройства для обработки, вывод какого-нибудь отчета/диаграммы на большой монитор с обновлением через определенный интервал и т.п. Более сложные веб-приложения лучше реализовать другими средствами, а http-сервис использовать только для обмена

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

См. также

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

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

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

36000 руб.

03.08.2020    15750    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    17558    6    15    

13

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

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

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

12000 руб.

02.02.2021    16364    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    88592    160    215    

318
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. osivv 265 09.08.19 23:00 Сейчас в теме
Вот это да, сколько разномастного кода... Так и не понял для чего это всё.
triviumfan; +1 Ответить
2. Diversus 2307 16.12.20 12:09 Сейчас в теме
А зачем картинку так сложно получать?
В тексте пишите:
<img src="ПУТЬ_К_HTTP_СЕРВИСУ/img.png">
В сервисе ловите, если это img.png, то возвращаете двоичные данные и картинка отрисовывается сама браузером.
Вот и все.
Зачем эти сложности?
Я статью опубликовал на эту тему:
Универсальный HTTP-сервис на платформе 1С, аля HTTP-сервер с примером
Посмотрите, там такой же принцип работы о котором я говорю.
3. Sedaiko 572 16.12.20 13:07 Сейчас в теме
(2) ПУТЬ_К_HTTP_СЕРВИСУ в src нежелателен, а то в случае использование обратного прокси (а по хорошему его и нужно использовать для доступа из вне) картинка потеряется. тогда уже относительный путь src='img.png'
4. Diversus 2307 16.12.20 13:33 Сейчас в теме
(3) Да, хорошее замечание. Еще кстати, с картинкой можно передавать заголовки, что-то типа:
Ответ.Заголовки.Вставить("Cache-Control", "public, max-age=36000");

В этом случае сам браузер будет кэшировать картинку. Это позволяет существенно сократить число запросов к сервису.
Оставьте свое сообщение