[JAVA] [Rails] Implementierung der automatischen Adresseneingabe mit jpostal und jp_prefecture

Ziel

** Wenn Sie die Postleitzahl auf dem Bildschirm für die Registrierung neuer Benutzer eingeben, werden die nachfolgenden Adressen (bis zur Adresse) automatisch eingegeben. ** ** **

Entwicklungsumgebung

・ Ruby: 2.5.7 Schienen: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Betriebssystem: macOS Catalina

Annahme

Folgendes wurde implementiert.

・ Schlanke Einführung ・ Einführung von Bootstrap 3

• Implementierung der Anmeldefunktion

Implementierung

1. Einführung des jQuery-Plug-Ins

** ① Greifen Sie auf den unten stehenden Link zu. ** ** **

jpostal GitHub

** ② Klicken Sie auf "Klonen oder herunterladen" **

** ③ Klicken Sie auf Download ZIP **

** ④ Platzieren Sie jquery.jpostal.js im heruntergeladenen Ordner in app / assets / javascript. ** ** **

2. Stellen Sie Gem vor

Gemfile

gem 'jquery-rails'
gem 'jp_prefecture'

Terminal

$ bundle

application.js

//= require rails-ujs
//= require activestorage
//= require turbolinks 
//= require jquery //Unten beschrieben Turbolinks
//= require_tree .

3. Spalte hinzufügen

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. Bearbeiten Sie das Modell

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

[Erläuterung]

python

include JpPrefecture
jp_prefecture :prefecture_code

➡︎ Konvertieren Sie automatisch vom Präfekturcode in den Präfekturnamen.

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

➡︎ Machen Sie es möglich, mit ~ .prefecture_name auf den Präfekturnamen zu verweisen. Beispiel) @ user.prefecture_name kann die Adresse (Präfektur) des entsprechenden Benutzers anzeigen.

5. Bearbeiten Sie den Controller

Fügen Sie dem starken Parameter Adressinformationen hinzu.

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. Ansicht bearbeiten

slim:registrations/new.html.slim

/Nachtrag
= f.label :postcode, 'Postleitzahl'
br
= f.text_field :postcode, autocomplete: 'postcode', class: 'form-control'
br

= f.label :prefecture_name, 'Präfekturen'
br
/Zeigen Sie 47 Präfekturen mit Pulldown-Menü an
= f.collection_select :prefecture_code, JpPrefecture::Prefecture.all, :code, :name, { prompt: 'Bitte auswählen' }, class: 'form-control'
br

= f.label :address_city, 'Gemeinde'
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, 'Gebäude'
br
= f.text_field :address_building, autocomplete: 'address_building', class: 'form-control'
br

7. Erstellen / bearbeiten Sie eine JavaScript-Datei

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