ذخیره سازی فعال ذخیره فایل ها با API Rails

آیا در سناریوی کاملاً مشخصی هستید که می خواهید عکس ها را در یک ریل با یک قسمت جلویی react آپلود کنید اما نمی دانید چگونه؟ من شما را با یک راهنمای گام به گام در مورد کار با ذخیره سازی فعال برای ذخیره فایل های صوتی، تصویری و عکس خود آشنا کرده ام.

اجازه دهید این را با گفتن این نکته شروع کنم که این آموزش ممکن است بهترین تمرین را پوشش ندهد زیرا من به موقع دچار مشکل شده ام و به سریع ترین راه حل ها برای مشکلم نیاز دارم. این وبلاگ برای کمک به ما که تازه‌تر به دنیای کد است کمک می‌کند. با توجه به این موضوع، بیایید شروع کنیم.

در ابتدا، من از api rails با پایگاه داده postgresql و یک front end react استفاده خواهم کرد. من این کار را با دستور انجام خواهم داد
rails new project_name --database=postgresql --api

از داخل دایرکتوری پروژه جدید خود می توانید vite، create-react-app یا هر دستور دیگری را که برای ساخت سمت کلاینت استفاده می کنید اجرا کنید. هنگامی که API شما همراه با شروع کننده سمت کلاینت شما ساخته شد، می‌توانیم ادامه دهیم.

اکنون، می خواهید مطمئن شوید که تمام سنگ های قیمتی خود را نصب کرده اید. ابتدا، جم rack-cors را حذف کنید، بعداً به چرایی ضروری بودن آن خواهیم پرداخت. در مرحله بعد به جمی نیاز داریم که در نسخه های جدیدتر به طور خودکار توسط روبی به ما داده نمی شود، به این می گویند سریال سازهای مدل فعال، حتما آن را به فایل جم خود اضافه کنید.

gem "rack-cors"
gem "active_model_serializers", "~> 0.10.13"

سپس اجرا کنید bundle install برای اطمینان از نصب سنگهای خود مطمئن شوید که این کار را قبل از شروع مهاجرت خود انجام داده اید یا ریل برای هر جدولی که می سازید سریال ساز تولید نمی کند (ما به آن نیاز داریم).

از اینجا می خواهید پایگاه داده خود را با آن ایجاد کنید rails db:create

سپس روش ذخیره سازی ریل فعال ذخیره سازی را نصب کنید. این را می توان با اجرای دستور انجام داد rails active_storage:install

با این کار دو مهاجرت به جدول شما اضافه می شود. اکنون جایی است که می توانید بقیه جداول پروژه خود را اضافه کنید، در این مورد، جدولی برای کاربر من که بعداً یک عکس نمایه خواهد داشت. این جدول یک نام و یک بخش درباره کاربر دارد که بعداً یک تصویر به آن اضافه خواهیم کرد. من این جدول را با دستور به پایگاه داده خود اضافه می کنم rails g scaffold User name about. از اینجا ما برای مهاجرت خوب هستیم. rails db:migrate.

هنگامی که جداول خود را منتقل کردید، اینجا جایی است که می خواهیم به مدل بپریم(app/models/user.rb) برای جدول کاربری ما و ما می خواهیم ماکرو has_one_attached را که توسط ذخیره سازی فعال به ما داده شده است اضافه کنیم.

class User < ApplicationRecord

   has_one_attached :image

   end

در این سناریو، تصویر را می توان هر چیزی که دوست دارید نامگذاری کرد.

در مرحله بعد، برای جدول کاربری خود به سریال ساز خود می رویم (app/serializers/user_serializer.rb) و ویژگی های تصویر خود را که می خواهیم در جدول خود اضافه کنید. اولین گام برای این کار شامل راهنما مسیر url برنامه rails ما است. این به ایجاد یک آدرس اینترنتی که به تصویر ما پیوند دارد کمک می کند. مرحله اول به همین ترتیب انجام می شود

class UserSerializer < ActiveModel::Serializer
  include Rails.application.routes.url_helpers
  attributes :id, :name, :about

end

این باید به طور خودکار با ویژگی هایی که هنگام شروع ایجاد کردید ایجاد شود. در مرحله بعد می خواهیم مسیر تصویر را تعریف کنیم، این کار را می توان با ایجاد یک متد برای تعریف فایلی که می خواهید برگردانید انجام دهید و نام متد باید با نامی که در هنگام تعریف کردن داده شده مطابقت داشته باشد. has_one_attached کلان. بعد از اینکه این متد تعریف شد، نام متد را به عنوان یک ویژگی اضافه می کنیم.

class UserSerializer < ActiveModel::Serializer
  include Rails.application.routes.url_helpers
  attributes :id, :name, :about, :image

  def image
  rails_blob_path(object.image, only_path: true) if object.image.attached?
  end
end

فقط چند قدم دیگر قبل از اینکه به سمت جلو حرکت کنیم. ما باید params.permit را در کنترلر کاربر خود تغییر دهیم، بنابراین به ادامه مطلب بروید app/controllers/user_controller و از آنجا متد user_params را پیدا کنید. باید چیزی شبیه به آن باشد

def user_params
      params.require(:user).permit(:name, :about)
    end

کاری که ما باید انجام دهیم این است که ویژگی تصویر را که در بالا اضافه کردیم به پارامترهای خود اضافه کنیم مانند این …

def user_params
      params.require(:user).permit(:name, :about, :image)
    end

بیایید با فعال کردن cors کار را در باطن به پایان برسانیم. ما می توانیم این کار را با رفتن به config/initializers/cors.rb فایل. اون فایل باید چیزی شبیه این باشه…

# config/initializers/cors.rb
# Be sure to restart your server when you modify this file.

# Avoid CORS issues when API is called from the frontend app.
# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin AJAX requests.

# Read more: https://github.com/cyu/rack-cors

# Rails.application.config.middleware.insert_before 0, Rack::Cors do
#   allow do
#     origins 'example.com'
#
#     resource '*',
#       headers: :any,
#       methods: [:get, :post, :put, :patch, :delete, :options, :head]
#   end
# end

در آن فایل، می‌خواهید خط هفتم (آنی که با Rails.application شروع می‌شود) را تا انتهای فایل از کامنت خارج کنید. سپس می خواهید خط 10 را تغییر دهید. در نقل قول هایی که می گوید 'example.com'، معمولاً می خواهید دامنه خود را قرار دهید 'localhost:3000'، به طور متناوب، می توانید یک را قرار دهید *، اما این توصیه نمی شود. فایل باید چیزی شبیه این باشد

# config/initializers/cors.rb
# Be sure to restart your server when you modify this file.

# Avoid CORS issues when API is called from the frontend app.
# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin AJAX requests.

# Read more: https://github.com/cyu/rack-cors

Rails.application.config.middleware.insert_before 0, Rack::Cors do
   allow do
     origins 'example.com'

     resource '*',
       headers: :any,
       methods: [:get, :post, :put, :patch, :delete, :options, :head]
   end
 end

پس از همه اینها، ما پیکربندی backend را به پایان رساندیم! اکنون به سمت React برویم.

برای واکنش، باید داده های خود را با استفاده از سازنده جاوا اسکریپت به نام FormData ایجاد کنیم.