Работаем с HTTP сервисами 1С. MVC, Twig и прочие радости Web разработчика

Публикация № 1546655 09.11.21

Интеграция с оборудованием и сервисами - WEB-интеграция

На Инфостарте уже достаточно много статей о том, как начать пользоваться HTTP сервисами и как сделать "Hello world" на странице браузера средствами 1С. Но что дальше? Если вы пробовали сделать хотя бы небольшой сайт в 1С - наверняка знаете, с какими сложностями можно столкнуться. Понимая все эти нюансы разработки сайтов в 1С, у меня и поселилась идея сделать эту разработку. Эдакое превращение разработки HTML страниц средствами 1С в полноценное MVC

Для работы требуется версия платформы не ниже 8.3.14.1565

От идеи к реализации

Так как я тесно связан с web разработкой мне всегда не хватало в 1С шаблонизатора. Такого как Twig, например. И mvc не помешал бы, т.к. mvc дает четкую структуру связывания запросов к базе, обработки полученных данных и вывода этих данных в HTML

Что делает шаблонизатор?

Шаблонизатор дает возможность писать HTML код с использованием циклов, условий и переменных. Если писать на чистом 1С, то у нас 2 варианта:

1. Делать составную строку кодом по типу
 

СтрокаКодом = СтрокаКодом + "<div>";
Для каждого Стр из Массив Цикл
    СтрокаКодом = СтрокаКодом + "<h1>" + Стр.Наименование + "</h1>;      
КонецЦикла;
СтрокаКодом = СтрокаКодом + "<div>";

Из минусов тут очевидно, что когда HTML становится много - код перестает быть читаемым
2. Сделать макет, в котором заключить участки кода в какой-нибудь специальный тэг и потом заменять их через СтрЗаменить();
Это уже ближе к шаблонизатору, но все равно немного не то.
Из минусов можно выделить так же читаемость кода, сложность разработки и отсутствие стандарта.

Шаблонизатор и призван сделать код читаемым, упростить разработку и сделать стандарт, которого могут придерживаться другие разработчики. Тем самым процесс погружения нового разработчика в "что же тут понаписали" будет проходить быстрее и проще.

Что делает mvc?

mvc - это аббревиатура (model, view, controller). Controller получает данные из model и передает их во view.
Из плюсов mvc можно отметить четкую и понятную структуру. Это стандарт, которого придерживаются почти все web разработчики и это дает им возможность лучше понимать других разработчиков.
Сделать подобие mvc в метаданных 1С достаточно просто. Каждый controller оборачиваем в обработку, макет обработки и общий модуль. Но когда контроллеров будет очень много - опять будет сложно в них ориентироваться.

В итоге было решено сделать mvc на справочнике с 2 уровнями иерархии. Группа mvc и сам элемент mvc.
В справочнике есть табличная часть "Функции". В этой табличной части есть реквизиты "Запрос", "Алгоритм" и "Макет"

Если сложить аббревиатуру - получается зам, а не mvc )) Но это не меняет сути. У нас полноценный и понятный mvc

 

 

Менять сайт без обновления конфигурации?

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

 

 

Делаем разработку сайта удобной и понятной

Параметр запроса - элемент справочника

