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

25.11.21

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

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

Скачать файл

ВНИМАНИЕ: Файлы из Базы знаний - это исходный код разработки. Это примеры решения задач, шаблоны, заготовки, "строительные материалы" для учетной системы. Файлы ориентированы на специалистов 1С, которые могут разобраться в коде и оптимизировать программу для запуска в базе данных. Гарантии работоспособности нет. Возврата нет. Технической поддержки нет.

Наименование SM По подписке [?] Купить один файл
Работаем с HTTP сервисами 1С. MVC, Twig и прочие радости Web разработчика:
.cfe 1,40Mb
7
7
1 SM
Скачать Купить за 1 850 руб.

Для работы требуется версия платформы не ниже 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)

Тут и в контроллерах буду использовать консоль кода (//infostart.ru/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 код готовой страницы становиться менее читаемым.

См. также

Управление взаимоотношениями с клиентами (CRM) WEB-интеграция Анализ продаж Системный администратор Программист Пользователь Платформа 1С v8.3 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Управленческий учет Платные (руб)

Подсистема интеграции Amo CRM с 1С: технические требования, порядок работы, возможности, доработки и обновления. Бесплатный период техподдержки - 1 месяц.

60000 руб.

07.05.2019    32009    62    41    

23

WEB-интеграция 8.3.8 Конфигурации 1cv8 Автомобили, автосервисы Беларусь Украина Россия Казахстан Управленческий учет Платные (руб)

Расширение предназначено для конфигурации "1С:Предприятие 8. Управление Автотранспортом. ПРОФ". Функционал модуля: 1. Заполнение регистров сведений по подсистеме "Мониторинг", а именно: события по мониторингу, координаты по мониторингу, пробег и расход по мониторингу, текущее местоположение ТС по мониторингу 2. Заполнение путевого листа: пробег по мониторингу, время выезда/заезда, табличная часть ГСМ, места стоянок по геозонам. 3. Отчеты по данным загруженным в регистры сведений. 4. Предусмотрена автоматическая загрузка данных в фоновом режиме (условия работы данной загрузке читайте в описании товара) Модуль работает без включенной константы по настройкам мониторинга. Модуль формы предоставляется с открытым кодом, общий модуль защищен. Любой заинтересованный пользователь, имеет возможность скачать демо-версию расширения.

22656 руб.

25.05.2021    13451    39    8    

15

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

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

36000 руб.

03.08.2020    16861    15    19    

15

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

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

12000 руб.

02.02.2021    17094    46    49    

26

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

Интеграция 1С и Битрикс 24. Разработка имеет двухстороннюю синхронизацию 1С и Bitrix24 задачами. Решение позволяет создавать пользователя в 1С из Битрикс24 и наоборот. Данная разработка технически подходит под все основные конфигурации линейки продуктов 1С:Предприятие 8.3 (платформа начиная с 8.3.23). При приобретении предоставляется 1 месяц бесплатных обновлений разработки. Доступна демо-версия продукта с подключением Вашего Битрикс24

5040 руб.

04.05.2021    19216    10    17    

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

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

Шутка :)

---

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

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

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