将现有数据库记录加载到 React.js 表单

2020-10-10 08:00:00 · 飞浪

只需几行代码，您就可以拥有一个可回收的组件，用于处理数据库记录的创建和更新。

介绍

任何信息系统中的常见操作都是针对数据库中的记录执行创建、读取、更新和删除(CRUD) 操作。在本指南中，我们将研究如何在 React.js 应用程序上下文中执行创建和更新部分。该组件应该能够提供一个表单，用于将信息保存为新记录或更新现有记录。在传统方法中，为了区分来自表单的创建和更新，必须存在id值以指示表单详细信息将执行更新而不是创建。然而，这是一个安全风险，因为id有时会作为 HTML 中的隐藏值或要连接的 URL 的一部分公开。在本指南中，我们将看到，我们可以使用 React.js 的状态管理方法仅在 React.js 逻辑中而不是在界面本身中维护id值。

在开始之前，让我们做三个假设：

我们将保存一个具有id、first_name和last_name的模拟人的对象。
React.js 与在https://localhost:3000/api/v1/people/save中运行的后端 API 交互。
要获取现有人员的数据，我们可以通过端点https://localhost:3000/api/v1/people/fetch中的 GET 请求访问 API 。

本指南将在最后的Rails 服务器代码部分中提供一组有关如何使用 Ruby on Rails 实现后端的简单说明。无论如何，您仍然可以使用自己喜欢的框架来实现满足上述假设的后端。

创建表单组件

创建一个初始组件，维护反映人员数据模型的id、first_name和last_name状态。

      import React from 'react';
import $ from 'jquery';

export default class PersonForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      id: props.id,
      firstName: "",
      lastName: ""
    }
  }

  updateFirstName(event) {
    this.setState({
      firstName: event.target.value 
    });
  }

  updateLastName(event) {
    this.setState({
      lastName: event.target.value 
    });
  }

  render() {
    return (
      <div>
        First Name:
        <input type="text" value={this.state.firstName} onChange={this.updateFirstName.bind(this)} />
        Last Name:
        <input type="text" value={this.state.lastName} onChange={this.updateLastName.bind(this)} />
        <hr/>

        <button>
          Save
        </button>
      </div>
    );
  }
}
    

这是一个标准的 React.js 组件，其中的逻辑最少，即利用updateFirstName和updateLastName方法在用户更改某些内容时更新firstName和lastName的状态。还要注意，在构造函数中，你可以将id作为props的一部分传递。这表明可以挂载此组件并从调用它的父级传递id，这将提供执行更新的信息。或者，你也可以不传递 id，这表明你正在使用该组件创建新记录。

与 API 交互

创建一个方法，对 API 端点/api/v1/people/save执行 POST 。该方法如下所示：

      save() {
  var context = this;

  $.ajax({
    url: "http://localhost:3000/api/v1/people/save",
    method: "POST",
    data: {
      id: context.state.id,
      first_name: context.state.firstName,
      last_name: context.state.lastName
    },
    success: function(response) {
      alert("Successfully saved record!");
    },
    error: function(response) {
      alert("Error in saving record!");
    }
  });
}
    

请注意，您首先必须为此创建一个代理，以便您仍然可以在ajax调用中引用此组件的实例，例如访问当前状态值context.state.id、context.state.firstName和context.state.lastName。这将针对 API 执行 POST 方法。如果没有提供id，则它会创建一条记录。但如果最初通过props向组件提供了id，那么后端应该执行更新。

最后，将保存方法连接到组件按钮的onClick属性：

      <button onClick={this.save.bind(this)}>
  Save
</button>
    

Rails 服务器代码

确保您有一个符合前面提到的规格的应用服务器。本节将允许您使用 sqlite 数据库实现用 Ruby on Rails 编写的后端服务器，这样您除了 Rails 之外就不会有任何依赖项。

创建一个新项目。

      $ rails new sampleapi
$ cd sampleapi
    

为人创建一个模型并将其加载到数据库中。

      $ rails g model Person first_name:string last_name:string
$ rake db:migrate
    

在文件config/routes.rb中，创建 API 路由定义。

      namepsace :api do
  namespace :v1 do
    get "/people/fetch", to: "people#fetch"
    post "/people/save", to: "people#save"
  end
