Cadmin: реализация на Vue+iview

Адрес проекта:

• GitHub: https://github.com/baiy/Cadmin-client-vue;
• Gitee: https://gitee.com/baiy/Cadmin-client-vue.

Онлайн-документ: https://baiy.github.io/Cadmin/.

Зависимости

• Vue;
• iView;
• localStorage;
• Axios;
• Lodash;
• vue-router;
• Vuex.

Примечание: в настоящее время используется iView 3.

Установка

// Установка
npm install
// Разработка
npm run serve
// Компиляция
npm run build

Конфигурация

Конфигурационный файл находится по адресу ./env.

Пример кода для получения конфигурации:

import {config} from '/src/helper'
// Получение конфигурации
let name = config('SITE_NAME')

При получении конфигурации префикс VUE_APP_ можно не указывать.

Маршрутизация и меню

Маршрутизация

В системе реализована динамическая загрузка страниц по определённым правилам:

1. Загрузка файлов из каталога /src/views.
2. Загрузка файлов с расширением .vue.
3. Автоматическое исключение файлов из папки components.

Примеры маршрутов:

Меню

Меню делится на два типа:

1. Каталоги — при нажатии на элемент такого меню отображаются подменю. Соответствующих страниц нет.
2. Страницы — элементы такого меню имеют соответствующую страницу.
3. Ссылки — обычные ссылки HTTP или HTTPS.

Для меню второго типа маршрут задаётся в бэкенде.

Store

/src/store/admin.js

Запросы к серверу

Внутри компонентов Vue

// GET-запрос
this.$request('/system/request/remove').
    data({id:1}).
    showSuccessTip().
    success(r=>{
         console.log(r)
    }).get();       
// POST-запрос
this.$request('/system/request/remove').
    data({id:1}).
    showSuccessTip().
    success(r=>{
         console.log(r)
    }).post();

Метод this.$request() принимает параметр action, который является адресом запроса к серверу.

Возвращаемое значение метода this.$request() — объект ActionRequest из файла /src/plugins/request.js.

При отправке запроса не нужно заботиться о токене — он добавляется автоматически.

Объект ActionRequest

Запрос отправляется только при вызове методов get() или post().

В любом месте

import {request} from '/src/plugins/request'
import {actionUrl} from '/src/helper'

// Создание стандартного адреса запроса к серверу с автоматическим добавлением параметров action и token
let url = actionUrl('action')

request({ 
    type:"get", // Метод запроса
    data:{}, // Данные запроса
    dataType:"json", // Формат ответа
    contentType:"application/x-www-en-urlencoded",
    url:"", // Адрес запроса
    success, // Обратный вызов при успешном запросе
    error, // Обратный вызов при ошибке запроса
    complete  // Обратный вызов после завершения запроса
})

Можно также использовать axios для отправки запросов.

Встроенные компоненты

Помимо компонентов iView, в системе есть несколько компонентов, которые часто используются при разработке бэкенда.

Отображение имени пользователя, указанного на сервере

<username :id="1" default="Неизвестный пользователь" />

Здесь id — это идентификатор пользователя, а default — текст, который отображается, если пользователь не найден.

Проверка прав доступа

<auth-check action="/system/auth/assignMenu">
    Отображается, если есть права доступа
    <span slot="without">Отображается без прав доступа</span>
</auth-check>

Компонент без обязательного слота without. Часто используется для отображения разного контента в зависимости от результата проверки прав доступа.

Поле ввода для загрузки файлов

<upload-file v-model="url" action="/upload"></upload-file>

Компонент для таблиц

<table-lists></table-lists>

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