섹션 1: Rails 액티브 스토리지

모든 웹 응용 프로그램에서 이미지를 사용하는 능력은 상당히 중요하다.Ruby on Rails 프로젝트에서 활성 저장소를 사용하면 외부 저장소 서비스를 사용하고 사용자 상호작용을 원활하게 만들 수 있습니다.
본고에서, 우리는 사용자가 사용자 프로필에 화신을 추가할 수 있도록 활성 저장소를 사용할 것이다.이 화신은 개인 정보 페이지와 내비게이션 표시줄에 있는 사용자 개인 정보 링크에 표시됩니다.
TL;TR: code으로 바로 이동하려면 완료된 저장소를 확인하십시오.

설치 프로그램

이것은 Rails 프로젝트 설정에 대한 전체 자습서가 아닙니다.다음은 기본 기능입니다.저장소를 보는 것이 좋습니다.

기본 레일 프로젝트와 Postgres

은 static이라는 컨트롤러로 홈페이지에 사용되며, 루트는 static#home으로 지정됩니다.

Webpacker

을 사용하여 부트 추가 4

에 디자인을 추가하고 사용자 이름과 이름의 추가 등록 필드를 이전

에 추가합니다

은gemdevise-bootstrapped을 사용하여 안내 스타일을 사용하여 디자인 보기를 미리 설정합니다.

다음 부트 탐색 모음을 추가합니다.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
  <div class="container">
    <%= link_to "Active Storage", root_path, class: "navbar-brand" %>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">

      <ul class="navbar-nav ml-auto">

        <% if user_signed_in? %>
          <li class="nav-item">
            <%= link_to current_user.username, user_path(current_user.username), class: "nav-link" %>
          </li>
          <li class="nav-item">
            <%= link_to "Sign out", root_path, class: "nav-link" %>
          </li>
        <% else %>
          <li class="nav-item active">
            <%= link_to "Log in", root_path, class: "nav-link" %>
          </li>
          <li class="nav-item">
            <%= link_to "Sign up", root_path, class: "nav-link" %>
          </li>
        <% end %>
      </ul>
    </div>
  </div>
</nav>

사용자를 위한 프로필 페이지를 만들려면 다음과 같이 하십시오.

<div class="d-flex align-items-center justify-content-center mt-5">
  <div class="media mr-5 align-self-start">
    Avatar
  </div>
  <div class="media">
    <div class="media-body">
      <div class="d-flex flex-row align-items-center justify-content-between">
        <h1><%= @user.username %></h1>
        <%= link_to "Edit", edit_user_registration_path, class: "ml-3 btn btn-secondary btn-sm" if current_user.id == @user.id %>

      </div>
    </div>
  </div>
</div>

프로필 페이지에 루트 추가: resources :users, only: [:show], param: :username, path: ""마찬가지로 이것은 설정의 개술이다. 이 commit만 보면 완전한 beginning source을 볼 수 있다.

액티브 메모리

액티브 스토리지는 다양한 스토리지 서비스를 사용할 수 있는 옵션을 제공합니다.우리는 먼저 개발 환경을 구성하여 다음과 같은 내용을 config/environments/development.rb에 추가합니다.

# Store files locally.
config.active_storage.service = :local

Amazon S3 서비스를 프로덕션에서 사용하려면 config/environments/production.rb에 다음을 추가합니다.

# Store files on Amazon S3.
config.active_storage.service = :amazon

생산에 대한 추가 구성 옵션은 documentation을 참조하십시오.
활성 스토리지는 Rails의 일부이므로 rails active_storage:install을 구성한 다음 마이그레이션을 실행하기만 하면 됩니다.
Active Storage는 애플리케이션 데이터베이스에서 rails db:migrate과 active_storage_blobs이라는 두 테이블을 사용합니다.active_storage_attachments은 다중 연결 테이블로 모델의 클래스를 저장하는 데 사용된다.active_storage_attachments에서 주석을 취소하고 Gemfile에 bundle을 설치합니다.이 보석은 우리가 그림의 크기를 조절할 수 있도록 한다.rails 서버를 다시 시작해야 합니다.

아바타

사용자 모델에 추가: image_processing:

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

  has_one_attached :avatar
end

has_one_attached :avatar의 응용 프로그램 컨트롤러에서 허용 파라미터를 업데이트하는 방법이 필요합니다.

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

  private

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

