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

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

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

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

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

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

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

См. также

Получение html-кода страницы. JS из 1С

Статья Программист Нет файла v8 Бесплатно (free) Практика программирования WEB

Получение исходника страницы, выполнение произвольного js-кода. Теперь с WebKit от 1С.

18.02.2020    1145    Yashazz    0       

INFOSTART MEETUP Kazan. 13 марта 2020 г. Промо

Инфостарт продолжает путешествие по России. Следующая остановка - Казань. Тема мероприятия - управление и технологии автоматизации учета на платформе "1С: Предприятие". Ждем всех: докладчиков и участников! Стоимость участия - 5 500 рублей. Цена действительна до 30.01.2020

5 500

Отладка конфигурации в режиме веб-клиента

Статья Программист Нет файла v8 Windows Бесплатно (free) WEB

После очередного обновления платформы при попытке запуска отладки в веб-клиенте стало появляться сообщение. Собственно, до этого момента никогда веб-клиентом особо не пользовался и необходимости в отладке как-то не возникало. Данное сообщение заставило задуматься, что не так с отладкой в веб-клиенте и как ее собственно включить? Тот самый неловкий момент, когда программа просит обратиться к администратору, а администратор - это вы.

12.02.2020    1451    gamletspb    1       

Анализ работы внешней обработки сервиса МодульКасса применительно к задаче фискализации чеков при доставке

Статья Программист Нет файла v8 УТ11 Россия Бесплатно (free) Кассовые операции WEB

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

11.02.2020    445    malikov_pro    0       

Управление ИТ-проектами. Модуль 2: продвинутый онлайн-курс по классическим методам управления проектами. Вебинары проходят с 12 марта по 11 июня 2020 года. Промо

Продвинутый онлайн-курс по классическому управлению ИТ-проектами позволит слушателям освоить инструменты из PMBoK® и 1С:Технологии корпоративного внедрения и научиться их применять для проектов любого масштаба. Курс включает в себя 12 вебинаров и 12 видеолекции, разбор кейсов и рекомендации экспертов по проектам слушателей. Ведущая курса - Мария Темчина.

от 13000 рублей

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

Статья Программист Нет файла v8 Россия Бесплатно (free) WEB

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

28.01.2020    1095    malikov_pro    2       

Вариант реализации работы с сервисом Dadata применительно к конфигурации УТ 11.4 и подобным

Статья Программист Нет файла v8 УТ11 Россия Бесплатно (free) WEB

В статье описывается реализация получения данных с сервиса DaData при работе с формами справочников в конфигурации УТ 11 для дополнения информации по ФИО, ИНН, Адресу.

22.01.2020    885    malikov_pro    0       

​​​​​​​CorelDRAW Graphics Suite 2019 Промо

CorelDRAW – пакет профессиональных инструментов для редактирования фотографий, разработки дизайна, создания макетов страниц и векторных иллюстраций

Двусторонний обмен с поставщиком через интернет-магазин для реализации товаров с ответственного хранения (с 01.02.2020 "Партии" не используются)

Статья Программист Нет файла v8 УНФ Оптовая торговля, дистрибуция, логистика Россия УУ Windows Бесплатно (free) Файловые протоколы обмена, FTP WEB

Рассмотрены реализация двустороннего обмена данными с использованием API-сервиса сайта поставщика при продаже товаров со склада ответственного хранения, алгоритм движения товаров и обмена документами на примере конфигурации 1С: УНФ у партнера, который взаимодействует с поставщиком "ООО Пауэр-Интернэшнл-шины" - одним из крупнейших в России поставщиков автомобильных шин и дисков.

16.01.2020    1324    chkurs    0       

Подборка программ для взаимодействия с ЕГАИС Промо

ЕГАИС (Единая государственная автоматизированная информационная система) - автоматизированная система, предназначенная для государственного контроля за объёмом производства и оборота этилового спирта, алкогольной и спиртосодержащей продукции. Инфостарт рекомендует подборку проверенных решений для взаимодействия с системой.

Немного о интеграции с CRM AMO

Статья Программист Нет файла v8 1cv8.cf Бесплатно (free) WEB

Немного информации о том, как настроить интеграцию с CRM AMO. Пример функций для подключения к АМО и обновления заказа. Пример на основе API авторизации.

15.11.2019    1679    xxxAndricxxx    6       

Ещё немного о ИНН и сервисе DaData

Статья Программист Нет файла v8 1cv8.cf Бесплатно (free) WEB

Об использовании сервиса dadata и немного информации о возможностях получать данные по ИНН. Возможно, кому-то будет полезным.

14.11.2019    3821    xxxAndricxxx    21       

Подборка решений для взаимодействия со ФГИС «Меркурий» Промо

С 1 июля 2019 года все компании, участвующие в обороте товаров животного происхождения, должны перейти на электронную ветеринарную сертификацию (ЭВС) через ФГИС «Меркурий». Инфостарт предлагает подборку программ, связанных с этим изменением.

Вариант реализации клиента SOAP на примере получения остатков из MERLION

