处理用户输入

该函数首先阻止事件在层次结构中进一步冒泡。然后，它使用相同的 JSON 架构属性属性来查找每个 ，方法是使用 。​​handleSubmit()​​​​​​​​React.findDOMNode(this.refs[attribute])​​

​​this.refs​​​是一种按名称获取特定 React 组件的方法。请注意，您只获得虚拟 DOM 组件。要获取实际的 DOM 元素，您需要使用 .​​React.findDOMNode()​​

在遍历每个输入并构建对象后，我们为新员工记录调用回调。这个函数在里面，并作为另一个属性提供给这个 React 组件。看看这个顶级函数是如何运作的：​​newEmployee​​​​onCreate()​​​​App.onCreate​​

onCreate(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 => {    if (typeof response.entity._links.last !== "undefined") {      this.onNavigate(response.entity._links.last.href);    } else {      this.onNavigate(response.entity._links.self.href);    }  });}

再一次，我们使用该函数导航到执行 POST 操作的资源。在这种情况下，不需要应用任何参数，因此基于字符串的实例数组很好。在此情况下，将返回调用。这允许下一个子句处理 .​​follow()​​​​employees​​​​rel​​​​POST​​​​then()​​​​POST​​

新记录通常会添加到数据集的末尾。由于您正在查看某个页面，因此期望新员工记录不在当前页面上是合乎逻辑的。要处理此问题，您需要获取应用了相同页面大小的新一批数据。该承诺在里面的最后一个条款中返回。​​done()​​

由于用户可能希望查看新创建的员工，因此您可以使用超媒体控件并导航到该条目。​​last​​

首次使用基于承诺的 API？承诺是一种启动异步操作，然后注册函数以在任务完成时响应的方法。承诺被设计为链接在一起以避免“回调地狱”。请看以程：

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 */  });

有关更多详细信息，请查看这个关于承诺的教程.

关于 promise 要记住的秘密是，函数需要返回一些东西，无论是值还是另一个 promise。 函数不返回任何内容，并且您不会在 1 之后链接任何内容。如果你还没有注意到，（这是 from rest.js 的一个实例）和函数返回 promise。​​then()​​​​done()​​​​client​​​​rest​​​​follow​​

分页数据

您已经在后端设置了分页，并且在创建新员工时已经开始利用它。

在上一节，您使用页面控件跳转到页面。将其动态应用于 UI 并让用户根据需要导航非常方便。根据可用的导航链接动态调整控件会很棒。​​last​​

首先，让我们看看您使用的函数：​​onNavigate()​​

onNavigate(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    });  });}

这是在顶部的 .同样，这是为了允许在顶部组件中管理 UI 的状态。在传递给 React 组件后，以下处理程序被编码以处理某些按钮的单击：​​App.onNavigate​​​​onNavigate()​​​​​​

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

这些函数中的每一个都截获默认事件并阻止它冒泡。然后，它使用正确的超媒体链接调用该函数。​​onNavigate()​​

现在，您可以根据以下超媒体链接中显示的链接有条件地显示控件：​​EmployeeList.render​​

render() {  const employees = this.props.employees.map(employee =>      );  const navLinks = [];  if ("first" in this.props.links) {    navLinks.push(<<);  }  if ("prev" in this.props.links) {    navLinks.push(<);  }  if ("next" in this.props.links) {    navLinks.push(>);  }  if ("last" in this.props.links) {    navLinks.push(>>);  }  return (    
                      {employees}        
        
          
            
First Name
            
Last Name
            
Description
            
          
      
      
        {navLinks}      
    
  )}

与上一节一样，它仍会转换为组件数组。然后它构建一个数组作为 HTML 按钮数组。​​this.props.employees​​​​​​​​navLinks​​

然后，您可以看到插入到返回的HTML的底部。​​{navLinks}​​

删除现有记录

删除条目要容易得多。您需要做的就是获取其基于 HAL 的记录并应用于其链接：​​DELETE​​​​self​​

class Employee extends React.Component {  constructor(props) {    super(props);    this.handleDelete = this.handleDelete.bind(this);  }  handleDelete() {    this.props.onDelete(this.props.employee);  }  render() {    return (              {this.props.employee.firstName}        {this.props.employee.lastName}        {this.props.employee.description}                  Delete                  )  }}

此更新版本的 Employee 组件在行末尾显示一个额外的条目（删除按钮）。它被注册为在单击时调用。然后，该函数可以调用传递的回调，同时提供上下文重要的记录。​​this.handleDelete​​​​handleDelete()​​​​this.props.employee​​

