[Ruby on Rails] Saisissez automatiquement une adresse à partir d'un code postal

Cible

Environnement de développement

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

supposition

• Si vous sélectionnez ▶ ◯◯, des explications s'affichent. J'espère que vous pourrez vous y référer si vous n'êtes pas sûr.

Créé un contrôleur domestique et décrit ce qui suit.

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

couler

1 Dans l'appareil, entrez une adresse pour activer la connexion 2 Introduction de gem'jp_prefecture 'et de gem'jquery-rails' 3 Introduction de jquery.jpostal.js 4 Modifiez application.js

1. Connectez-vous avec un appareil

• Référence: Voir ici pour plus de détails.

Gemfile

gem 'devise'

Terminal

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

Ajout de la description suivante.

db/migrate/xxxxxxxxxxxxx_devise_create_users.rb

...

<--d'ici-->
      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 car il se peut qu'il n'y ait pas d'adresse après l'adresse:n'ajoutez pas de faux
<--Ajouter ici-->
      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 Ajout de la description suivante pour empêcher la non-entrée.

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

Décrit dans 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>


...

Ceci termine le nouvel écran d'enregistrement pour la saisie de l'adresse.

2. Ajout de gemme

Gemfile

gem 'jp_prefecture' #Un joyau qui convertit un nom d'état à partir d'un code d'état
gem 'jquery-rails' #Un joyau qui active jQuery dans Rails

Terminal

$ bundle install

3. Introduction de jquery.jpostal.js

https://github.com/ninton/jquery.jpostal.js/ Après la transition vers l'URL ci-dessus, appuyez sur l'onglet vert "Code" et Téléchargez le fichier zip dans le cercle rouge. Après la décompression, recherchez le fichier "jquery.jpostal.js" et Stockez ce fichier sous app / assets / javascripts.

4. Modifiez application.js

app/assets/javascripts/application.js

//= require rails-ujs <--Effacer
//= require jquery <--ajouter à
//= require jquery_ujs <--ajouter à
//= require activestorage
//= require turbolinks
//= require jquery.jpostal <--ajouter à
//= require_tree .

$(function() {
  $(document).on('turbolinks:load', () => {
    $('#user_postal_code').jpostal({
      postcode : [
        '#user_postal_code'
      ],
      address: {
        "#user_prefecture_code": "%3", // #La préfecture est saisie
        "#user_city"           : "%4%5", // #Ville, quartier, ville, village et zone de la ville
        "#user_street"         : "%6%7" // #L'adresse et le nom du grand bureau sont saisis
      }
    });
  });
});


// #Format de l'élément d'entrée
// #   %3 préfectures
// #   %4 communes
// #   %5 zone urbaine
// #   %6 Adresse du grand bureau ex)100-6080
// #   %7 Nom du grand bureau

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