end
    

在app/controllers/api/v1/people_controller.rb中为 API 创建一个控制器。

      module Api
  module V1
    class PeopleController < ApplicationController
      protect_from_forgery with: :null_session

      def fetch
        person = Person.find(params[:id])

        render json: person
      end

      def save
        person = Person.find_by_id(params[:id])

        if person.present?
          person.first_name = params[:first_name]
          person.last_name  = params[:last_name]
        else
          person = Person.new(first_name: params[:first_name], last_name: params[:last_name])
        end

        person.save!

        render json: { message: "success", id: person.id }
      end
    end
  end
end
    

运行服务器并将其绑定到本地主机。

      $ rails server -b 127.0.0.1

总体代码

最终代码应如下所示：

      import React from 'react';
import $ from 'jquery';

export default class PersonForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      id: props.id,
      firstName: "",
      lastName: ""
    }
  }

  updateFirstName(event) {
    this.setState({
      firstName: event.target.value 
    });
  }

  updateLastName(event) {
    this.setState({
      lastName: event.target.value 
    });
  }

  save() {
    var context = this;

    $.ajax({
      url: "http://localhost:3000/api/v1/people/save",
      method: "POST",
      data: {
        id: context.state.id,
        first_name: context.state.firstName,
        last_name: context.state.lastName
      },
      success: function(response) {
        alert("Successfully saved record!");
      },
      error: function(response) {
        alert("Error in saving record!");
      }
    });
  }

  render() {
    return (
      <div>
        First Name:
        <input type="text" value={this.state.firstName} onChange={this.updateFirstName.bind(this)} />
        Last Name:
        <input type="text" value={this.state.lastName} onChange={this.updateLastName.bind(this)} />
        <hr/>

        <button onClick={this.save.bind(this)}>
          Save
        </button>
      </div>
    );
  }
}
    

结论

只需几行代码，您现在就拥有一个可回收的组件，它可以处理从数据库创建和更新记录。当然，管理的信息在很大程度上取决于指定的属性以及要连接的 API 端点。但是，这种方法的重点是您可以利用 React.js 的状态管理机制来创建一个表单，该表单的界面反映了后端的现有架构。与其他方法相比，这种方法被认为更安全，因为 id 值永远不会在用户界面中公开。

作为一项挑战，我故意省略了从数据库获取记录的逻辑。试着看看你是否可以编写一个名为fetch(id)的方法，其逻辑是调用/api/v1/people/fetch并通过在fetch(id)<font style="vertical-align: inherit;"

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

将现有数据库记录加载到 React.js 表单

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

save() { var context = this; $.ajax({ url: "http://localhost:3000/api/v1/people/save", method: "POST", data: { id: context.state.id, first_name: context.state.firstName, last_name: context.state.lastName }, success: function(response) { alert("Successfully saved record!"); }, error: function(response) { alert("Error in saving record!"); } }); }

module Api module V1 class PeopleController < ApplicationController protect_from_forgery with: :null_session def fetch person = Person.find(params[:id]) render json: person end def save person = Person.find_by_id(params[:id]) if person.present? person.first_name = params[:first_name] person.last_name = params[:last_name] else person = Person.new(first_name: params[:first_name], last_name: params[:last_name]) end person.save! render json: { message: "success", id: person.id } end end end end

import React from 'react'; import $ from 'jquery'; export default class PersonForm extends React.Component { constructor(props) { super(props); this.state = { id: props.id, firstName: "", lastName: "" } } updateFirstName(event) { this.setState({ firstName: event.target.value }); } updateLastName(event) { this.setState({ lastName: event.target.value }); } save() { var context = this; $.ajax({ url: "http://localhost:3000/api/v1/people/save", method: "POST", data: { id: context.state.id, first_name: context.state.firstName, last_name: context.state.lastName }, success: function(response) { alert("Successfully saved record!"); }, error: function(response) { alert("Error in saving record!"); } }); } render() { return ( <div> First Name: <input type="text" value={this.state.firstName} onChange={this.updateFirstName.bind(this)} /> Last Name: <input type="text" value={this.state.lastName} onChange={this.updateLastName.bind(this)} /> <hr/> <button onClick={this.save.bind(this)}> Save </button> </div> ); } }