Работа с сервером

Загрузка данных

ToDo может работать с бэкенд сервером для загрузки задач, проектов и пользователей. Вы можете указать ссылку на него с помощью параметра url:

webix.ui({
    view: "todo",
    url:"https://docs.webix.com/todo-backend/"
});

ToDo загружает и сохраняет данные, используя следующие URL:

• задачи (e.g. http://localhost:3200/tasks) - получение и сохранение задач;
• пользователи (e.g. http://localhost:3200/users) - получение пользователей;
• проекты (e.g. http://localhost:3200/projects) - получение и сохранение проектов.

Вы можете скачать готовый бэкенд для ToDo.

Если у вас нет бэкенд сервера, вы можете кастомизировать методы сервиса Backend и предоставлять клиентские данные в виде промиса.

Сервис Backend

Сервис Backend это серверная модель, у которой есть методы для запросов на сервер. Они вызываются сервисом Operations при необходимости загрузки или сохранения данных.

Ниже вы найдёте полный список методов.

Как кастомизировать модель Backend

Чтобы менять запросы, получать и обрабатывать ответные данные вы можете:

• создать свой бэкенд сервис и наследовать его от сервиса по умолчанию;
• определять и переопределять методы;
• использовать произвольный бэкенд сервис через свойство override.

class MyBackend extends todo.services.Backend {
    // новые методы
}
 
webix.ui({
    view: "todo",
    url:"http://localhost:3200/",
    override: new Map([[todo.services.Backend, MyBackend]]),
});

Как изменить запрос на сервер

Вы можете отправлять AJAX запросы на ваш сервер с помощью необходимых URL, напр.:

Добавляем задачу

class MyBackend extends todo.services.Backend {
  addTask(task) {
    return webix.ajax.post("//localhost:3200/tasks", task)
      .then(res => res.json());
  }
}

Методы сервиса Backend

В этой секции вы найдёте детальное описание следующих методов:

• allTasks()
• projectTasks()
• addTask()
• updateTask()
• removeTask()
• moveTask()
• indentTask()
• unindentTask()
• cloneTask()
• projects()
• addProject()
• removeProject()
• updateProject()
• users()

allTasks()

Используется для получения всех доступных задач

Returns: промис.

Request:

GET http://localhost:3000/tasks

Response:

Сервер возвращает массив задач:

[
    {
        id: 1,
        text: "Learn about Webix",
        checked: true,
        assigned: ["user_1", "user_2", "user_3", "user_4"],
        project: "First project",
        parent: 0,
    },
    // другие задачи
 
]

projectTasks(id)

Используется для получения всех задач из определенного проекта.

Parameters:

• id (string) - ID проекта.

Returns: промис.

Request:

GET http://localhost:3000/tasks/projects/${id}

Response:

Сервер возвращает массив задач для определенного проекта:

[
  {
        id: 6,
        text: "Data Presentation",
        checked: true,
        project: "ui",
        parent: 0,
    },
    // другие задачи
]

addTask(id, obj, index, parent)

Добавляет новую задачу на сервер.

Parameters:

• id (string, number) - локальный ID задачи;
• obj (object) - базовый объект, хранящий информацию о проекте;
• index (number) - индекс в локальной коллекции. 0 по умолчанию;
• parent (string, number) - ID родительской задачи.

Returns: промис с объектом, содержащим ID нового события.

Request:

POST http://localhost:3000/tasks
Raw JSON
{
     "project": 7,
     "parent": 0,
     "after": 12  // (previous element id)
}

Response:

Сервер возвращает объект, содержащий ID новой задачи:

{id: 5}

updateTask(id, fields)

Обновляет указанную задачу.

Parameters:

• id (string, number) - ID задачи;
• fields - поля, которые необходимо обновить.

Returns: промис.

Request:

PUT http://localhost:3000/tasks/${id}
Raw JSON (obj with new fields)
{
        “id”: 6,
        “text”: "Data Presentation",
        “checked”: true,
        “project”: "ui",
        “parent”: 0
 }

Response:

Сервер возвращает объект, содержащий пустой ID:

{ “id”: 0 }

removeTask(id)

Удаляет указанную задачу.

Parameters:

• id (string, number) - ID задачи.

Returns: промис.

Request:

DELETE http://localhost:3000/tasks/${id}

Response:

Сервер возвращает объект, содержащий пустой ID:

{ “id”: 0 }

moveTask(id, project)

Используется для перемещения задачи в другой проект.

Parameters:

• id (string, number) - ID задачи;
• project (string) - название проекта, в который вы хотите переместить.

Returns: промис.

Request:

PUT http://localhost:3000/move/${id}

Response:

Сервер возвращает объект, содержащий пустой ID:

{ “id”: 0 }

indentTask(id, parent)

Используется для превращения задачи в подзадачу.

Parameters:

• id (string, number) - ID задачи;
• parent (string, number) - ID новой родительской задачи.

Returns: промис.

Request:

PUT http://localhost:3000/indent/${id}
Raw JSON:
{
    “parent”: 5
}

Response:

Сервер возвращает объект, содержащий пустой ID:

{ “id”: 0 }

unindentTask(id, parent)

Используется для превращения подзадачи в задачу.

Parameters:

• id (string, number) - ID задачи;
• parent (string, number) - ID родительской задачи.

Returns: промис.

Request:

PUT http://localhost:3000/unindent/${id}
Raw JSON:
{
    “parent”: 4
}

Response:

Сервер возвращает объект, содержащий пустой ID:

{ “id”: 0 }

cloneTask(index, parent, project, cache)

Используется для клонирования задачи.

Parameters:

• index (number) - индекс задачи, где будут вставлены клонированные задачи;
• parent (string, number) - ID родительской задачи;
• project (string) - название проекта, в котором была создана задача;
• cache (array) - массив клонированных задач с клиентскими ID.

Returns: промис.

Request:

POST http://localhost:3000/clone
Raw JSON
{
    “after”: 1,
    “parent”: 2,
    “project”: 1,
    “batch”: [
        {
            “id”: “task1”,
            “text”: "Learn about Webix",
            “checked”: true,
            “assigned”: ["user_1", "user_2", "user_3", "user_4"],
            “project”: "First project",
            “parent”: 0,
        },
        // другие задачи
     ]
}

Response: массив, содержащий серверные ID клонированных задач.

projects()

Используется для получения всех доступных проектов.

Request:

GET http://localhost:3000/projects

Returns: массив проектов.

Response:

Сервер возвращает массив проектов:

[
    { id: "ui",
      value: "UI Widgets"
    },
    // other projects
]

addProject(oid, value)

Добавляет новый проект.

Parameters:

• oid (string) - ID проекта;
• value (string) - название проекта.

Returns: промис с ID проекта.

Request:

POST http://localhost:3000/projects
Raw JSON:
{
    “value”: “project name”
}

Response:

Сервер возвращает объект, содержащий ID проекта:

{"id":14}

removeProject(id)

Удаляет указанный проект.

Parameters:

• id (string) - ID проекта.

Returns: промис.

Request:

DELETE http://localhost:3000/projects/${id}

Response:

Сервер возвращает объект, содержащий пустой ID:

{ “id”: 0 }

updateProject(id, value)

Обновляет указанный проект.

Parameters:

• id (string) - ID проекта;
• value (string) - название проекта.

Returns: промис.

Request:

PUT http://localhost:3000/projects/${id}
Raw JSON:
{
    “value”: “new project name”
}

Response:

Сервер возвращает объект, содержащий пустой ID:

{ “id”: 0 }

users()

Используется для получения всех пользователей.

Request:

GET http://localhost:3000/users

Returns: массив пользователей.

Response:

Сервер возвращает массив пользователей:

[
    {
      id: "user_1",
      value: "Don Smith",
      path: "../common/img/user_1.jpg"
    },
    // другие пользователи
]

Наверх