Статья Программист Нет файла v8 1cv8.cf Россия Бесплатно (free) WEB

В статье приведу пример клиента к сервису SOAP, функции которого принимают несколько значений типа строка или массив строк.

14.11.2019    1556    malikov_pro    0       

Разбор любого JSON-объекта в соответствующую структуру

Статья Программист Нет файла v8 1cv8.cf Бесплатно (free) Инструментарий разработчика WEB

Данная публикация предназначена разработчикам 1С, которым приходиться разбирать данные формата JSON. Выложенный пример кода создает объект типа Структура, полностью повторяющий структуру данных формата JSON.

13.11.2019    3458    user665435_al.windstorm    14       

Новый раздел на Инфостарте - Electronic Software Distribution Промо

Инфостарт напоминает: на нашем сайте можно купить не только ПО, связанное с 1С. В нашем арсенале – ESD-лицензии на ПО от ведущих вендоров: Microsoft, Kaspersky, ESET, Dr.Web, Аскон и другие.

  • Низкие цены, без скрытых платежей и наценок
  • Оперативная отгрузка
  • Возможность оплаты с личного счета (кешбек, обмен стартмани на рубли и т.п.)
  • Покупки идут в накопления для получения скидочных карт лояльности Silver (5%) и Gold (10%)

Проверка reCAPTCHA от Google на стороне HTTP-Сервиса

Статья Программист Нет файла v8 Россия Бесплатно (free) WEB

Код проверяет переданный токен reCAPTCHA от Google при вызове HTTP-Сервиса. Таким образом проверяем, отправил ли данные на наш HTTP-Сервис робот или реальный пользователь.

06.11.2019    2546    AVR    0       

Простой способ опубликовать базу 1C из дома в интернет, когда Ваш провайдер этого не обеспечивает (3G, 4G модем и т.п.)

Статья Системный администратор Нет файла v8 1cv8.cf Бесплатно (free) WEB Облачные сервисы, хостинг

Если у Вас возникла потребность опубликовать из дома во всемирную паутину базу 1С (например, для тестирования), в т.ч. интерфейс OData, HTTP или Web-сервисы, а интернет-провайдер (например, 3G Мегафон) не предоставляет возможности инициировать соединения извне, то в конце статьи Вы найдете простой, быстрый и условно-бесплатный способ это сделать.

14.10.2019    6594    uno-c    25       

1C:Предприятие для программистов: Расчетные задачи (зарплата). Онлайн-интенсив с 01 по 17 июня 2020 г. Промо

Данный онлайн-курс предусматривает изучение механизмов платформы “1С:Предприятие”, которые предназначены для автоматизации периодических расчетов, а именно - для расчета зарплаты. Курс предназначен для тех, кто уже имеет определенные навыки конфигурирования и программирования в системе “1С:Предприятие”, а также для опытных пользователей прикладного решения “1С:Зарплата и управление персоналом” и прочих прикладных решений, в которых реализован функционал расчета зарплаты.

4900 рублей

Самый примитивный HTTP-сервис в мире

Статья Программист Нет файла v8 Бесплатно (free) WEB

Пошаговый пример создания простейшего HTTP-сервиса, который генерирует HTML-страницу для поиска товара, а также реализует асинхронное получение данных из базы.

12.09.2019    11957    YPermitin    26       

Свой веб интерфейс к 1С: побеждаем CORS на IIS, сохраняя авторизацию

Статья Системный администратор Программист Нет файла v8 Windows Бесплатно (free) WEB Администрирование данных 1С