通过将函数追溯到顶部，您可以看到它是如何工作的：​​onDelete()​​​​App.onDelete​​

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

使用基于页面的 UI 删除记录后要应用的行为有点棘手。在这种情况下，它会从服务器重新加载整个数据，应用相同的页面大小。然后它显示第一页。

如果要删除最后一页上的最后一条记录，它将跳转到第一页。

调整页面大小

了解超媒体如何真正发光的一种方法是更新页面大小。Spring Data REST 根据页面大小流畅地更新导航链接。

在 的顶部有一个 HTML 元素： 。​​ElementList.render​​​​​​

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

它可以阻止事件冒泡。然后它使用 的属性来查找 DOM 节点并提取其值，所有这些都是通过 React 的辅助函数完成的。它通过检查输入是否是一串数字来测试输入是否真的是一个数字。如果是这样，它会调用回调，将新的页面大小发送到 React 组件。否则，刚输入的字符将从输入中删除。​​ref​​​​​​​​findDOMNode()​​​​App​​

当它得到一个 ？看看吧：​​App​​​​updatePageSize()​​

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

由于新的页面大小值会导致所有导航链接发生更改，因此最好重新获取数据并从头开始。

将一切整合在一起

有了所有这些不错的补充，你现在有一个真正被吸干的 UI，如下图所示：

您可以在顶部看到页面大小设置，每行上的删除按钮以及底部的导航按钮。导航按钮演示了超媒体控件的强大功能。

在下图中，您可以看到将元数据插入到 HTML 输入占位符中：​​CreateDialog​​

这确实显示了使用超媒体与域驱动的元数据（JSON 模式）相结合的强大功能。网页不必知道哪个字段是哪个字段。相反，用户可以看到它并知道如何使用它。如果将其他字段添加到域对象，此弹出窗口将自动显示该字段。​​Employee​​

回顾

在本节中：

问题？

您使网页动态化。但是打开另一个浏览器选项卡并将其指向同一应用程序。一个选项卡中的更改不会更新另一个选项卡中的任何内容。

我们将在下一节中讨论该问题。

第 3 部分 - 条件操作

在上一节，您了解了如何打开 Spring Data REST 的超媒体控件，如何让 UI 通过分页进行导航，以及如何根据更改页面大小动态调整大小。您添加了创建和删除员工以及调整页面的功能。但是，如果不考虑其他用户对您当前正在编辑的相同数据所做的更新，任何解决方案都是不完整的。

随意获取代码从此存储库并继续操作。本节基于上一节，但添加了额外的功能。

放还是不放？这就是问题所在。

当您获取资源时，风险是如果其他人更新它，它可能会过时。为了解决这个问题，Spring Data REST集成了两种技术：资源版本控制和ETag。

通过在后端对资源进行版本控制并在前端使用 ETag，可以有条件地进行更改。换句话说，您可以检测资源是否已更改，并防止 （或 ） 踩踏其他人的更新。​​PUT​​​​PUT​​​​PATCH​​

对 REST 资源进行版本控制

若要支持资源的版本控制，请为需要此类型保护的域对象定义版本属性。下面的清单显示了如何对对象执行此操作：​​Employee​​

例 17.src/main/java/com/greglturnquist/payroll/Employee.java

@Entitypublic class Employee {  private @Id @GeneratedValue Long id;  private String firstName;  private String lastName;  private String description;  private @Version @JsonIgnore Long version;  private Employee() {}  public Employee(String firstName, String lastName, String description) {    this.firstName = firstName;    this.lastName = lastName;    this.description = description;  }  @Override  public boolean equals(Object o) {    if (this == o) return true;    if (o == null || getClass() != o.getClass()) return false;    Employee employee = (Employee) o;    return Objects.equals(id, employee.id) &&      Objects.equals(firstName, employee.firstName) &&      Objects.equals(lastName, employee.lastName) &&      Objects.equals(description, employee.description) &&      Objects.equals(version, employee.version);  }  @Override  public int hashCode() {    return Objects.hash(id, firstName, lastName, description, version);  }  public Long getId() {    return id;  }  public void setId(Long id) {    this.id = id;  }  public String getFirstName() {    return firstName;  }  public void setFirstName(String firstName) {    this.firstName = firstName;  }  public String getLastName() {    return lastName;  }  public void setLastName(String lastName) {    this.lastName = lastName;  }  public String getDescription() {    return description;  }  public void setDescription(String description) {    this.description = description;  }  public Long getVersion() {    return version;  }  public void setVersion(Long version) {    this.version = version;  }  @Override  public String toString() {    return "Employee{" +      "id=" + id +      ", firstName="" + firstName + "\"" +      ", lastName="" + lastName + "\"" +      ", description="" + description + "\"" +      ", version=" + version +      "}";  }}