Основным справочником (он же набор mvc элементов) служит "HTTP Помощник настройки". Когда мы в браузере открываем страницу, то в параметрах должны указать route (типа http://192.168.1.15/erp/hs/serv/shablon?route=common/home). Этот параметр и будет служить определением того элемента справочника, который мы получим в браузере.

Если указано common/home - значит будет выбран элемент с родителем common и наименованием route
По умолчанию будет отрабатывать функция index из табличной части. А можно в переменной route указать common/home/getlist (чувствителен к регистру). Тогда будет выполняться функция getlist

Запросы (model)

Тут и в контроллерах буду использовать консоль кода (//catalog.maxima.pro/public/1266087/). Благодаря автору этой консоли  мы имеем подсветку синтаксиса и всплывающие подсказки в режиме предприятия. Ну и плюс я сэкономил кучу времени на разработке.

 

 

Тут все просто. Каждая функция может иметь запрос, а может и не иметь. Все зависит от того хотим ли мы обращаться к базе данных во время выполнения функции.
Есть параметры запроса, которые сразу можно установить.

 

Алгоритм (контроллер)

 

 

Тут немного сложнее. Попробую объяснить что тут надо делать максимально емко и понятно.

Прежде всего мы можем обращаться к запросу, если он у нас был. Устанавливать параметры, делать выборку и обходить ее. Так мы подготавливаем данные для макета.

Все данные для макета хранятся в переменной Данные - тип Структура.
В значениях этой структуры могут быть только примитивные типы (строка, число, булево) или массивы.
Если тип массив - это обязательно массив структур.
Вначале это может показаться неудобно, но у такого подхода есть свое объяснение.
В макетах (twig) мы будем обращаться по имени ко всем переменным, которые мы подготовили.
Ну и к этому достаточно быстро привыкаешь.
Например нам нужно вывести группы и элементы справочника, тогда код будет примерно таким:

МассивГрупп = Новый Массив;
Пока ВыборкаГрупп.Следующий() Цикл
    
    МассивЭлементов = Новый Массив;
    ВыборкаЭлементов = ВыборкаГрупп.Выбрать();
    Пока ВыборкаЭлементов .Следующий() Цикл

        СтруктураЭлемента = Новый Структура("name, code", ВыборкаЭлементов.Наименование, ВыборкаЭлементов.Код);
        МассивЭлементов.Добавить(СтруктураЭлемента);

    КонецЦикла;
    
    СтруктураГруппы = Новый Структура("name, code, children", ВыборкаГрупп.Наименование, ВыборкаГрупп.Код, МассивЭлементов);
    МассивГрупп.Добавить(СтруктураГруппы);
  
КонецЦикла;

Данные.Вставить("groups", МассивГрупп);

Еще предусмотрел возможность обращаться к различным функциям внутри алгоритма.
Например, шапка на всех страницах будет одинаковая, поэтому нам достаточно один раз ее описать, а потом дергать ее для каждой страницы так:

HTMLТекстШапки = ВыполнитьФункцию("common/header", GetЗапрос, PostЗапрос);
Данные.Вставить("header", HTMLТекстШапки); 

Внутри алгоритма нам доступны переменные GetЗапрос и PostЗапрос.
Так мы можем определять тип запроса и считывать параметры запроса через GetЗапрос.ПараметрыЗапроса и PostЗапрос.ПараметрыЗапроса соответственно.

 

Макет (view)

 

 

Тут я уже использовал редактор ace (https://ace.c9.io/). Для того, чтобы была подсветка HTML и Twig.

А еще мне нравится, как он сам закрывает теги. Что тоже сильно сокращает время разработки.

Ну и для примера возьмем вывод групп и элементов, которые получили выше

{% for group in groups %}
  <ul>{{ group.name }}
    {% for child in group.children %}
      <li>{{ child.name }}{% if group.name = "Плюсы" %}+++{% endif %}</li>
    {% endfor %}
  </ul>
{% endfor %}

Twig конечно имеет огромный функционал, но я поленился переносить весь и перенес только основное - циклы, условия, переменные. Этим можете пользоваться. Остальное - мне пока не пригождалось.

 

Немного рекомендаций вместо заключения

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

Лично я в разработке использую почти всегда след. набор:

  • jquery
  • bootstrap
  • font-awesome

И еще опишу то, как я подключаю все это.

  1. Кладем на сервер, в корень сайта (у меня это C:\Apache24\htdocs) или раскладываем по папкам стили и скрипты
  2. В макете пишем <script src="/bootstrap.min.js" type="text/javascript"></script> для всех скриптов и стилей.
    src тут начинается со слеша. Это означает, что скрипт будет подгружаться из корня
  3. Картинки тоже определите в папку на сервере. Если картинку получаете из справочника номенклатуры - можете проверять ее через "Файл.Существует()", например и не перезаписывать каждый раз. В base64 не рекомендую вставлять, т.к. по опыту это тормозит и сам HTML код готовой страницы становиться менее читаемым.

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

Наименование Файл Версия Размер
Работаем с HTTP сервисами 1С. MVC, Twig и прочие радости Web разработчика:

.cfe 1,40Mb
3
.cfe 1,40Mb 3 Скачать

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

Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. Steelvan 141 09.11.21 12:51 Сейчас в теме
Статья-рекурсия :)

Чтобы ее понять, надо разбираться в вебе.
Чтобы разбираться в вебе, надо понять статью.

Шутка :)

---

Я пользую следующую стопку библиотек и каркасов для фронта:
*) Tailwind 2;
*) jquery;
*) knockout.js;
dreamadv; +1 Ответить
2. opx 722 09.11.21 13:03 Сейчас в теме
(1) Старался объяснить все доходчиво, но видимо получилось не очень.
Хороший набор, наверное. Не пользовался. Он в какой-то CMS применяется?
3. Steelvan 141 09.11.21 18:16 Сейчас в теме
Я СУСками (системами управления содержимым) не пользуюсь.
Это просто набор, которым я делаю фронт.

Кстати, этот шаблонщик смотрели ?
https://infostart.ru/public/549791/

Вполне и на 1Сном языке.
4. opx 722 10.11.21 14:09 Сейчас в теме
(3) Да. Видел.
Производительность у него не очень.
Да и хотелось больше стандарта.
Делать подобие twig с языком 1С как-то мне не очень нравится это
Оставьте свое сообщение

См. также

SALE! 10%

Из Excel в 1С "одним нажатием": УПД, ТОРГ-12, отчеты комиссионеров (ОЗОН, Вайлдберриз), заказы, счета, прайсы, номенклатура (УТ10-11.х, БП2-3.х, УПП1.3, ERP2.х, КА1.1-2.х, Розница1-2.х, УНФ1.х, УТП2.х, Альфа-Авто 5.х, Автосервис 1.х, Далион УМ 2.хх) Промо

