This paper discusses an approach and toolset for developing corporate web applications, using the creation of a user personal Account as an example. The solution is designed to automate key busi-ness processes of an enterprise—document management and request processing—through a unified, secure, and responsive web interface. The architecture of an application is described, combining a Vue.js client for creating an interactive user interface and a Java service with a PostgreSQL database for implementing business logic, security, and data storage
corporate portal, Vue.js, Java Spring, PostgreSQL, RESTful API, security
Цифровая трансформация промышленных предприятий, в частности в нефтегазовом секторе, требует создания специализированных безопасных информационных систем. Такие системы призваны оптимизировать взаимодействие с контрагентами, автоматизировать внутренние процессы: согласование пропусков, управление энергопотреблением. Предоставлять пользователям персонализированный доступ к данным и сервисам [1]. Ключевым элементом подобной цифровой экосистемы часто выступает корпоративный портал и личный кабинет пользователя.
Основные требования к таким решениям включают: соответствие корпоративному стилю, высокий уровень информационной безопасности, разграничение прав доступа для различных групп пользователей, надежность и отказоустойчивость, а также удобный интерфейс. Разработка подобных систем представляет собой комплексную задачу, требующую применения современного и сбалансированного стека технологий на стороне клиента и на стороне сервера.
В данной работе рассматривается практическая задача разработки функционального прототипа личного кабинета для крупного промышленного предприятия. Целью работы является демонстрация эффективного подхода, сочетающего фронтенд-фреймворк Vue.js для построения динамического интерфейса и надежную backend-экосистему Java Spring вместе с реляционной СУБД PostgreSQL для обеспечения бизнес-логики, безопасности и целостности данных.
Разработанный личный кабинет представляет собой одностраничное веб-приложение (SPA), архитектура которого построена по принципу разделения ответственности между клиентской и серверной частями, взаимодействующими через RESTful API.
Рисунок 1 – Интерфейс личного кабинета пользователя
В клиентской части Vue Router обеспечивает навигацию между разделами личного кабинета (Заявки, информация потребителю, анкетирование и др. рисунок 1). Для централизованного хранения данных приложения используется хранилище Pinia. Для выполнения HTTP-запросов к серверу используется библиотека Axios. Серверная часть обеспечивает бизнес-логику, безопасность работы с данными и предоставление API. С помощью Spring разработан набор конечных точек, обслуживающих запросы от клиента. Реализована система аутентификации на основе JWT. Пароли хранятся в базе данных в хэшированном виде. Настроено разграничение прав доступа. В результате был создан работающий прототип личного кабинета, реализующий базовый функционал.
Представленный подход к разработке корпоративного портального решения демонстрирует возможность создания высококачественных, безопасных и масштабируемых информационных систем.
Полученное решение служит основой для дальнейшего расширения функционала, такого как интеграция с электронными подписями, добавление модуля онлайн-оплат или подключение аналитической отчетности. Описанный стек технологий и принципы архитектуры могут быть успешно применены для реализации схожих задач цифровизации в других отраслях.
1. Montero, E. Patterny korporativnyh integracionnyh prilozheniy / E. Montero, G. Hoff. – SPb.: Simvol-Plyus, 2019. – 576 s.
