**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.

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

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

| Конфигурационная переменная | Описание |
| --- | --- |
| VUE_APP_ADMIN_TOKEN_NAME | Имя, которое будет использоваться для хранения токена в localStorage |
| VUE_APP_API_URL_PREFIX | Адрес входа для запроса данных с сервера |
| VUE_APP_API_ACTION_NAME | Переменная action в адресе запроса данных с сервера |
| VUE_APP_API_TOKEN_NAME | Переменная token в адресе запроса данных с сервера |
| VUE_APP_INDEX_URL | Маршрут, на который будет перенаправлен пользователь после входа (например, /) |
| VUE_APP_SITE_NAME | Название сайта, которое отображается в левом верхнем углу страницы |
| VUE_APP_SITE_TITLE_TPL | Шаблон заголовка страницы |

Пример кода для получения конфигурации:
```js
import {config} from '/src/helper'
// Получение конфигурации
let name = config('SITE_NAME')
```
> При получении конфигурации префикс VUE_APP_ можно не указывать.

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

##### Маршрутизация
В системе реализована динамическая загрузка страниц по определённым правилам:
1. Загрузка файлов из каталога /src/views.
2. Загрузка файлов с расширением .vue.
3. Автоматическое исключение файлов из папки components.

Примеры маршрутов:
| Путь к файлу | Маршрут |
|---|---|
| /src/views/system/user.vue | /system/user |
| /src/views/a/b/c/d.vue | /a/b/c/d |
| /src/views/a/components/c.vue | Не загружается автоматически |
| /src/views/components/a/c.vue | Не загружается автоматически |

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

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

### Store
`/src/store/admin.js`

| - | Данные |
| --- | ------ |
| adminUser | Информация о текущем пользователе |
| adminMenu | Список меню, доступ к которому есть у пользователя |
| adminAllUser | Список всех пользователей на сервере |
| adminRequest | Список запросов, к которым есть доступ у пользователя |
| adminAuth | Связь пользователя с правами доступа |
| adminUserGroup | Связь пользователя с группами пользователей |
| currentMenu | Информация о текущей странице меню |

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

#### Внутри компонентов Vue
```js
// 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
| Метод | Описание | По умолчанию |
| --- | ------- | -------- |
| dataType(string) | Формат ответа | json |
| contentType(string) | Заголовок Content-Type | application/x-www-form-urlencoded |
| data(object) | Объект с данными запроса | {} |
| showSuccessTip() | Отображение сообщения об успешном выполнении запроса. По умолчанию сообщение не отображается | |
| hideErrorTip() | Скрывает сообщение об ошибке выполнения запроса. По умолчанию сообщение отображается | |
| success(function) | Функция обратного вызова при успешном выполнении запроса | null |
| error(function) | Функция обратного вызова при ошибке выполнения запроса | null |
| complete(function) | Функция обратного вызова после завершения запроса | null |
| get() | Отправляет GET-запрос | |
| post() | Отправляет POST-запрос | |

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

#### В любом месте
```js
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, в системе есть несколько компонентов, которые часто используются при разработке бэкенда.

#### Отображение имени пользователя, указанного на сервере
```html
<username :id="1" default="Неизвестный пользователь" />
```
Здесь id — это идентификатор пользователя, а default — текст, который отображается, если пользователь не найден.

#### Проверка прав доступа
```html
<auth-check action="/system/auth/assignMenu">
    Отображается, если есть права доступа
    <span slot="without">Отображается без прав доступа</span>
</auth-check>
```
Компонент без обязательного слота without. Часто используется для отображения разного контента в зависимости от результата проверки прав доступа.

#### Поле ввода для загрузки файлов
```html
<upload-file v-model="url" action="/upload"></upload-file>
```

#### Компонент для таблиц
```html
<table-lists></table-lists>
```
Этот компонент включает функции фильтрации и разбиения на страницы.