Загрузка и выгрузка в Excel Обработка документов Оптовая торговля Оптовая торговля v8 v8::УФ 1cv8.cf БУ УУ Платные (руб)

Универсальная обработка для загрузки документов из Excel в 1С. Не требует указания параметров (номера колонок, номер первой строки таблицы и т.д.) и предварительной настройки. Просто выбираете файл Excel, документ 1С и нажимаете кнопку "Загрузить". Обработка сама находит таблицу в файле Excel, необходимые для загрузки данные в ней (номенклатура, количество, НДС, цена, сумма) и загружает ее в 1С. Вместе с номенклатурой может найти контрагента, номер и дату документа, штрих-коды, серии ГТД, страну и т.д. Распознает документы ЛЮБОЙ ФОРМЫ (УПД, ТОРГ-12, заказ, отчет комиссионера и т.д.). Не требует MS Office. Содержит модуль работы с электронной почтой. Для поиска таблиц используются методы эвристического поиска. Загружает только то, что нужно, т.е. пропускает повторы шапки таблицы, заголовки, промежуточные итоги, подписи и т.д. Работает во всех основных конфигурациях 1С8. При покупке лицензии вы получите 1 месяц бесплатной тех.поддержки.

6000 5400 руб.

09.11.2016    160014    583    800    

Загрузка данных из 1С МиниДеньги в 1С:Деньги 8, редакция 2.0

Обмен через XML Перенос данных из 1C8 в 1C8 v8 Домашние учет и финансы УУ Абонемент ($m)

Обработка для первоначальной загрузки данных (справочников и операций) в настольную программу 1С:Деньги 8, редакция 2.0 из файлы резервной копии мобильной программы 1С Миниденьги.

2 стартмани

01.10.2015    17411    15    Claus32    5    

Редактор чеков ККМ Розница 2.0 - 2.3

Обработка документов Кассовые операции Розничная торговля Кассовые операции Розничная торговля v8 Розница Розничная и сетевая торговля (FMCG) Рестораны, кафе и фаст-фуд БУ НУ Абонемент ($m)

Обработка чеков ККМ списком (редактирование, удаление, ...). Переформирование ОРП, связь чеков с ОРП. Редактирование времени КС. Редактирование суммы и времени выемки.

1 стартмани

06.08.2015    61295    575    Dima_    83    

Загрузка из Excel в 1С:Розница

Обработка документов Обработка справочников Загрузка и выгрузка в Excel Склад и ТМЦ Склад и ТМЦ v8 Розница Россия УУ Абонемент ($m)

Универсальная загрузка Excel файлов в 1С:Розница 2.0

1 стартмани

27.05.2015    16224    110    KarinaSV    7    

Универсальная выгрузка/загрузка данных для отличающихся конфигураций (JSON, Такси+ОФ) Промо

Перенос данных из 1C8 в 1C8 Универсальные обработки Распределенная БД (УРИБ, УРБД) v8 1cv8.cf Абонемент ($m)

Простой перенос через JSON данных между двумя базами 1С (документов, справочников, ПВХ, ПВР, счетов). Аналогична произвольной выгрузке в типовой "Выгрузка/загрузка XML", но может использоваться для отличающихся конфигураций. Подходит для любых пар баз с любым интерфейсом (управляемый + обычный). Без настроек. Не требует идентичности конфигураций и платформ. При переносе типы данных сопоставляются по наименованиям метаданных, объекты и ссылки по UID.

1 стартмани

22.10.2014    227219    4423    ekaruk    186    

Автоматическая установка себестоимости номенклатуры для конфигурации Розница 2.0 (2.1) +Бонус, исправляем ошибки при настройке расписания запуска для внешних обработок в Рознице 2.0

Прайсы Обработка документов Розничная торговля Ценообразование, анализ цен Розничная торговля Ценообразование, анализ цен v8 Розница Розничная и сетевая торговля (FMCG) Россия УУ Абонемент ($m)

Обработка для автоматического создания документов Установка себестоимости, в случае если себестоимость не установлена на момент продажи. Помогает упростить установку себестоимости номенклатуры, если у вас в базе ведется учет по нескольким магазинам. Тестировалась на релизе 2.0.8.12 и 2.1.7.14. Подойдет для тех систем, где себестоимость номенклатуры одинакова для всех магазинов.

1 стартмани

31.03.2014    29406    74    sanches    15    

Выемка денежных средств из КассыККМ. Розница 2.0

Кассовые операции ККМ Кассовые операции v8 Розница УУ Абонемент ($m)

Уставшим от отсутствия ВыемкиДС после закрытия кассовой смены посвящается. Подключаемая обработка. Управляемый интерфейс.

1 стартмани

12.12.2012    80494    528    StepByStep    40