[JAVA] Schienen und Formulardaten

Rails and FormData

Artikel über Schienen und Formulardaten. Ich schreibe sowohl auf Englisch als auch auf Japanisch.

This post talks about using WebAPI's FormData with Rails.

Ich habe kürzlich Rails Form durch ein API-basiertes System ersetzt. Das heißt, anstelle von Form habe ich mit dem Backend mit einer XHR-Anfrage (axios) gearbeitet.

We recently migrated from using Rails formstoanAPIbasedappwheredataissenttothebackendusingXHRrequests(inourcase,usingaxios).

Dieser Artikel verwendet ein typisches Benutzermodell.

For the following example I will be using a generic User model.

Problem / Problem

Verwenden des Schienenformulars ・ Verwenden des Schienenformulars

<%= form_for @user, url: {action: "create"} do |f| %>
  <%= f.text_field :name %> # "Yokoyama"
  <%= f.text_field :role %> # "Developer"
  <%= f.submit "Create" %>
<% end %>

Wenn Sie Rails Form verwenden, finden Sie die folgenden Parameter im Controller.

If we were using Rails forms then we'd normally get:

def create
 # params = <ActionController::Parameters
 # {
 #  "user" => {
 #    "name"=>"Yokoyama",
 #	  "role"=>"Developer"
 #  },
 #	"controller"=>"...",
 #	"action"=>"create",
 # }
 # permitted: false>
  ...
end

Verwenden von FormData ・ Verwenden von FormData

Als ich den Anfragetext erstellt habe, habe ich FormData verwendet.

When packaging a body for a POST/PATCH request we used FormData.

const formData = new FormData();

formData.append('name','Yokoyama');
formData.append('role','Developer');

const url = 'user create link';
axios.post(url, formData, {
            headers: {
              'content-type': 'multipart/form-data',
            },
          })
...
    

Der Rails Controller hat die folgende Antwort.

On the Rails backend we get:

def create
 # params = <ActionController::Parameters
 # {
 #  "name"=>"Yokoyama",
 #	"role"=>"Developer",
 #	"controller"=>"...",
 #	"action"=>"create",
 # }
 # permitted: false>
  ...
end

Kernpunkt:

• Da die Attribute der obersten Ebene entsprechen, können Probleme mit demselben Namen auftreten.
• Es ist kein Rails-Muster.

As you can see:

• All attributes are scoped to the top level, which will cause issues if there are name conflicts
• It's also just against the typical Rails pattern

Lösung / Lösung

Die Lösung wurde ursprünglich von @jugtuttle on Medium geschrieben, jedoch mit dem Modellnamen als Schlüssel. Wenn es enthalten ist, ist es ein Erfolg.

@jugtuttle on Medium pointed out that you can simply use a key that has the model name. So in our case:

const formData = new FormData();

formData.append('user[name]','Yokoyama');
formData.append('user[role]','Developer');

axios.post('insert user path here', formData, {
            headers: {
              'content-type': 'multipart/form-data',
            },
          })
...
    

Zu erleichtern:

To make it even easier:

// rails_form_data.js

class RailsFormData extends FormData {
  constructor(model) {
    super();
    this.model = model;
  }

  append(key, value) {
    super.append(`${this.model}[${key}]`, value);
  }
}

export default RailsFormData;

import RailsFormData from '...'

const formData = new RailsFormData('user');

formData.append('name','Yokoyama');
formData.append('role','Developer');

axios.post('insert user path here', formData, {
            headers: {
              'content-type': 'multipart/form-data',
            },
          })
...
    

Ergebnis / Ergebnis

Der Rails-Controller hat die folgenden Zustände:

Then on the Rails backend side you'll get:

def create
  #  params = <ActionController::Parameters
  #  {
  #    "user" => {
  #      "name"=>"Yokoyama",
  #	     "role"=>"Developer"
  #    },
  #	   "controller"=>"...",
  #	   "action"=>"create",
  # }
  # permitted: false>
  ...
end