處理用戶輸入

該函數首先阻止事件在層次結構中進一步冒泡。然后，它使用相同的 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                  )  }}