Hui-Admin Pro
Профессиональная полнофункциональная версия
-
Краткое описание: Если вам нравится стиль iViewUI, возможно, Hui-Admin-Pro — это ещё один ваш выбор.
-
Основные технологии:
- iView4.0 + vuecli3.0.
- Vue-router для маршрутизации (вложенность уровней, перехват перед переходом, автоматическая прокрутка до верхней части страницы после перехода).
- Управление Vuex (подсветка навигации, переключение между несколькими страницами, управление маршрутом в зависимости от действий пользователя).
- Макет с использованием flex и less.
- Не используется плагин eslint для стиля кода.
-
Журнал обновлений:
- 1.x был завершён в 2019 году, подробности см. в журнале коммитов.
- 2.1.0, 2020-05-16:
- Замена интерфейса входа на онлайн-mock.
- Рефакторинг динамической проверки разрешений маршрутов, реализация рендеринга меню и загрузки маршрутов на основе возвращённого набора разрешений из интерфейса входа.
- Добавление контроля разрешений на уровне компонентов кнопок.
Запуск
- npm install для установки зависимостей. Можно использовать зеркало Taobao npm для Китая: npm install --registry=https://registry.npm.taobao.org.
- npm run dev для запуска в режиме разработки.
- npm run build для сборки.
Установленные плагины
- axios 0.19.0 // Плагин управления запросами к интерфейсу.
- view-design 4.0.0.
- mockjs 1.0.1-beta3 // Плагин для имитации данных. Необязательный, можно удалить.
- moment 2.24.0 // Плагин обработки времени. Необязательный, можно удалить.
- vue-router 3.0.3.
- vuex 3.0.1.
- less 3.0.4.
- babel-polyfill 6.26.0 // Обязателен для совместимости с IE.
- echarts 4.3.0.
- wangeditor 3.1.1.
Каталог
- Hui-Admin-Pro:
- node_modules — пакеты, установленные после выполнения команды npm install.
- other — изображения, необходимые для документации в формате Markdown.
- public — общий каталог.
- src — основной каталог бизнес-логики.
- api — конфигурация и обработка ответов на запросы axios.
- request.js — конфигурация axios и перехват ответов.
- user.js — интерфейс входа, упакованный.
- assets — изображения.
- main — изображения для основного фреймворка.
- components — компоненты.
- main — основной фреймворк.
- message — уведомления.
- config — базовая конфигурация.
- config.js — файл базовой конфигурации.
- utils — утилиты.
- permission.js — проверка разрешений по уровням.
- util.js — общие бизнес-файлы (например, проверка на пустоту и т. д.).
- css — CSS.
- public.less — глобальный общий CSS.
- router — конфигурация маршрутизатора.
- permission.js — проверка прав доступа по маршрутам.
- router.js — обработка операций маршрутизатора.
- views — страницы.
- tmp.vue — шаблонная страница (содержит часто используемые циклы жизненного цикла Vue, может быть удалена).
- store — каталог Vuex.
- App.vue — главный вход Vue.
- main.js — главный вход JavaScript.
- .env.development — контекст среды разработки VUE_APP_BASE_API = '/dev-api'.
- .env.production — контекст производственной среды VUE_APP_BASE_API = ''.
- babel.config.js — конфигурационный файл Babel.
- package.json — файл управления пакетами npm.
- README.md — документация.
- vue.config.js — конфигурационный файл разработки и сборки.
Конфигурация
-
Базовая конфигурация в config->config.js содержит подробные инструкции.
// Название системы по умолчанию
export const siteTitle = 'Hui-Admin-Pro 企业级中台前端解决方案'
// Домашняя страница по умолчанию
export const indexPage = 'workplace'
// Данные темы
export const themeData = {
themeType: 'dark', // Тип темы: dark (классический крутой чёрный) или light (минималистичный белый), по умолчанию dark
isTabsShow: true, // Отображать ли несколько вкладок, по умолчанию true
headMaxWidth: false // Максимальная ширина заголовка вкладки, по умолчанию false
}
-
Данные пользователя в store/modules/user.js:
state: {
// Пользовательские данные
userData: sessionStorage.getItem('userData') ? JSON.parse(sessionStorage.getItem('userData')) : {},
// Состояние входа
isLogin: sessionStorage.getItem('userData') ? true : false,
// Набор ролей
roles: []
}
-
Проверка подлинности маршрута (на основе набора разрешений, возвращаемого интерфейсом входа в систему, динамически генерирует маршруты):
{
path: "/form",
name: "form",
component: Main,
meta: {
hide: false, // Видимость
title: "Dashboard", // Текст отображения
icon: "md-speedometer", // Значок отображения
roleId: 8,// Идентификатор разрешения
},
// 二级栏目
children: [
{
path: "/form/basic_form",
name: "basic-form",
meta: {
hide: false, // 是否显示
title: "基础表单", // 显示文字
roleId: 9, // 权限 数组
},
component: () => import("@/views/form/basic_form")
}
]
4. Маршрутные права доступа
Тестирование прав доступа требует входа в систему с разными учётными записями.
- Учётная запись для тестирования: имя пользователя — test, пароль — 123456.
- Административная учётная запись: имя пользователя — admin, пароль — 123456.
Описание: на основе интерфейса входа возвращаются следующие данные:
- Администратор имеет права от 1 до 10 (1, 2, 3, 4, 5, 6, 7, 8, 9, 10).
- Тестировщик имеет права от 6 до 10 (6, 7, 8, 9, 10).
Адреса Git
Код Cloud: https://gitee.com/zengxiaohui2019/Hui-Admin-Pro
GitHub: https://github.com/zengxiaohui2019/Hui-Admin-Pro
Эффект
Скриншоты не переведены.
Поддержка автора
- Это программное обеспечение Hui-Admin-Pro является полностью бесплатным открытым исходным продуктом, который вы можете использовать по своему усмотрению, включая модификацию, но при условии соблюдения принципов открытого исходного кода: запрещено продавать и распространять производные версии в любой форме.
- Если вы считаете, что это помогло вашему проекту и повысило эффективность разработки, вы можете выразить свою благодарность следующим образом!
- Для веб-разработки, управления системой или разработки небольших программ, пожалуйста, свяжитесь со мной через WeChat: badiweier, псевдоним: [Zeng XiaoHui]. Обязательно укажите «hui-admin».
- Если вы используете Alipay или WeChat, угостите меня чашкой кофе.
Отказ от ответственности
- Весь код этого программного обеспечения написан лично Zeng XiaoHui, и не нарушает авторские права третьих лиц.
- Запрещается использовать это программное обеспечение для совершения незаконных или преступных действий. Любая юридическая ответственность за последствия, возникшие в результате использования этого программного обеспечения, не связана с ним (трудно представить, какие незаконные действия можно совершить с помощью этого программного обеспечения).
- Поскольку мои личные навыки и знания в области технологий ограничены, любая потеря, вызванная использованием этого программного обеспечения, не имеет к нему отношения (вероятно, это невозможно, поскольку это всего лишь интерфейсная страница).
- При возникновении проблем вы можете связаться со мной (сначала попробуйте решить проблему самостоятельно с помощью поиска в интернете), я могу предоставить платную или бесплатную поддержку.
Права на использование изображений проекта
- Изображения, используемые в этом проекте, взяты из сети, авторские права принадлежат первоначальному автору.
- В случае возникновения проблем с авторскими правами, пожалуйста, свяжитесь со мной, чтобы удалить изображение, спасибо.
Опубликовать ( 0 )