[JAVA] [Rails] Implémentation de la saisie d'adresse automatique avec jpostal et jp_prefecture

Cible

** Si vous entrez le code postal sur l'écran d'enregistrement du nouvel utilisateur, les adresses suivantes (jusqu'à l'adresse) seront automatiquement entrées. ** **

Environnement de développement

・ Rubis: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Système d'exploitation: macOS Catalina

supposition

Ce qui suit a été mis en œuvre.

・ Présentation mince ・ Introduction de Bootstrap 3

• Implémentation de la fonction de connexion

la mise en oeuvre

1. Introduction du plug-in jQuery

** ① Accédez au lien ci-dessous. ** **

jpostal GitHub

** ② Cliquez sur "Cloner ou télécharger" **

** ③ Cliquez sur Télécharger ZIP **

** ④ Placez jquery.jpostal.js dans le dossier téléchargé dans ʻapp / assets / javascript`. ** **

2. Présentez Gem

Gemfile

gem 'jquery-rails'
gem 'jp_prefecture'

Terminal

$ bundle

application.js

//= require rails-ujs
//= require activestorage
//= require turbolinks 
//= require jquery //Décrit ci-dessous turbolinks
//= require_tree .

3. Ajouter une colonne

Terminal

$ rails g migration AddColumnsToUsers postcode:integer prefecture_code:integer address_city:string address_street:string address_building:string

~_add_columns_to_users.rb

class AddColumnsToUsers < ActiveRecord::Migration[5.2]
  def change
    add_column :users, :postcode, :integer
    add_column :users, :prefecture_code, :integer
    add_column :users, :address_city, :string
    add_column :users, :address_street, :string
    add_column :users, :address_building, :string
  end
end

Terminal

$ rails db:migrate

4. Modifiez le modèle

user.rb

include JpPrefecture
jp_prefecture :prefecture_code

def prefecture_name
  JpPrefecture::Prefecture.find(code: prefecture_code).try(:name)
end

def prefecture_name=(prefecture_name)
  self.prefecture_code = JpPrefecture::Prefecture.find(name: prefecture_name).code
end

[Explication]

python

include JpPrefecture
jp_prefecture :prefecture_code

➡︎ Conversion automatique du code de préfecture en nom de préfecture.

python

def prefecture_name
  JpPrefecture::Prefecture.find(code: prefecture_code).try(:name)
end

def prefecture_name=(prefecture_name)
  self.prefecture_code = JpPrefecture::Prefecture.find(name: prefecture_name).code
end

➡︎ Rendre possible la référence au nom de la préfecture avec ~ .prefecture_name. Exemple) @ user.prefecture_name peut afficher l'adresse (préfecture) de l'utilisateur correspondant.

5. Modifiez le contrôleur

Ajoutez des informations d'adresse au paramètre fort.

application_controller.rb

def configure_permitted_parameters
  devise_parameter_sanitizer.permit(:sign_up, keys: [
    :email,
    :name,
    :postcode,
    :prefecture_name,
    :address_city,
    :address_street,
    :address_building
  ])
end

6. Modifier la vue

slim:registrations/new.html.slim

/Postscript
= f.label :postcode, 'Code postal'
br
= f.text_field :postcode, autocomplete: 'postcode', class: 'form-control'
br

= f.label :prefecture_name, 'Préfectures'
br
/Afficher 47 préfectures avec menu déroulant
= f.collection_select :prefecture_code, JpPrefecture::Prefecture.all, :code, :name, { prompt: 'Veuillez sélectionner' }, class: 'form-control'
br

= f.label :address_city, 'Municipalité'
br
= f.text_field :address_city, autocomplete: 'address_city', class: 'form-control'
br

= f.label :address_street, 'adresse'
br
= f.text_field :address_stree, autocomplete: 'address_street', class: 'form-control'
br

= f.label :address_building, 'bâtiment'
br
= f.text_field :address_building, autocomplete: 'address_building', class: 'form-control'
br

7. Créer / modifier un fichier JavaScript

Terminal

$ touch app/assets/javascripts/address_autofill.js

address_autofill.js

$(function() {
  return $('#user_postcode').jpostal({
    postcode: ['#user_postcode'],
    address: {
      '#user_prefecture_code': '%3',
      '#user_address_city': '%4',
      '#user_address_street': '%5%6%7',
    },
  });
});