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

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

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

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

50
Получение изображений из информационной базы и отправка файлов через "фронт" на 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-сервис использовать только для обмена

50

См. также

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

Комментарии
Избранное Подписка Сортировка: Древо
1. osivv 38 09.08.19 23:00 Сейчас в теме
Вот это да, сколько разномастного кода... Так и не понял для чего это всё.
Оставьте свое сообщение