[JAVA] Rails et données de forme

Rails and FormData

Articles sur les rails et Form Data. J'écris en anglais et en japonais.

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

J'ai récemment remplacé Rails Form par un système basé sur l'API. Autrement dit, au lieu de Form, j'ai travaillé avec le backend avec une requête XHR (axios).

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

Cet article utilise un modèle utilisateur typique.

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

Problème / problème

Utilisation du formulaire Rails ・ Utilisation du formulaire Rails

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

Si vous utilisez Rails Form, vous trouverez les paramètres suivants dans le contrôleur.

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

Utilisation de FormData ・ Utilisation de FormData

Lorsque j'ai créé le corps de la requête, j'ai utilisé FormData.

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',
            },
          })
...
    

Le contrôleur de rails a la réponse suivante.

On the Rails backend we get:

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

Point clé:

• Comme les attributs sont de niveau supérieur, des problèmes avec le même nom peuvent survenir.
• Ce n'est pas un modèle Rails.

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

Solution / Solution

La solution a été écrite à l'origine par @jugtuttle on Medium, mais avec le nom du modèle comme clé. S'il est inclus, c'est un succès.

@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',
            },
          })
...
    

Pour faciliter les choses:

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',
            },
          })
...
    

Résultat / Résultat

Le contrôleur Rails a les états suivants:

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