Одностраничная система управления на основе Vue.js

Демонстрационная версия: backflow.cn:8080. Зависит от серверной части: http://git.oschina.net/backflow/framework-server.

Примечание: если есть обновления функций, обычно необходимо обновлять оба проекта одновременно.

Проектное описание

Несмотря на то, что на Oschina уже существует множество отличных систем управления платформой Java, всё ещё существует немало проектов с устаревшей архитектурой фронтенда, такой как iframe + jsp. Более новой является комбинация ajax + HistoryAPI. В то время как все проекты были впечатлены функциональностью, которая была доступна всего секунду назад, при ближайшем рассмотрении грубый дизайн взаимодействия с пользователем напоминает издалека увиденную длинноногую красавицу, но при приближении обнаруживается, что она не так красива, как казалось. В эту эпоху всеобщего использования ES6 + Babel это кажется особенно неприятным! Этот проект призван показать, что такое высококачественная бэкенд-система!

Неужели каждый раз, когда вы работаете над проектом, энтузиазм подавляется боссом одной фразой: «Бэкэнд-система не предназначена для внешнего использования, просто сделайте её функциональной»?

Неужели каждая бэкэнд-система обречена быть простой? После завершения работы над ней даже у самих разработчиков остаётся неприятное чувство?

Нет, нет, мы также хотим рассматривать бэкэнд-систему как продукт, предназначенный для пользователей, почему мы должны делать его некрасивым?

Фронтенд-технологии постоянно развиваются, а наши идеи разработки остаются неизменными, поэтому мы решили попробовать другой подход.

Целью этого проекта было заявить всему миру, что даже сложные бэкенд-системы могут быть реализованы с помощью одностраничных приложений! Если у вас всё ещё есть сомнения, здесь вы можете найти ответы!

В основе этого проекта лежит идея о том, что важность пользовательского интерфейса превосходит бэкенд, и все данные интерфейсы должны соответствовать пользовательскому интерфейсу, а все операции, которые можно упростить, должны быть упрощены настолько, насколько это возможно:

• операции, выполняемые на одной странице, не должны разделяться на две страницы;
• если существует лучший способ реализации, он должен быть использован без сожалений;
• ...

Основные функции

Управление системой основано на контроле доступа, который перевернул традиционную практику размещения всех меню, страниц и разрешений в базе данных. Поскольку мы стремимся к разделению фронтенда и бэкенда, мы делаем это более тщательно:

• при создании разрешений записываются только два важных элемента информации: идентификатор разрешения и отношения между вышестоящими и нижестоящими уровнями. Все системные разрешения связаны только с идентификатором разрешения, остальные элементы могут быть удалены — упрощение!
• все маршруты жёстко закодированы во фронтенд файле маршрутизации, и используются вместе с директивой для управления отображением в соответствии с набором разрешений пользователя в памяти (преимущество заключается в том, что местоположение пользовательского интерфейса может быть любым) — упрощение!
• упрощённая модель RBAC, где каждый пользователь связан только с одной ролью. (Вы спрашиваете, почему не несколько ролей? Почему нельзя связать только одну роль? Я могу придумать только один недостаток — невозможность комбинировать разрешения нескольких ролей, но это не такая уж большая проблема, не так ли?) — упрощение!
• поскольку все разрешения связаны с одним идентификатором разрешения в виде строки, можно попрощаться с кучей фреймворков безопасности бэкенда, таких как spring-security и apache-shiro, и реализовать один перехватчик менее чем в 10 строк кода! — упрощение!

Разве это не идеально?

Структура системы

Проект основан на шаблоне vue-template webpack-simple и использует следующие основные фреймворки, кроме Bootstrap 4 (только стили):

• SweetAlert — диалоговые окна;
• toastr — уведомления (уже преобразованные в модули ES);
• jquery.treetable — для отображения древовидных списков (давно не обновлялся, уже преобразован в модули ES);
• jstree — для древовидного выпадающего списка (переработан в компонент vue);
• проект полностью отделился от jQuery, радость для страдающих обсессивно-компульсивным расстройством!

Функциональные модули

• управление пользователями;
• управление ролями — одна страница;
• управление разрешениями — одна страница (в разработке);
• управление отделами — одна страница (не завершено);
• управление словарями;
• файловый менеджер — новый (файлы загружаются в Qiniu, пожалуйста, используйте свои собственные учётные записи и пространства Qiniu. Код Java будет периодически очищать моё собственное пространство, пожалуйста, не загружайте важные файлы).

Настройка сборки

# установить зависимости
npm install

# запустить с горячей перезагрузкой на localhost:3000
npm run dev

# собрать для продакшена с минификацией
npm run build

Если бэкенд не работает на порту localhost:8080, измените атрибут dev в config/index.js на фактический адрес сервера. (Для получения дополнительной информации см. https://webpack.js.org/configuration/dev-server).

Проект был недавно запущен и требует доработки, но мы продолжим работу над ним и будем рады вашему участию! Мы хотим услышать ваши идеи и предложения!

QQ группа для общения: 240098272.

Снимки экрана системы:

Модуль управления пользователями

Модуль управления ролями

Стиль 1: Стиль 2:

Модуль управления разрешениями

Стиль 1: Стиль 2:

Редактор словаря данных

Файловый менеджер (Qiniu облачное управление файлами)