Agile-BPM-Basic: введение в разработку фронтенда

Фронтенд разработан на основе ElementPlus и поддерживает современные браузеры, такие как Chrome, Edge, Firefox и Safari. Вы можете обратиться к документации на официальном сайте ElementPlus для ознакомления с базовым API компонентов и документацией AgileBPM для ознакомления с API базовых компонентов.

Быстрый старт

Установка

Рекомендуется использовать VSCode для разработки. Обязательно установите необходимые плагины.

1. Проверьте среду, убедитесь, что у вас установлена версия node 16 или 18. Откройте командную строку в корневом каталоге проекта.
2. Установите зависимости с помощью команды yarn install.
3. Запустите сервер с помощью команды npm run dev.

Начальная настройка

Перед началом разработки необходимо выполнить несколько действий:

1. Выберите подходящие плагины для VSCode (см. раздел «Плагины для VSCode»).
2. Измените логотип сайта:
   • public\img\logo.png
   • public\img\logo-r.png

Конфигурация

Основная конфигурация проекта находится в файле src\config\defaultConfig.ts, а конфигурация запросов — в файле .env.

Структура каталога фронтенд-проекта

agilebpm-ui
├── src
│   ├── api                        API 接口定义
│   ├── assets                     静态资源
│   ├── components                 фронтенд компоненты
│   ├── config                     система конфигурации
│   ├── hooks                      
│   ├── icon                       
│   ├── layout                     фронтенд фреймворк для макета
│   ├── main.ts                    входной файл main.js
│   ├── router                     маршрутизация
│   ├── store                      состояние управления
│   ├── style                      CSS
│   ├── utils                      инструменты
│   └── views                      страницы
│       ├── biz                    страницы модуля
│       ├── bpm                    
│       ├── cms                    
│       ├── home                    
│       ├── login                   
│       ├── news                    
│       ├── org                     
│       └── sys                     
├── types                         
├── package.json                   зависимости
├── prettier.config.js            стиль кода
└── vite.config.ts                 конфигурация Vite

Добавление новых страниц

Чтобы добавить новую страницу, выполните следующие шаги:

• Создайте новый файл .vue страницы, следуя рекомендациям из раздела «Общие требования к страницам списка».
• Добавьте новую страницу в маршрутизацию.
• Настройте эту страницу в меню.

Более подробно:

Создание нового файла .vue

Все файлы страниц находятся в каталоге /src/views. Для удобства обслуживания они разделены по модулям.

Добавление новой страницы в маршрутизацию

Страницы можно разделить на две категории:

1. Страницы внутри основного фрейма, которые включают верхний колонтитул, боковую панель и другие основные элементы макета (большинство страниц относятся к этой категории).
2. Внешние страницы, такие как домашняя страница, страницы входа/регистрации/результатов регистрации, которые более независимы и не имеют других макетов.

Откройте файл маршрутизации src\router\index.ts. Если это страница внутри основного фрейма, добавьте конфигурацию маршрута в layout children. Другие страницы не следует помещать в layout children, например, страницы входа.

Поскольку страницы внутри основного фрейма обычно многочисленны, для удобства обслуживания мы разделили их на модули, например, модуль маршрутизации организации src\router\modules\org.ts.

Проблемы с маршрутизацией

Если после настройки кэширования маршрут всё ещё не работает, обратите внимание на соответствие имён маршрутов и компонентов .vue.

Настройка новой страницы в меню

В разделе «Система — Системные ресурсы» добавьте новый ресурс меню:

1. Выберите родительский каталог, который нужно добавить.
2. Введите информацию о ресурсе:
   • Имя ресурса: название меню, которое заменит заголовок маршрута.
   • Псевдоним ресурса: уникальный код, используемый для аутентификации в кнопках.
   • Адрес запроса: адрес маршрута, который будет использоваться для доступа к интерфейсу бэкенда.
   • По умолчанию развёрнуто: меню будет отображаться развёрнутым по умолчанию.

Сборка и публикация

Сборка

Выполните команду npm run build в терминале для сборки проекта. После успешной сборки в корневом каталоге будет создана папка dist, содержащая собранные файлы, такие как .js, .css и index.html.

Публикация

Frontend — это типичный SPA-проект, и после сборки он содержит только один файл входа index.html и остальные статические ресурсы. Весь проект управляется Webpack.

Для публикации SPA-проектов важно правильно отобразить файл index.html и расположение статических ресурсов. Обычно вы можете использовать Nginx, Apache или другие серверы для отображения файла index.html, или использовать сервисы CDN, такие как Qiniu.

Дополнительные сведения см. в официальной документации Vue.

Общие требования к списку страниц

Рекомендуется включать компонент abTableMix на страницах списков, так как он предоставляет общие функции поиска, сброса, сворачивания и удаления выбранных элементов. Пример использования можно найти на странице списка пользователей src\views\org\user\userList.vue.

Общие требования к редактированию страниц

При редактировании рекомендуется использовать компонент ab-save, который упрощает часть кода. Пример можно найти на странице редактирования ролей src\views\org\role\roleEdit.vue.

Обязательные плагины для VSC

Скачайте VSC по ссылке и установите следующие обязательные плагины:

• local-history (открывает новое окно)local-history] (рекомендуется, обязательно установить, полезно для восстановления потерянного кода).
• eslint (открывает новое окно)eslint (обязательно установить, рекомендуется включить Eslint для автоматического исправления при сохранении).
• stylelint (открывает новое окно)stylelint (обязательно установить).
• Prettier — Code formatter (открывает новое окно) (обязательно установить для автоматического форматирования кода).
• volar (открывает новое окно)vue3 development essentials (обязательно установить).
• Auto Import (открывает новое окно)import auto completion (рекомендуется установить).
• Import Cost (открывает новое окно)просмотр размера импортированных модулей зависимостей (рекомендуется установить).
• Auto Close Tag (открывает новое окно)автоматическое завершение тегов HTML (рекомендуется установить).
• Auto Rename Tag (открывает новое окно)автоматическое переименование тегов HTML (рекомендуется установить).
• vscode-element-helper (открывает новое окно)essential для разработки Element (рекомендуется установить).
• docthis (открывает новое окно)комментарий плагин (можно не устанавливать).
• Git History (открывает новое окно)просмотреть историю git (можно не устанавливать).
• Svg Preview (открывает новое окно)SVG viewer (можно не устанавливать).