vue-quasar-admin Система фонового управления с общим контролем разрешений

vue-quasar-admin

  Quasar-FrameworkЭто интерфейсная среда с открытым исходным кодом, разработанная на основе vue.js, которая может помочь веб-разработчикам быстро создавать следующие веб-сайты: адаптивные веб-сайты, прогрессивные приложения, мобильные приложения (через Cordova) и кросс-платформенные приложения (через Electron). . Quasar позволяет разработчикам публиковать на нескольких платформах веб-сайт, PWA, мобильное приложение и приложение Electron с помощью всего одной записи кода.При использовании Quasar вам даже не нужны Hammerjs, Momentjs или Bootstrap, платформа Quasar уже включает их. легко использовать.   vue-quasar-adminЭто система фонового управления, основанная на Quasar-Framework, включая общий контроль разрешений (в настоящее время только для ПК).

github

online demo

Вход в учетную запись:

admin 123

test 123456

website_admin 123456

Пожалуйста, не изменяйте имя учетной записи произвольно. Другие операции необязательны. Вы можете инициализировать данные с помощью кнопки «Инициализация данных» в правом верхнем углу.

Функции и особенности

• Поддержка реальных серверных данных
• вход/выход
• Гибкая планировка из девяти квадратов
• Уменьшить левую строку меню
• навигация по тегам
• Панировочные сухари
• полноэкранный/выйти из полноэкранного режима
• Динамическое меню
• Меню разделено на модули
• Универсальный контроль доступа
  • Управление доступом на уровне меню
  • Контроль разрешений на уровне интерфейса
  • Контроль разрешений на уровне элемента
• Глобально настраиваемый эффект загрузки
• Обработка сетевых исключений
• модуль
  • системный модуль
    • настройки системы
      • управление меню
    • управление полномочиями
      • управление функциями
      • управление ролями
      • Управление ролевыми правами
      • Управление пользователями ролей
      • Управление ролями пользователей
    • Организация
      • Управление отделом
      • Управление работой
    • Управление пользователями
  • модуль сайта
    • CMS
      • Управление статьями
  • модуль разработки
    • Официальные компоненты
      • . . .
    • бизнес-компонент
      • sku
  • Журнал аудита
  • Инициализация данных

файловая структура

.
├── .quasar  Quasar CLI生成的配置
└── src
    ├── assets  资源文件
    ├── components 自定义组件
    ├── css 样式文件
    ├── layout 布局组件
    ├── libs  工具方法
    ├── router  路由配置
    ├── store  状态管理
    ├── service  API管理
    ├── plugins  需要全局注册的组件、指令、插件
    └── pages
        ├── cms 
        │   └── 文章管理
        ├── develop
        │   ├── 官方组件
        │   └── 业务组件
        ├── organization
        │   ├── 部门管理
        │   └── 职位管理
        ├── other
        │   └── 审计日志
        ├── permission
        │   ├── 功能管理
        │   ├── 角色管理
        │   ├── 角色权限管理 
        │   ├── 角色用户管理
        │   └── 用户角色管理
        ├── system  
        │   ├── 菜单管理
        ├── user  
        │   └── 用户管理
        ├── 403 无权限页面
        ├── index 首页
        └── login 登录页
        

Установите и используйте

Install

npm install

Run

Development

quasar dev

Production(Build)

quasar build

Установить фоновые программы

фоновая программа

git clone https://github.com/wjkang/quasar-admin-server.git

Install

npm install

Run

Development

npm run start

Production(Build)

npm run production

использование бэкэнд-программыkoa2построить и использоватьlowdbСохраняйте данные в файлы JSON (используя хранилище файлов JSON для быстрых демонстрационных сборок).

Этапы разработки функции (в качестве примера возьмем управление статьями)

• внешний интерфейс
  • Определить код функции:
  • post_view - просмотр списка сообщений
  • post_edit - редактирование сообщения
  • post_del - Удаление сообщения
  • Создайте новую страницу со списком статей post.vue
  • добавить маршрут
  • Используйте функцию управления меню, чтобы добавить связанное меню «управление статьями».Название меню должно совпадать с полем имени маршрута, добавленного на предыдущем шаге. Введите код разрешения, соответствующий определенной функции «просмотр списка статей» (управление разрешениями на уровне меню).
  • Используйте управление функциями, чтобы ввести определенное имя функции и код функции во вновь созданном меню.
  • Настройка ролей и пользователей
  • Установите разрешения функций для соответствующих ролей в управлении разрешениями ролей
• задняя часть
  • Новая структура хранения статей в файле db.json
  • Добавьте postService.js в службы для записи операций в файл db.json.
  • Добавьте post.js в контроллеры и введите postService.js для связанных операций.
  • main-routes.js добавляет связанные маршруты и использует промежуточное ПО PermissionCheck для управления разрешениями на уровне внутреннего интерфейса (можно использовать коды функций или коды ролей)
• внешний интерфейс
  • Добавьте post.js в службу, настройте операции, связанные с API, настройте поле загрузки для достижения настраиваемых эффектов загрузки и настройте код функции и код роли в поле разрешений (для обеспечения контроля разрешений на уровне внешнего интерфейса).
  • Вернитесь к файлу post.vue, введите файл доступа к API и напишите бизнес-код.
  • Используйте команду v-permission для управления отображением элементов страницы, а также кодирование функций и кодирование ролей (для реализации контроля разрешений на уровне элементов).
  • Настройте dontCache в модуле приложения магазина, чтобы контролировать кэширование страницы.

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

Показать результаты