Наше веб-приложение предполагает такие функции
Для этого необходимо разработать:
Все классы и функция должны находиться и быть доработаны в папке public/js/api.
Функция является основным связующим звеном между клиентом и сервером. Через нее необходимо организовать AJAX запросы на сервер используя API XMLHttpRequest. Функция createRequest ничего не возвращает.
Пример вызова:
// здесь перечислены все возможные параметры для функции
createRequest({
url: 'https://example.com', // адрес
data: { // произвольные данные, могут отсутствовать
email: 'ivan@poselok.ru',
password: 'odinodin'
},
method: 'GET', // метод запроса
/*
Функция, которая сработает после запроса.
Если в процессе запроса произойдёт ошибка, её объект
должен быть в параметре err.
Если в запросе есть данные, они должны быть переданы в response.
*/
callback: (err, response) => {
console.log( 'Ошибка, если есть', err );
console.log( 'Данные, если нет ошибки', response );
}
});
Константа xhr в примере выше содержит объект XMLHttpRequest.
1. При параметре method = GET, данные из объекта data должны передаваться в строке адреса. Например, листинг:
createRequest({
url: 'https://example.com',
data: {
mail: 'ivan@biz.pro',
password: 'odinodin'
},
method: 'GET',
});
аналогичен коду:
const xhr = new XMLHttpRequest;
xhr.open( 'GET', 'https://example.com?mail=ivan@biz.pro&password=odinodin' );
xhr.send();
2. При параметре method отличном от GET, данные из объекта data должны передаваться через объект FormData. Например, листинг
createRequest({
url: 'https://example.com',
data: {
mail: 'ivan@biz.pro',
password: 'odinodin'
},
method: 'POST',
});
аналогичен коду:
const xhr = new XMLHttpRequest,
formData = new FormData;
formData.append( 'mail', 'ivan@biz.pro' );
formData.append( 'password', 'odinodin' );
xhr.open( 'POST', 'https://example.com' );
xhr.send( formData );
Присвойте свойству responseType значение 'json'. В проекте сервер все ответы будет возвращать в формате 'json'.
xhr.responseType = 'json'; // формат, в котором необходимо выдать результат
В случае успешного выполнения кода, необходимо вызвать функцию, заданную в callback и передать туда данные:
// при успешном выполнении
createRequest({
url: 'https://example.com',
method: 'GET',
callback: ( err, response ) => {
/*
при успешном выполнении err = null, response содержит данные ответа
*/
console.log( err ); // null
console.log( response ); // ответ
}
});
В случае, если в процессе выполнения функции возникают ошибки, вам необходимо передать эту ошибку в параметр err:
// при ошибке
createRequest({
url: 'https://example.com',
method: 'GET',
callback: ( err, response ) => {
console.log( err ); // объект ошибки
}
});
Это базовый класс, от которого будут наследоваться классы Account и Transaction. Необходим для организации взаимодействия между интерфейсом программы и сервером через функцию createRequest. Если пользователю необходимо получить, изменить или добавить данные, то происходит обращение к методам данного класса, которые делают запрос к серверу через функцию createRequest.
Содержит 3 статических метода: list, remove и create.
Также Entity содержит одно статическое свойство.
Свойство URL содержит пустую строку.
console.log( Entity.URL ); // ''
Метод list принимает 2 аргумента:
const data = {
mail: 'ivan@biz.pro',
password: 'odinodin'
};
Entity.list( data, function( err, response ) {
// эта функция работает аналогично callback в createRequest
});
data в данном случае - объект с параметрами, второй параметр - callback-функция (функция обратного вызова).
Метод посылает GET запрос на адрес, заданный URL. Метод запускает выполнение функции createRequest.
Метод create принимает 2 аргумента, как и list: data и callback.
const data = {
mail: 'ivan@biz.pro'
};
class Entity {
// ... внутри метода create
static create( data, callback ) {
console.log( data ); // { mail: 'ivan@biz.pro' }
}
}
Метод посылает PUT запрос на адрес, заданный URL. Метод запускает выполнение функции createRequest.
Метод remove принимает 2 аргумента: data и callback.
const data = {
mail: 'ivan@biz.pro'
};
class Entity {
// ... внутри метода create
static remove( data, callback ) {
console.log( data ); // { mail: 'ivan@biz.pro' }
}
}
Метод посылает DELETE запрос на адрес, заданный URL. Метод запускает выполнение функции createRequest.
Наследует все свойства и методы от Entity. Статическое свойство URL равно /account.
Содержит 1 статический метод: get. Метод запускает функцию createRequest.
Метод get принимает 2 аргумента: id и callback. id задаёт идентификатор записи.
Пример вызова:
Entity.get( 21, function ( err, response ) {
// ... получили ответ
});
Метод посылает GET запрос на адрес, заданный URL. Метод запускает выполнение функции createRequest.
Пример получения определённого счёта: /account/2
Наследует все свойства и методы от Entity. Статическое свойство URL равно /transaction
В отличие от Account и Transaction, не наследуется от Entity. Статическое свойство URL равно /user.
Устанавливает в приложении авторизованного (который зарегистрировался) пользователя. Устанавливает в локальном хранилище с ключом user данные пользователя.
const user = {
id: 12,
name: 'Vlad'
};
User.setCurrent( user );
console.log( localStorage.user ); // строка "{"id":12,"name":"Vlad"}
Возвращает объект текущего авторизованного пользователя. Если его нет, возвращает undefined.
const user = {
id: 12,
name: 'Vlad'
};
User.setCurrent( user );
const current = User.current();
console.log( current ); // объект { id: 12, name: 'Vlad' }
Удаляет из локального хранилища авторизованного пользователя.
const user = {
id: 12,
name: 'Vlad'
};
User.setCurrent( user );
let current = User.current();
console.log( current ); // объект { id: 12, name: 'Vlad' }
User.unsetCurrent();
current = User.current();
console.log( current ); // undefined
Извлекает данные о текущем авторизованном пользователе. Пользуется функцией createRequest.
Метод fetch принимает 1 аргумент: callback. В качестве ответа в callback будет объект вида:
{
"success": true,
"user": {
"id": 2,
"name": "Vlad",
"email": "l@l.one",
"created_at": "2019-03-06 18:46:41",
"updated_at": "2019-03-06 18:46:41"
}
}
Например:
User.fetch(( err, response ) => {
console.log( response.user.id ); // 2
});
Если пользователь не авторизован, то будет возвращён объект вида:
{
"success": false,
"error": "Необходима авторизация"
}
Если в результате есть данные об авторизованном пользователе, необходимо обновить данные текущего пользователя (для этого вызывайте метод setCurrent):
console.log( User.current()); // undefined
User.fetch(( err, response ) => {
console.log( response.user.name ); // Vlad
console.log( User.current().name ); // Vlad
});
Если данных о пользователе нет (success = false), необходимо удалить запись об авторизации (для этого вызывайте метод unsetCurrent):
console.log( User.current()); // { id: 47, name: 'Vlad' }
User.fetch(( err, response ) => {
// Оказалось, что пользователь уже больше не авторизован (истекла сессия)
console.log( response.user ); // undefined
console.log( response.success ); // false
console.log( User.current() ); // undefined
});
Метод посылает GET запрос на адрес, заданный по формату URL + ‘/current’. Метод запускает выполнение функции createRequest.
Метод производит регистрацию пользователя. Метод register принимает 2 аргумента: data и callback.
Обязательные свойства data:
const data = {
name: 'Vlad',
email: 'test@test.ru',
password: 'abracadabra'
}
// производим регистрацию
User.register( data, ( err, response ) => {
console.log( response );
});
В случае ошибки вы получите возможный ответ вида:
{
"success": false,
"error": {
"email": [
"Поле E-Mail адрес должно быть действительным электронным адресом."
],
"password": [
"Количество символов в поле Пароль должно быть не менее 3."
]
}
}
В случае успеха:
{
"success": true,
"user": {
"name": "Lol",
"email": "lol@lol.ru",
"updated_at": "2019-03-11 14:18:28",
"created_at": "2019-03-11 14:18:28",
"id": 3
}
}
После регистрации установите в случае успешного ответа полученного пользователя с помощью метода User.setCurrent.
Метод посылает POST запрос на адрес, заданный по формату URL + ‘/register’. Метод запускает выполнение функции createRequest.
Метод позволяет авторизовать ранее зарегистрированного пользователя. Метод login принимает 2 аргумента: data и callback.
Обязательные свойства data:
const data = {
email: 'test@test.ru',
password: 'abracadabra'
}
User.login( data, ( err, response ) => {
console.log( response ); // Ответ
});
В случае ошибки (неверные E-mail или пароль) ответ будет:
{
"success": false,
"error": "Пользователь c email ... и паролем ... не найден"
}
В качестве успешного ответа придёт:
{
"success": true,
"user": {
"name": "Lol",
"email": "lol@lol.ru",
"id": 3
}
}
После авторизации установите в случае успешного ответа полученного пользователя с помощью метода User.setCurrent.
Метод посылает POST запрос на адрес, заданный по формату URL + ‘/login’. Метод запускает выполнение функции createRequest.
Метод позволяет выйти из системы. Метод logout принимает 1 аргумент callback.
В качестве успешного ответа вы получите
{
"success": true
}
Метод посылает POST запрос на адрес, заданный по формату URL + ‘/logout’. Метод запускает выполнение функции createRequest. После успешного выхода необходимо вызвать метод User.unsetCurrent.