Бэкенд-интерфейс UI, простой в освоении фреймворк для бэкенд-интерфейсов

1. Краткое описание

Этот проект представляет собой фреймворк для бэкенд-интерфейсов с простым маршрутизатором, который использует хэш из URL. Отображение данных страниц осуществляется серверной частью. Интерфейс основан на Bootstrap3. Поддерживает мобильные устройства. Совместим с IE8+ и другими основными браузерами.

GitHub адрес

Демонстрационный адрес

2. Структура каталога

public
  ┣css
    ┃┠vendor       //Содержит сторонние CSS файлы
    ┃┗basic.css    //Основной CSS файл
  ┣images
  ┣js
    ┃┠vendor       //Содержит сторонние JS файлы
    ┃┠ajaxForm.js  //Все AJAX запросы обрабатываются этим файлом (не сторонний плагин, написан автором)
    ┃┗basic.js     //Основной JS файл
tpl
  ┠...             //Содержит демонстрационные страницы, структура каталога произвольна
  ┠...
  ┗index.html      //Главная страница
server             //Содержит тестовые серверные скрипты
index.html         //Входная страница (страница входа)

3. Настройка

Перед загрузкой файла basic.js на главной странице следует определить:

window.common_conf = {
    defaultHash: 'page/desktop.html',    //Значение по умолчанию для хэша
    baseURL: './',                      //См. ниже раздел "Маршрутизация"
    navJSON: '../server/nav.json'       //JSON данные навигационного меню, подробный формат можно найти в файле nav.json
};
```## 4. Маршрутизация

Реализовано через слушание события `hashChange`, используя `"common_conf.baseURL" + "текущий хэш"` для создания URL запроса и получения необходимого HTML через AJAX запрос.

## 5. Отправка формы, проверка и обратный вызов

#### 5.1 Основное использование

Если `<form>` тег на странице содержит элемент с классом `.J_ajaxSubmitBtn`, то этот элемент будет контролироваться файлом ajaxForm.js (не сторонним плагином, а написанным автором). При клике на элемент с классом `.J_ajaxSubmitBtn`, ajaxForm.js автоматически собирает значения атрибутов `<form>` и отправляет AJAX запрос, например:

```* method: метод отправки (обязательный параметр)

• action: адрес отправки (обязательный параметр)
• data-validate: имя функции валидации перед отправкой
• data-callback: имя пользовательского обратного вызова после ответа сервера
• data-useDefaultCallback: выполнение по умолчанию действий фреймворка после ответа сервера. Действие будет выполнено при любом значении кроме 'off'.
• data-sendingText: текстовое сообщение .J_ajaxSubmitBtn во время отправки#### 5.2 Действия по умолчанию

Параметр data-useDefaultCallback, упомянутый выше, указывает, что браузер выполнит некоторые действия по умолчанию после получения ответа от сервера с помощью файла ajaxForm.js.

Действия по умолчанию определяются JSON-ответом сервера:

{
  "referer": "",
  "reload": true,
  "status": "success",
  "message": "Отправка успешна"
}

• referer: целевой адрес для перезагрузки, если поле пустое, то страница перезагружается текущей.
• reload: true|false, указывает, должна ли произойти перезагрузка.
• status: указывает, была ли отправка успешной, значение должно быть "success", чтобы считаться успешной (будут проверяться условия для перезагрузки).
• message: текстовое сообщение, которое выводится при состоянии отличном от "success".

Обратите внимание, что значение поля referer представляет хэш страницы, которая будет отображена. Если предоставленный referer начинается с http или https, вся страница будет перезагружена.

5.3 Валидация

Атрибут <form> data-validate используется для настройки имени функции валидации, которая получает объект DOM формы, упакованного jQuery (подробнее см. пример кода в разделе "5.1 Базовый способ использования"). Функция может вернуть true для нормальной отправки; можно также вернуть строку для вывода ошибочного сообщения, которое уже было упаковано в фреймворке.## 6. Лицензия

Лицензировано под лицензией MIT. Авторство: ЛИ Ю (liyu365)