React.js и Spring Data REST: часть 2

В предыдущем сеансе вы узнали, как настроить внутреннюю службу расчета заработной платы для хранения данных о сотрудниках с помощью Spring Data REST. Ключевой особенностью, которой не хватало, было использование элементов управления гипермедиа и навигации по ссылкам. Вместо этого он жестко закодировал путь для поиска данных.

Не стесняйтесь взять код из этого хранилища и следуйте инструкциям. Этот сеанс основан на приложении предыдущего сеанса с добавлением дополнительных вещей.

В начале были данные … а затем был REST.

Я разочарован количеством людей, которые называют любой интерфейс на основе HTTP REST API. Сегодняшний пример — API REST SocialSite. Это RPC. Это кричит RPC…. Что нужно сделать, чтобы сделать архитектурный стиль REST понятным для понятия, что гипертекст является ограничением? Другими словами, если механизм состояния приложения (и, следовательно, API) не управляется гипертекстом, то он не может быть RESTful и не может быть REST API. Период. Есть ли где-нибудь сломанное руководство, которое нужно починить?

— Рой Т. Филдинг

Итак, что же такое элементы управления гипермедией, т.е. гипертекст, и как вы можете их использовать? Чтобы выяснить это, давайте сделаем шаг назад и рассмотрим основную миссию REST.

Концепция REST заключалась в том, чтобы заимствовать идеи, которые сделали Интернет настолько успешными, и применять их к API. Несмотря на огромные размеры, динамичность и низкую скорость обновления клиентов, т. Е. Браузеров, сеть имеет огромный успех. Рой Филдинг стремился использовать некоторые из его ограничений и возможностей и посмотреть, даст ли это аналогичное расширение производства и потребления API.

Одним из ограничений является ограничение количества глаголов. Для REST основными являются GET, POST, PUT, DELETE и PATCH. Есть и другие, но мы не будем вдаваться в них здесь.

• GET — получить состояние ресурса без изменения системы
• POST — создать новый ресурс, не говоря где
• PUT — заменить существующий ресурс, перезаписав все, что уже есть (если есть)
• DELETE — удалить существующий ресурс
• PATCH — частично изменить существующий ресурс

Это стандартизированные глаголы HTTP с хорошо написанными спецификациями. Подбирая и используя уже придуманные операции HTTP, нам не нужно изобретать новый язык и обучать индустрию.

Еще одним ограничением REST является использование типов медиа для определения формата данных. Вместо того, чтобы каждый писал свой собственный диалект для обмена информацией, было бы разумно разработать некоторые типы медиа. Одним из наиболее популярных из них является HAL, приложение медиа-типа / hal + json. Это тип данных Spring Data REST по умолчанию. Особое значение имеет то, что для REST не существует единого централизованного типа носителя. Вместо этого люди могут разрабатывать медиа-типы и подключать их. Попробуйте их. По мере появления различных потребностей отрасль может гибко двигаться.

Ключевой особенностью REST является включение ссылок на соответствующие ресурсы. Например, если вы просматриваете заказ, API RESTful будет содержать ссылку на связанного клиента, ссылки на каталог товаров и, возможно, ссылку на магазин, из которого был сделан заказ. На этом занятии вы познакомитесь с пейджингом и узнаете, как использовать навигационные пейджинговые ссылки.

Включение подкачки из бэкэнда

Чтобы начать использовать средства управления гипермедиа внешнего интерфейса, вам нужно включить некоторые дополнительные элементы управления. Spring Data REST обеспечивает поддержку подкачки. Чтобы использовать его, просто настройте определение репозитория:

SRC / главная / Java / COM / greglturnquist / начисления заработной платы / EmployeeRepository.java

public interface EmployeeRepository extends PagingAndSortingRepository<Employee, Long> {

}

$ curl localhost:8080/api/employees?size=2
{
  "_links" : {
    "first" : {
      "href" : "http://localhost:8080/api/employees?page=0&size=2"
    },
    "self" : {
      "href" : "http://localhost:8080/api/employees"
    },
    "next" : {
      "href" : "http://localhost:8080/api/employees?page=1&size=2"
    },
    "last" : {
      "href" : "http://localhost:8080/api/employees?page=2&size=2"
    }
  },
  "_embedded" : {
    "employees" : [ {
      "firstName" : "Frodo",
      "lastName" : "Baggins",
      "description" : "ring bearer",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/api/employees/1"
        }
      }
    }, {
      "firstName" : "Bilbo",
      "lastName" : "Baggins",
      "description" : "burglar",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/api/employees/2"
        }
      }
    } ]
  },
  "page" : {
    "size" : 2,
    "totalElements" : 6,
    "totalPages" : 3,
    "number" : 0
  }
}

