vue quasar admin

Код слишком уродливый.

Vue-Quasar-Addmin

Quasar-Framework-это фронтальная структура с открытым исходным кодом, разработанную на основе Vue.js. Это может помочь веб-разработчикам быстро создать следующие веб-сайты: адаптивное веб-сайт, прогрессивное приложение, мобильное приложение (через Cordova), кроссплатформенные приложения (через электрон) Сущность Quasar позволяет разработчикам публиковать на веб -сайте нескольких платформ, PWA, мобильного приложения и электронного приложения, когда они пишут только один раз. простой. Vue-Quasar-Admin-это набор систем управления фоном, содержащиеся в общем контроле разрешений на основе квазар-раме (в настоящее время только для конца ПК).

онлайн демо

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

 admin 123

test 123456

website_admin 123456

Пожалуйста, не изменяйте имя учетной записи по желанию.

Системная блок -схема

Функция и характеристики

• Реальная поддержка данных Back -End
• Вход/вход в систему
• Гибкая планировка Jiugongge
• Шин ушел в бар меню
• Навигация по меткам тегов
• Хлеб
• Полный экран/выход полный экран
• Динамическое меню
• Меню разделено на модуль
• Универсальный контроль разрешений
  • Контроль разрешений на уровень меню
  • Контроль разрешений на интерфейс -Levor
  • Элементные разрешения контроля
• Global можно настроить с помощью эффекта загрузки
• Сетевая ненормальная обработка
• Модуль
  • Системный модуль
    • Настройки системы
      • Управление меню
    • Управление властью
      • Функциональное управление
      • Управление ролями
      • Ролевое управление
      • Роль управление пользователями
      • Управление роли пользователя
    • Организационная структура
      • Управление отделом
      • Управление работой
    • Управление пользователями
  • Модуль веб -сайта
    • 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 登录页
        

Установка

Установить

 npm install -g vue-cli

 npm install -g quasar-cli

 npm install

Бегать

Разработка

 quasar dev

Производство (сборка)

 quasar build

Установите фоновую программу

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

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

Установить

 npm install

Бегать

Разработка

 npm run start

Производство (сборка)

 npm run production

Программа Back -End построена с использованием KOA2, а LOWDB используется для сохранения данных в файле JSON (файл JSON хранится для быстрого создания демонстрации).

Функциональные шаги развития (примером управления статьями)

• внешний интерфейс
  • Код функции определения:
  • POST_VIEW -ARTICLEST Список просмотр
  • Post_edit -article edit
  • post_del -Article delete
  • Страница новой страницы статьи. Post.vue
  • Новая маршрутизация
  • Используйте функцию управления меню, чтобы добавить меню «Управление статьей». Постоянное заполнение кода определено «Функция« Список Список »« Функция, соответствующая функции (контроль разрешений на уровень меню)
  • Используйте управление функциями, чтобы ввести определенное имя функции и код функции в новом меню в новом меню
  • Настройка символов и пользователей
  • Установите функциональные разрешения для соответствующих настройки роли в управлении властью персонажа
• задняя часть
  • Db.json файл новая структура хранения статьи
  • Добавить postervice.js под обслуживание
  • Добавить post.js под контроллерами, чтобы ввести postervice.js для связанных операций
  • Main-routes.js добавляет связанную маршрутизацию и использует промежуточное программное обеспечение разрешения для выполнения управления разрешением на уровне полости рта (доступный функциональный код или код символов)
• внешний интерфейс
  • Добавьте post.js в обслуживание, настройте операции, связанные с API, и настройте поле загрузки для достижения пользовательского эффекта загрузки.
  • Вернуться в файл post.vue, ввести файлы доступа к API, написать бизнес -код
  • Используйте инструкцию V-Permission, чтобы контролировать, отображается ли элемент страницы, можно использовать функциональное кодирование и кодирование символов.
  • Настройка DontCache под модулем приложения Store для управления кэшем страницы

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

Эффект дисплей