当获取单个资源（不是集合资源）时，Spring Data REST 会自动添加一个ETag 响应标头与此字段的值。

获取单个资源及其标头

在上一节，您使用集合资源来收集数据并填充 UI 的 HTML 表。使用Spring Data REST，数据集被视为数据的预览。虽然对于浏览数据很有用，但要获取像 ETag 这样的标头，您需要单独获取每个资源。​​_embedded​​

在此版本中，更新为提取集合。然后，可以使用 URI 检索每个单独的资源：​​loadFromServer​​

例 18。src/main/js/app.js - 获取每个资源

loadFromServer(pageSize) {  follow(client, root, [ (1)    {rel: "employees", params: {size: pageSize}}]  ).then(employeeCollection => { (2)    return client({      method: "GET",      path: employeeCollection.entity._links.profile.href,      headers: {"Accept": "application/schema+json"}    }).then(schema => {      this.schema = schema.entity;      this.links = employeeCollection.entity._links;      return employeeCollection;    });  }).then(employeeCollection => { (3)    return employeeCollection.entity._embedded.employees.map(employee =>        client({          method: "GET",          path: employee._links.self.href        })    );  }).then(employeePromises => { (4)    return when.all(employeePromises);  }).done(employees => { (5)    this.setState({      employees: employees,      attributes: Object.keys(this.schema.properties),      pageSize: pageSize,      links: this.links    });  });}

该链也在其他地方实现。例如，（用于跳转到不同页面）已更新为获取单个资源。由于它与此处显示的内容基本相同，因此已将其排除在本节之外。​​onNavigate()​​

更新现有资源

在本节中，您将添加一个 React 组件来编辑现有的员工记录：​​UpdateDialog​​

例 19。src/main/js/app.js - UpdateDialog 组件

class UpdateDialog extends React.Component {  constructor(props) {    super(props);    this.handleSubmit = this.handleSubmit.bind(this);  }  handleSubmit(e) {    e.preventDefault();    const updatedEmployee = {};    this.props.attributes.forEach(attribute => {      updatedEmployee[attribute] = ReactDOM.findDOMNode(this.refs[attribute]).value.trim();    });    this.props.onUpdate(this.props.employee, updatedEmployee);    window.location = "#";  }  render() {    const inputs = this.props.attributes.map(attribute =>      
              
    );    const dialogId = "updateEmployee-" + this.props.employee.entity._links.self.href;    return (      
        Update        
          
            X            
Update an employee
            
              {inputs}              Update            
          
        
      
    )  }};

这个新组件同时具有函数和预期函数，类似于组件。​​handleSubmit()​​​​render()​​​​​​

我们以相反的顺序深入研究这些函数，首先看一下函数。​​render()​​

渲染

此组件使用与上一节相同的 CSS/HTML 策略来显示和隐藏对话框。​​​​

它将 JSON 架构属性数组转换为 HTML 输入数组，这些输入包含在段落元素中以进行样式设置。这也与 相同，但有一个区别：字段加载了 .在组件中，字段为空。​​​​​​this.props.employee​​​​CreateDialog​​

该字段的构建方式不同。整个 UI 上只有一个链接，但显示的每一行都有一个单独的链接。因此，该字段基于链接的 URI。这在元素的 React 、HTML 锚标记和隐藏弹出窗口中使用。​​id​​​​CreateDialog​​​​UpdateDialog​​​​id​​​​self​​​​

onUpdate(employee, updatedEmployee) {  client({    method: "PUT",    path: employee.entity._links.self.href,    entity: updatedEmployee,    headers: {      "Content-Type": "application/json",      "If-Match": employee.headers.Etag    }  }).done(response => {    this.loadFromServer(this.state.pageSize);  }, response => {    if (response.status.code === 412) {      alert("DENIED: Unable to update " +        employee.entity._links.self.href + ". Your copy is stale.");    }  });}

class Employee extends React.Component {  constructor(props) {    super(props);    this.handleDelete = this.handleDelete.bind(this);  }  handleDelete() {    this.props.onDelete(this.props.employee);  }  render() {    return (              {this.props.employee.entity.firstName}        {this.props.employee.entity.lastName}        {this.props.employee.entity.description}                                            Delete                  )  }}