Введение

Это базовый шаблон с разделением на клиентскую и серверную части для разработки на Vue+SSM (vue-element-admin). В дальнейшем планируется непрерывное улучшение функционала и устранение ошибок.

На клиентской стороне используется vue-element-admin.

Встроенные функции:

1. Управление пользователями: редактирование основной информации о пользователях.
2. Управление ролями: управление правами пользователей на доступ к меню, API-интерфейсам и рабочим процессам.
3. Системный интерфейс: автоматическое создание документации по API-интерфейсу на основе бизнес-кода.
4. Рабочий процесс: интеграция с Activiti 6, позволяющая создавать, редактировать и управлять рабочими процессами в режиме онлайн, а также просматривать задачи процесса.

Демонстрация:

• Изображения не представлены в запросе.

Установка:

1. Скачайте код, затем перейдите в корневой каталог проекта.
2. Установите зависимости: npm install.
3. Если возникают ошибки, выполните: npm audit fix.
4. Запустите: npm run dev.
5. Откройте браузер по адресу: http://localhost:8092/.
6. После успешного запуска серверной части система готова к использованию. Для входа используйте учётные данные администратора: имя пользователя — admin, пароль — zzxxssaaz.

Примечание:

По умолчанию порт сервера — 8077, порт клиента — 8092.

Интерфейсные элементы «Шаблоны управления» и «Документация Swagger API» являются прямыми ссылками на серверную часть, поэтому для их использования необходимо перейти в соответствующие разделы и изменить URL.

Если требуется изменить адрес или порт, выполните следующие действия:

— В файле .env.development установите тестовый адрес серверной части: VUE_APP_BASE_API = 'http://xxx.xxx.xxx:xxxx/'.

— В файле .env.production установите производственный адрес серверной части: VUE_APP_BASE_API = 'http://xxx.xxx.xxx:xxxx/'.

— В файле vue.config.js установите целевой адрес прокси: target: 'http://xxx.xxx.xxx:xxxx'.

— В файле vue.config.js задайте порт клиента: const port = process.env.port || process.env.npm_config_port || 8092 // dev port.

Развёртывание:

Обычное развёртывание

Выполните команду: npm run build:prod --report, чтобы создать новый файл dist в корневом каталоге проекта Vue. Затем сожмите этот файл в zip-архив и загрузите его в каталог соответствующего порта на сервере (nginx или Apache).

Развёртывание с использованием Docker

Создайте файл Dockerfile и отредактируйте его содержимое: FROM nginx COPY dist /usr/share/nginx/html/ COPY nginx/default.conf /etc/nginx/conf.d/default.conf

Создайте файл nginx.conf и отредактируйте его содержимое: #user nobody; worker_processes 1; error_log logs/error.log; error_log logs/error.log notice; error_log logs/error.log info; pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; access_log logs/access.log main; sendfile on; tcp_nopush on; keepalive_timeout 0; keepalive_timeout 65; gzip on; client_max_body_size 20m; server { listen 8091; server_name www.aaaaaa.com; charset koi8-r; access_log logs/host.access.log main; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; } }

Поместите оба файла в корневой каталог проекта Vue.

Создайте образ, выполнив команду в корневом каталоге: docker build -t vuenginxcontainer .

Запустите образ командой: docker run -p 3000:80 -d --name vueApp vuenginxcontainer.

Проверьте результат, введя IP-адрес и порт (3000) в браузере, например: localhost:3000.