end

프로필 편집

우선, 우리가 화신을 선택할 수 있도록 프로필 편집 폼을 업데이트합시다.avatar에서 템플릿을 찾을 수 있습니다.
편집 양식에 app/views/devise/registrations/edit.html.erb 및 name을 추가해야 합니다.

<div class="form-group">
    <%= f.label :username %>
    <%= f.text_field :username, autofocus: true %>
  </div>

  <div class="form-group">
    <%= f.text_field :name, autofocus: true, placeholder: "Name" %>
  </div>

화신을 표시하기 위한 위치를 추가하고, 폼 선택기를 추가하여 파일을 선택해야 합니다.이것은 파일의 맨 위에 놓을 것이다.이 파일의 전체 source을 보려면 다음과 같이 하십시오.

<div class="row">
    <div class="col-sm-2">
      <% if current_user.avatar.nil? %>
        <%= image_tag f.object.avatar.variant(resize: "128x128!"), class: "rounded-circle m-4" %>
      <% end %>
    </div>
    <div class="col-sm-10">
      <div class="form-group">
        <%= f.label :avatar %>
        <%= f.file_field :avatar %>
      </div>
    </div>
  </div>

현재 사용자와 연결된 화신이 있는지 테스트한 다음 username으로 그림을 표시하고 크기를 128px로 조정합니다. 이것은 image_taggem의 기능입니다.우리는 가이드 클래스를 사용하여 화신을 원형으로 표시합니다.

사용자 프로필 페이지

따라서 새로운 선택의 화신을 포함하기 위해 사용자 image_processing 템플릿 파일에 다시 접근해야 합니다.

<div class="d-flex align-items-center justify-content-center mt-5">
  <div class="media mr-5 align-self-start">
    <% if current_user.avatar.nil? %>
        <%= image_tag f.object.avatar.variant(resize: "128x128!"), class: "rounded-circle m-4" %>
      <% end %>
  </div>
  <div class="media">
    <div class="media-body">
      <div class="d-flex flex-row align-items-center justify-content-between">
        <h1><%= @user.username %></h1>
        <%= link_to "Edit", edit_user_registration_path, class: "ml-3 btn btn-secondary btn-sm" if current_user.id == @user.id %>

      </div>
    </div>
  </div>
</div>

이것은 우리가 템플릿을 편집하는 데 사용하는 코드와 같다.결과는 다음과 같습니다.

탐색 표시줄

처음에, 나는 내비게이션 표시줄에 자리 표시자 경로가 있었기 때문에, 우리는 링크를 실행할 수 있도록 다시 접근했다.그 밖에 우리는 화신을 포함하고 존재 여부를 검사할 것이다.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
  <div class="container">
    <%= link_to "Active Storage", root_path, class: "navbar-brand" %>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">

      <ul class="navbar-nav ml-auto">

        <% if user_signed_in? %>
          <li class="nav-item">
            <%= link_to user_path(current_user.username), class: "nav-link" do %>
              <% if current_user.avatar.nil? %>
                <%= image_tag current_user.avatar.variant(resize: "24x24!"), class: "mr-1" %>

              <% end %>
              <%= current_user.username %>
            <% end %>
          </li>
          <li class="nav-item">
            <%= link_to "Sign out", destroy_user_session_path, method: :delete, class: "nav-link" %>
          </li>
        <% else %>
          <li class="nav-item active">
            <%= link_to "Log in", new_user_session_path, class: "nav-link" %>
          </li>
          <li class="nav-item">
            <%= link_to "Sign up", new_user_registration_path, class: "nav-link" %>
          </li>
        <% end %>
      </ul>
    </div>
  </div>
</nav>

불완전하다

따라서 이 해결 방안은 결코 완전히 실행할 수 없다.나는 이런 방법을 좋아하지 않는다. 만약 화신이 존재하지 않는다면 우리는 공백을 보일 것이다.다음 글에서, 우리는 사용자 Gravatar을 선택하거나 예비 이미지로 사용하여 이 기능을 구축할 것이다.

각주

이것은 매우 재미있다.메시지를 남기거나 DM을 보내주세요.
파렴치한 플러그인: 만약 당신이 위대한 회사에서 일한다면, 당신은 시장의 소프트웨어 개발자와 각종 기능과 생활 경험을 가지고 저에게 소식을 주고 저를 검사합니다.