[Ruby on Rails] Geben Sie automatisch eine Adresse aus einer Postleitzahl ein

Ziel

Entwicklungsumgebung

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

Annahme

• Wenn Sie ▶ ◯◯ auswählen, werden Erklärungen angezeigt. Ich hoffe, Sie können sich darauf beziehen, wenn Sie sich nicht sicher sind.

Erstellt einen Heimcontroller und beschreibt Folgendes.

config/routes.rb

root 'homes#top'
get 'mypage', to: 'homes#mypage'

app/controllers/homes_controller.rb

class HomesController < ApplicationController
 def top
 end
 def mypage
 end
end

fließen

1 Geben Sie in devise eine Adresse ein, um die Anmeldung zu aktivieren 2 Einführung von gem'jp_prefecture 'und gem'jquery-rail' 3 Einführung von jquery.jpostal.js 4 Bearbeiten Sie application.js

1. Melden Sie sich mit Gerät an

• Referenz: Einzelheiten finden Sie hier.

Gemfile

gem 'devise'

Terminal

$ bundle install
$ rails g devise:install
$ rails g devise User

Folgende Beschreibung wurde hinzugefügt.

db/migrate/xxxxxxxxxxxxx_devise_create_users.rb

...

<--von hier-->
      t.integer :postal_code, null: false
      t.string :prefecture_code, null: false
      t.string :city, null: false
      t.string :street, null: false
      t.string :other_address #Null, da nach der Adresse möglicherweise keine Adresse steht:füge nicht false hinzu
<--Addiere hier-->
      t.timestamps null: false
    end

    add_index :users, :email,                unique: true
    add_index :users, :reset_password_token, unique: true
    # add_index :users, :confirmation_token,   unique: true
    # add_index :users, :unlock_token,         unique: true
  end
end

devise:controller

Terminal

rails g devise:controllers users

app/controllers/users/registrations_controller.rb

# frozen_string_literal: true

class Users::RegistrationsController < Devise::RegistrationsController
  before_action :configure_sign_up_params, only: [:create]
  # before_action :configure_account_update_params, only: [:update]

...

  # protected

  # If you have extra params to permit, append them to the sanitizer.
  def configure_sign_up_params
    devise_parameter_sanitizer.permit(:sign_up, keys: [:email, :postal_code, :prefecture_code, :city, :street, :other_address])
  end

  # If you have extra params to permit, append them to the sanitizer.
  # def configure_account_update_params
  #   devise_parameter_sanitizer.permit(:account_update, keys: [:attribute])
  # end

  # The path used after sign up.
  def after_sign_up_path_for(resource)
    mypage_path
  end

  # The path used after sign up for inactive accounts.
  # def after_inactive_sign_up_path_for(resource)
  #   super(resource)
  # end
end

devise:model Die folgende Beschreibung wurde hinzugefügt, um eine Nichteingabe zu verhindern.

app/models/user.rb

  validates :postal_code, presence: true
  validates :prefecture_code, presence: true
  validates :city, presence: true
  validates :street, presence: true

devise:routing

config/routes.rb

Rails.application.routes.draw do
  devise_for :users, controllers: {
    sessions: 'users/sessions',
    registrations: 'users/registrations',
  }

  root 'homes#top'
  get 'mypage', to: 'homes#mypage'
end

devise:view

Terminal

$ rails g devise:views users

Beschrieben in form_for.

erb:app/views/devise/registrations/new.html.erb

form_for...

  <div class="field">
    <%= f.label :postal_code %><br>
    <%= f.text_field :postal_code %>
  </div>

  <div class="field">
    <%= f.label :prefecture_code %><br>
    <%= f.collection_select :prefecture_code, JpPrefecture::Prefecture.all, :name, :name %>
  </div>

  <div class="field">
    <%= f.label :city %><br>
    <%= f.text_field :city %>
  </div>

  <div class="field">
    <%= f.label :street %><br>
    <%= f.text_field :street %>
  </div>
  <div class="field">
    <%= f.label :other_address %><br>
    <%= f.text_field :other_address %>
  </div>


...

Damit ist der neue Registrierungsbildschirm zur Eingabe der Adresse abgeschlossen.

2. Zugabe von Edelstein

Gemfile

gem 'jp_prefecture' #Ein Juwel, das einen Statusnamen aus einem Statuscode konvertiert
gem 'jquery-rails' #Ein Juwel, das jQuery in Rails ermöglicht

Terminal

$ bundle install

3. Einführung von jquery.jpostal.js

https://github.com/ninton/jquery.jpostal.js/ Drücken Sie nach dem Übergang zur obigen URL die grüne Registerkarte "Code" und Laden Sie die Zip-Datei im roten Kreis herunter. Suchen Sie nach dem Entpacken die Datei "jquery.jpostal.js" und Speichern Sie diese Datei unter App / Assets / Javascripts.

4. Bearbeiten Sie application.js

app/assets/javascripts/application.js

//= require rails-ujs <--Löschen
//= require jquery <--hinzufügen
//= require jquery_ujs <--hinzufügen
//= require activestorage
//= require turbolinks
//= require jquery.jpostal <--hinzufügen
//= require_tree .

$(function() {
  $(document).on('turbolinks:load', () => {
    $('#user_postal_code').jpostal({
      postcode : [
        '#user_postal_code'
      ],
      address: {
        "#user_prefecture_code": "%3", // #Die Präfektur wird betreten
        "#user_city"           : "%4%5", // #Stadt, Gemeinde, Stadt, Dorf und Stadtgebiet werden eingegeben
        "#user_street"         : "%6%7" // #Die Adresse und der Name des großen Büros werden eingegeben
      }
    });
  });
});


// #Eingabeelementformat
// #   %3 Präfekturen
// #   %4 Gemeinden
// #   %5 Stadtgebiet
// #   %6 Adresse des großen Büros ex)100-6080
// #   %7 Name des großen Büros

<script type="text/javascript" src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>