vboot — это базовый проект, объединяющий Vue и SpringBoot 2.0. Если вам нравится использовать эти два фреймворка для разработки фронтэнда и бэкэнда, и вы не знаете, как их эффективно объединить, то этот проект может стать хорошим выбором для изучения.

vboot в основном зависит от четырёх больших фреймворков:

• Vue 2.x (https://cn.vuejs.org);
• SpringBoot 2.x (http://spring.io/projects/spring-boot);
• AdminLTE 2.x (https://adminlte.io/themes/AdminLTE/index2.html);
• vx-easyui (https://www.jeasyui.com/documentation4/index.php).

Плагины для фронтэнда:

• vue-select (http://sagalbot.github.io/vue-select/docs);
• bootstrapvalidator (http://bootstrapvalidator.votintsev.ru);
• Qs (https://github.com/ljharb/qs);
• vue-snotify (https://artemsky.github.io/vue-snotify/documentation/essentials/getting-started.html);
• axios (https://github.com/axios/axios);
• font-awesome (https://fontawesome.com);
• lodash (https://lodash.com);
• pretty-checkbox-vue (https://hamed-ehtesham.github.io/pretty-checkbox-vue);
• vue-cropper (https://github.com/xyxiao001/vue-cropper).

Структура проекта:

Проект использует gradle для сборки бэкэнда и webpack для фронтэнда. Структура каталогов объединяет конфигурации webpack и gradle. Код фронтэнда и бэкэнда находится в каталоге src, а каталог front содержит весь код фронтэнда. Каталог main сохраняет исходную структуру стандартного java-проекта.

Конфигурация зависимостей фронтэнда представлена в package.json, а конфигурация зависимостей бэкэнда — в build.gradle.

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

npm install

или

yarn install

Рекомендуется использовать IDE idea. После импорта gradle-проекта в idea, он автоматически выполнит сборку и загрузку зависимостей. Если этого не произошло, можно воспользоваться инструментом gradle в правой панели idea и нажать кнопку обновления. При первом запуске может потребоваться длительное время для загрузки зависимостей, нужно проявить терпение.

База данных и источник данных настраиваются в файле vboot.sql. Необходимо создать базу данных и импортировать данные. Конфигурация источника данных находится в application.yml.

Для запуска проекта необходимо настроить параметры запуска для бэкэнда и фронтэнда. Для бэкэнда настройка находится в server.port файла application.yml, по умолчанию порт равен 8088. В режиме разработки достаточно запустить сервис, нет необходимости использовать браузер для доступа. Если проект готовится к публикации, необходимо выполнить front-build перед запуском проекта.

В режиме разработки необходимо одновременно запускать сервисы фронтэнда (порт 8081) и бэкэнда. Доступ к фронтэнду осуществляется через http://localhost:8081/. Все запросы данных в режиме разработки проксируются на бэкэнд для обработки. После сборки проект автоматически готов к беспроблемному переключению между средами.

Структура каталога фронтэнда включает следующие элементы:

• api — конфигурация интерфейса и правила доступа к данным;
• assets — статические ресурсы, которые редко меняются;
• components — пользовательские глобальные компоненты;
• directive — определение прав доступа;
• filters — глобальные фильтры, пока не используются;
• router — конфигурация фронтэнд-маршрутизации;
• store — управление состоянием данных;
• styles — стили, app.scss — глобальный стиль;
• utils — набор инструментов;
• views — все страницы находятся здесь;
• App.vue — главная страница программы Vue;
• bootstrap.js — некоторые глобальные настройки и конфигурации;
• main.js — точка входа фронтэнда;
• mixins.js — глобальная конфигурация компонентов Vue.