$ curl "http://localhost:8080/api/employees?page=1&size=2"
{
  "_links" : {
    "first" : {
      "href" : "http://localhost:8080/api/employees?page=0&size=2"
    },
    "prev" : {
      "href" : "http://localhost:8080/api/employees?page=0&size=2"
    },
    "self" : {
      "href" : "http://localhost:8080/api/employees"
    },
    "next" : {
      "href" : "http://localhost:8080/api/employees?page=2&size=2"
    },
    "last" : {
      "href" : "http://localhost:8080/api/employees?page=2&size=2"
    }
  },
...

...
var root = '/api';
...

componentDidMount: function () {
    this.loadFromServer(this.state.pageSize);
},

loadFromServer: function (pageSize) {
    follow(client, root, [
        {rel: 'employees', params: {size: pageSize}}]
    ).then(employeeCollection => {
        return client({
            method: 'GET',
            path: employeeCollection.entity._links.profile.href,
            headers: {'Accept': 'application/schema+json'}
        }).then(schema => {
            this.schema = schema.entity;
            return employeeCollection;
        });
    }).done(employeeCollection => {
        this.setState({
            employees: employeeCollection.entity._embedded.employees,
            attributes: Object.keys(this.schema.properties),
            pageSize: pageSize,
            links: employeeCollection.entity._links});
    });
},

$ curl http://localhost:8080/api/profile/employees -H 'Accept:application/schema+json'
{
  "title" : "Employee",
  "properties" : {
    "firstName" : {
      "title" : "First name",
      "readOnly" : false,
      "type" : "string"
    },
    "lastName" : {
      "title" : "Last name",
      "readOnly" : false,
      "type" : "string"
    },
    "description" : {
      "title" : "Description",
      "readOnly" : false,
      "type" : "string"
    }
  },
  "definitions" : { },
  "type" : "object",
  "$schema" : "http://json-schema.org/draft-04/schema#"
}

var CreateDialog = React.createClass({

    handleSubmit: function (e) {
        e.preventDefault();
        var newEmployee = {};
        this.props.attributes.forEach(attribute => {
            newEmployee[attribute] = React.findDOMNode(this.refs[attribute]).value.trim();
        });
        this.props.onCreate(newEmployee);

        // clear out the dialog's inputs
        this.props.attributes.forEach(attribute => {
            React.findDOMNode(this.refs[attribute]).value = '';
        });

        // Navigate away from the dialog to hide it.
        window.location = "#";
    },

    render: function () {
        var inputs = this.props.attributes.map(attribute =>
            <p key={attribute}>
                <input type="text" placeholder={attribute} ref={attribute} className="field" />
            </p>
        );

        return (
            <div>
                <a href="#createEmployee">Create</a>

                <div id="createEmployee" className="modalDialog">
                    <div>
                        <a href="#" title="Close" className="close">X</a>

                        <h2>Create new employee</h2>

                        <form>
                            {inputs}
                            <button onClick={this.handleSubmit}>Create</button>
                        </form>
                    </div>
                </div>
            </div>
        )
    }

});

onCreate: function (newEmployee) {
    follow(client, root, ['employees']).then(employeeCollection => {
        return client({
            method: 'POST',
            path: employeeCollection.entity._links.self.href,
            entity: newEmployee,
            headers: {'Content-Type': 'application/json'}
        })
    }).then(response => {
        return follow(client, root, [
            {rel: 'employees', params: {'size': this.state.pageSize}}]);
    }).done(response => {
        this.onNavigate(response.entity._links.last.href);
    });
},

when.promise(async_func_call())
.then(function(results) {
/* process the outcome of async_func_call */
})
.then(function(more_results) {
/* process the previous then() return value */
})
.done(function(yet_more) {
/* process the previous then() and wrap things up */
});

onNavigate: function(navUri) {
    client({method: 'GET', path: navUri}).done(employeeCollection => {
        this.setState({
            employees: employeeCollection.entity._embedded.employees,
            attributes: this.state.attributes,
            pageSize: this.state.pageSize,
            links: employeeCollection.entity._links
        });
    });
},

handleNavFirst: function(e){
    e.preventDefault();
    this.props.onNavigate(this.props.links.first.href);
},
handleNavPrev: function(e) {
    e.preventDefault();
    this.props.onNavigate(this.props.links.prev.href);
},
handleNavNext: function(e) {
    e.preventDefault();
    this.props.onNavigate(this.props.links.next.href);
},
handleNavLast: function(e) {
    e.preventDefault();
    this.props.onNavigate(this.props.links.last.href);
},

render: function () {
    var employees = this.props.employees.map(employee =>
        <Employee key={employee._links.self.href} employee={employee} onDelete={this.props.onDelete}/>
    );

    var navLinks = [];
    if ("first" in this.props.links) {
        navLinks.push(<button key="first" onClick={this.handleNavFirst}>&lt;&lt;</button>);
    }
    if ("prev" in this.props.links) {
        navLinks.push(<button key="prev" onClick={this.handleNavPrev}>&lt;</button>);
    }
    if ("next" in this.props.links) {
        navLinks.push(<button key="next" onClick={this.handleNavNext}>&gt;</button>);
    }
    if ("last" in this.props.links) {
        navLinks.push(<button key="last" onClick={this.handleNavLast}>&gt;&gt;</button>);
    }

    return (
        <div>
            <input ref="pageSize" defaultValue={this.props.pageSize} onInput={this.handleInput}/>
            <table>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Description</th>
                    <th></th>
                </tr>
                {employees}
            </table>
            <div>
                {navLinks}
            </div>
        </div>
    )
}

var Employee = React.createClass({
    handleDelete: function () {
        this.props.onDelete(this.props.employee);
    },
    render: function () {
        return (
            <tr>
                <td>{this.props.employee.firstName}</td>
                <td>{this.props.employee.lastName}</td>
                <td>{this.props.employee.description}</td>
                <td>
                    <button onClick={this.handleDelete}>Delete</button>
                </td>
            </tr>
        )
    }
})

onDelete: function (employee) {
    client({method: 'DELETE', path: employee._links.self.href}).done(response => {
        this.loadFromServer(this.state.pageSize);
    });
},

handleInput: function (e) {
    e.preventDefault();
    var pageSize = React.findDOMNode(this.refs.pageSize).value;
    if (/^[0-9]+$/.test(pageSize)) {
        this.props.updatePageSize(pageSize);
    } else {
        React.findDOMNode(this.refs.pageSize).value =
            pageSize.substring(0, pageSize.length - 1);
    }
},

updatePageSize: function (pageSize) {
    if (pageSize !== this.state.pageSize) {
        this.loadFromServer(pageSize);
    }
},