Если "веб морда" расположена не по тому же адресу, что и публикация 1С (что часто бывает, например, при разработке, публикация 1С на http://localhost/1c, а разрабатываемое веб-приложение на http://localhost:8080) или, например, мы заходим на веб приложение то по ip адресу, то по имени сервера, или просто веб сервер и сервер, на котором опубликована 1С - это разные сервера, то для большинства запросов от браузера к 1С срабатывает политика CORS, которая заключается в том, что браузер сначала посылает запрос OPTIONS, на который сервер должен ответить определенным образом, заголовками, содержащими разрешения, а потом уже (если разрешение есть), браузер посылает основной запрос. В случае, когда в публикации 1С (default.vrd) жестко прописан логин и пароль, разрулить ситуацию можно средствами 1С. В случае же, когда нужно сохранить авторизацию (или используется стандартный интерфейс odata), начинаются проблемы.

20.08.2019    6704    Fragster    9       

Готовые переносы данных из различных конфигураций 1C Промо

Рекомендуем готовые решения для переноса данных из различных конфигураций 1C. C техподдержкой от разработчиков и гарантией от Инфостарт.

Вывод отчетов из Штрих-М Торговое предприятие 5 на кассовое ПО Кассир 5 через веб-сервис

Статья Системный администратор Программист Нет файла v8 1cv8.cf Розничная и сетевая торговля (FMCG) Россия УУ Windows Розничная торговля Бесплатно (free) WEB

Универсальный механизм вывода отчетов товароучетной системы Штрих-М Торговое предприятие в кассовое ПО Кассир 5 посредством веб-сервиса.

14.08.2019    3030    Van2507    1       

Совсем простой обмен HTTP, 2 функции

Статья Программист Нет файла v8 Бесплатно (free) WEB

Функция для вызова рест-сервиса и функция для разбора результата. Быстро, просто, универсально.

12.08.2019    5905    Yashazz    15       

Онлайн-курс "Подготовка к экзамену 1С:Эксперт и 1С:Профессионал по технологическим вопросам" с 7 по 24 апреля 2020 г. Промо

На курсе вы получите практические навыки решения задач производительности 1С, в том числе характерных для высоконагруженных информационных систем (более 1000 пользователей). Подготовка к экзамену – только одна из составляющих курса. 70% слушателей приходят за знаниями, которые позволят расти и зарабатывать, делать сложные задачи на крупных проектах.

16450 рублей

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

Статья Программист Расширение (cfe) v8 1cv8.cf Абонемент ($m) WEB

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

1 стартмани

06.08.2019    8808    11    Sedaiko    24       

1Script.Web. Интернет-приложения на языке 1С

Статья Программист Нет файла v8 Бесплатно (free) WEB OneScript

Запросы рынка таковы, что любое современное клиент-серверное приложение должно иметь веб-интерфейс. Почему бы не писать такие приложения на языке 1С? Андрей Овсянкин расскажет о возможностях разработки веб-приложений на базе 1Script, рассмотрит перспективы этого направления и в качестве демонстрации покажет «боевое» веб-приложение на новом движке – кроссплатформенную консоль администрирования парка кластеров 1С.

20.05.2019    15469    Evil Beaver    32       

Программы для исполнения 488-ФЗ: Маркировка товаров Промо

1 января 2019 года вступил в силу ФЗ от 25.12.2018 № 488-ФЗ о единой информационной системе маркировки товаров с использованием контрольных (идентификационных) знаков, который позволяет проследить движение товара от производителя до конечного потребителя. Инфостарт предлагает подборку программ, связанных с применением 488-ФЗ и маркировкой товаров.

Неверные остатки на сайте битрикс

Статья Программист Нет файла v8 УТ11 Бесплатно (free) WEB

Исправление процедуры выгрузки остатков на сайт битрикс из УТ 11

25.04.2019    3534    distorshion    4       

Отправка файлов через SOAP. SOAP with attachments, MTOM

Статья Программист Нет файла v8 1cv8.cf Россия Бесплатно (free) WEB

В продолжение «своеобразной» поддержки 1С протокола SOAP, описанной в https://infostart.ru/public/965259/, опишу еще одну особенность. 1С не поддерживает возможность отправки файлов-вложений. Для решения этой проблемы пришлось самостоятельно писать формирование пакетов SOAP и разбор ответов сервера.

18.04.2019    5228    mysm    2       

Базовый курс по управлению ИТ-проектами. Курс проходит с 26 февраля по 22 апреля 2020 года. Промо

Отличительная черта курса - органичное сочетание трех вещей: 1.Теория проектного управления (PMI®+Agile Alliance+Российские ГОСТ+Методологии от 1С); 2. Опыт внедрения продуктов 1С (опыт франчайзи и успешных компаний + тренды Infostart Event и Agile Days); 3. Разбор реальных проблем и рекомендации экспертов по проектам слушателей. Мы будем фиксироваться на тех инструментах, которые реально оказываются полезными в практике руководителей проектов внедрения. Ведущая курса - Мария Темчина.

от 11000 рублей

HTML-клиент у конфигурации 1С

Статья Программист Нет файла v8 Бесплатно (free) WEB

Приветствую. В этой публикации опишу свой опыт создания html-клиента для конфигурации 1С с помощью http-сервисов. HTML-клиент в этом случае - это frontend (html + css+ js), который генерирует и выдает пользователю конфигурация + backend, который тоже реализован в этой же конфигурации.

17.04.2019    13790    Smaylukk    119       

Парсинг сайтов из 1С на примере ломбарды.рф с помощью XPATH для ДокументDOM

Статья Программист Нет файла v8 Бесплатно (free) WEB

На всякую хитрую гайку всегда найдется болт с резьбой (с)

01.04.2019    10972    starik-2005    33       

Базовый курс по обмену данными в системе 1С:Предприятие. Онлайн-интенсив с 12 по 28 мая 2020 г. Промо

Данный онлайн-курс предусматривает изучение механизмов платформы “1С:Предприятие”, обеспечивающих обмен данными между различными прикладными 1С-решениями и взаимодействие с другими информационными системами. Курс предназначен для тех, кто уже имеет определенные навыки конфигурирования и программирования в системе “1С:Предприятие”.

5500 рублей

Логируй больше! 1С + UPD + GELF + Graylog

Статья Системный администратор Программист Нет файла v8 Windows Бесплатно (free) Практика программирования Администрирование данных 1С WEB Разработка

Наличие производительной платформы управления логами - это жизненно важный элемент в ландшафте систем с высокой активностью. Рассмотрим один из подходов логирования активности систем на платформе 1С в Graylog.

26.02.2019    8027    Lars Ulrich    15