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" : "https://json-schema.fullstack.org.cn/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>
    )
}

});

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(&lt;button key="first" onClick={this.handleNavFirst}&gt;&amp;lt;&amp;lt;&lt;/button&gt;);
}
if ("prev" in this.props.links) {
    navLinks.push(&lt;button key="prev" onClick={this.handleNavPrev}&gt;&amp;lt;&lt;/button&gt;);
}
if ("next" in this.props.links) {
    navLinks.push(&lt;button key="next" onClick={this.handleNavNext}&gt;&amp;gt;&lt;/button&gt;);
}
if ("last" in this.props.links) {
    navLinks.push(&lt;button key="last" onClick={this.handleNavLast}&gt;&amp;gt;&amp;gt;&lt;/button&gt;);
}

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

}

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);
    }
},

整合所有功能

有了这些不错的补充，你现在拥有了一个真正增强的 UI。

你可以在顶部看到页面大小设置，每行的删除按钮，以及底部的导航按钮。导航按钮展示了超媒体控件的一个强大特性。

在下方，你可以看到CreateDialog，元数据已插入到 HTML 输入占位符中。

这真正展示了超媒体与领域驱动元数据（JSON Schema）结合的强大之处。网页不需要知道哪个字段是哪个。相反，用户可以看到它并知道如何使用它。如果你向Employee领域对象添加另一个字段，这个弹出窗口会自动显示它。