プロファイルのユーザー名

20208 ワード

私はいくつかのプロジェクトについては、最近のユーザーアカウントを使用して管理されており、私はユーザープロファイルのURLの設定方法を変更して作業しているユーザーに提示した.この記事では、このタスクに対処し、私の最近のお気に入りの宝石のいくつかを使用します.
あなたがちょうど望むならばcode それをつかむと、質問や応答を投稿します.

ゴール
プロジェクトパラメータを以下に示します:

ユーザアカウントを設定するDevise

ユーザーのプロフィールページのURLを設定します./users/:username

ユニークな生成username サインアップフォームでは、これは要求されません

NAMERUNG OFHIGHT人-私たちはname_of_person ベースキャンプによる宝石.この宝石は、完全な名前のために擬似フィールドを作成しますfirst_name and last_name にUser を参照).それは他の多くの抽象化を持っています、しかし、これは我々が使う唯一の特徴です.
我々は、使用しますfriendly_id ジェムは、我々は所定のルートにマップすることができますスラグを作成しました.これは、ユーザーモデルだけではなく、アプリケーション全体で使用できるメソッドです.

基本セット
基本的なRailsアプリケーションを設定します.rails new awesome_app , ホームルート用のスタティックコントローラを設定します.rails g controller static home .
基本をロードするルートを構成しますhome.html.erb , インconfig/routes.rb :

Rails.application.routes.draw do

  root "static#home"

end

に従ってくださいapplication.html.erb , 基本的なnavbarを追加するには、後で使用できます.

<!DOCTYPE html>
<html>
<head>
  <title>ArticleDeviseUsernames</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

<body>
<div style="margin-top: 20px">
  <% if user_signed_in? %>
    <%= link_to "User Profile", user_path(current_user.slug) %>
    <%= link_to "Logout", destroy_user_session_path(current_user.slug), method: :delete %>
  <% else %>
    <%= link_to "Log in", new_user_session_path %>
  <% end %>
  <%= yield %>

</div>
</body>
</html>

工夫する
に宝石を加えるGemfile and bundle install , 次に、deviseをインストールします.rails generate devise:install . を追加する必要がありますconfig/environments/development.rb 次の行

config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

私たちは工夫を起こすつもりですUser モデルrails generate devise User .
使うname_of_person Gem、作成したdeviseの移行に2つのカラムを追加する必要があります.追加first_name and last_name データベース移行の範囲内のどこかに移動するrails db:migrate :

class DeviseCreateUsers < ActiveRecord::Migration[6.1]
  def change
    create_table :users do |t|
      ## Database authenticatable
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""

      ...

      t.string :first_name
      t.string :last_name

      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は自動的に適切なルートを追加するでしょうが、チェックするのは常に良い考えですconfig/routes.rb ルートが見つかります.devise_for: users .
に加えるUser 使用するモデルname_of_person 宝石添加has_person_name :

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable

  has_person_name
end

これは、宝石のための基本的な構成ですが、我々は新しいことを許可するように工夫を指示する必要がありますname フィールド.だからapp/controllers/application_controller.rb 次を追加します.

class ApplicationController < ActionController::Base
  before_action :configure_permitted_parameters, if: :devise_controller?

  protected

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
    devise_parameter_sanitizer.permit(:account_update, keys: [:name])
  end
end

を追加する必要がありますname フィールドに印を付け、フォームを登録するので、ビューを生成する必要があります.rails generate devise:views . インapp/views/devise/registrations/new.html.erb , .../registrations/edit.html.erb , and .../sessions/new.html.erb 「名前」フィールドに次のように追加します.

<h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>

  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name, autofocus: true %>
  </div>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: false, autocomplete: "email" %>
  </div>

  ...

ほとんどそこ...ユーザープロファイルを含むページを作成する必要がありますUser コントローラ

rails g controller User show

編集コントローラ

class UsersController < ApplicationController

  def show
    @user = User.find(params[:id])
  end

end

最後に、ルートページを更新します.

Rails.application.routes.draw do
  devise_for :users

  resources :users, only: [:show]

  root "static#home"

end

すべての工夫を行う.あなたの再起動することができますrails server , 開発サイトを開き、ユーザーアカウントを作成します.ときにあなたはroot_path , Navbarの「ユーザープロフィール」リンクをクリックします.パスにリダイレクトされますhttp://localhost:3000/users/1 . これは目標ではないので、移動することができます.

フレンドリーID
追加するfriendly_id ジェムトゥザGemfile and bundle install , 次に、マイグレーションを作成します.

rails g migration AddSlugToUsers slug:uniq

これはユニークなスラグを作成します.この例では、最初の名前と最後の名前フィールドを使用します.だから私の場合/users/chuck-smith . これがユニークでないならば、もう一つの「チャックスミス」がユーザー表にあるかもしれません、それはそれをユニークにします/users/chuck-s .
次にFriendlyHordを生成する必要があります.rails generate friendly_id , データベースを移行するrails db:migrate .
我々は、ユーザーモデルを拡張することによってFriendlyHord IDを使用して:name カラムからname_of_person スラグフィールドとして

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable

  has_person_name

  extend FriendlyId
  friendly_id :name, use: :slugged
end

さて、USERコントローラのShowアクションを編集して:slug 親しみやすい

class UsersController < ApplicationController

  def show
    @user = User.friendly.find(params[:slug])
  end

end

最後に、ルートの更新param :

Rails.application.routes.draw do
  devise_for :users

  resources :users, only: [:show], param: :slug

  root "static#home"

end

あなたが既に持っているならばUsers から作成rails console 実行User.find_each(&:save) , 新しいスラグ列を更新します.
ここで、ログインしてユーザープロファイルを参照すると、URLは友好的です( punを許してください)./users/chuck-smith .
オプションの設定.ユーザープロファイルパスを変更する場合は、ルートファイルを編集できます

Rails.application.routes.draw do
  devise_for :users

  resources :users, only: [:show], param: :slug, path: ""

  root "static#home"

end

へのパスキーを追加しました:users 空のリソース.したがって、現在、ユーザープロファイルページを参照すると、パスはこの例になります./chuck-smith .

脚注
これは楽しかったです.コメントを残すか、私にDMを送ってください.
Shameless Plug :あなたが素晴らしい会社で働いていて、あなたが様々なスキルセットと人生経験を持つソフトウェア開発者のための市場にいるならば、私にメッセージを送って、私のチェックをしてください.

Reference

この問題について(プロファイルのユーザー名), 我々は、より多くの情報をここで見つけました https://dev.to/eclecticcoding/devise-profile-usernames-30j4

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Android TextView行間隔設定の問題(setLineSpacing,lineSpacingExtra,lineSpacingMultiplier)...

Androidリスト重複除外または追加時重複除外