Rails 백엔드 및 JavaScript 프런트엔드가 포함된 중첩 양식 처리

Flatiron 프로그램의 네 번째 프로젝트에서 나는 Rails API를 백엔드 서버로 하고 자바스크립트, HTML, CSS 전단을 사용하여 페이지 표현과 스타일 설정을 처리하는 단일 페이지 프로그램을 만들었다.이 프로그램의 기본 전제는 사용자가 타이머를 사용하여 로그 항목을 만들고 항목에 키워드를 추가할 수 있다는 것이다.이 응용 프로그램을 구축하는 한 가지는 플러그인 폼을 실현하는 것이다. 이것은 좋은 학습 체험으로 증명되었다.새 일기 항목을 만들고 단추를 누르면 키워드를 추가할 수 있는 틈새 없는 사용자 체험을 원합니다.나는 이전에 순수한 Rails 프로그램에서 끼워 넣는 폼을 실현했다.그러나 JavaScript에서 호출을 받아서 이 작업을 수행하는 것은 새로운 도전을 추가합니다.
항목과 키워드 사이의 다대다 관계로 항목을 인코딩하고 entry keywords라는 두 모델에 연결표를 사용합니다.명확하게 보기 위해 이러한 관련은 다음과 같다.

class Entry < ApplicationRecord
  has_many :entry_keywords, dependent: :destroy
  has_many :keywords, through: :entry_keywords
end

class Keyword < ApplicationRecord
  has_many :entry_keywords, dependent: :destroy
  has_many :entries, through: :entry_keywords
end

class EntryKeyword < ApplicationRecord
  belongs_to :entry
  belongs_to :keyword
end

MVP 대상
최소 실행 가능한 제품(MVP)의 경우 한 번에 여러 키워드를 할당하는 대신 새 항목에 키워드를 할당할 수 있도록 허용하기로 했습니다.기존 키워드 또는 새 키워드일 수 있습니다.사용자가 기존 키워드를 선택하면 데이터베이스에서 찾을 수 있고 새 항목과 연결됩니다.사용자가 새 키워드를 만들면, 이 키워드는 실례화되고, 지속되며, 새 일기장 분록과 연결됩니다.응용 프로그램의 대부분이 일기장 분록을 만들고, 선별하고, 읽는 것과 관련이 있기 때문에, 나는 분록 모델을 표의 주요 모델로 삼기로 결정했다.이것 또한 폼 처리가 백엔드의entries 컨트롤러에 의해 처리된다는 것을 의미한다.

트랙 백엔드 설정
우선 매크로 accepts nested attributes 를 항목 모델에 추가합니다.내 entry.rb 파일은 다음과 같습니다.

class Entry < ApplicationRecord
  has_many :entry_keywords, dependent: :destroy
  has_many :keywords, through: :entry_keywords
  accepts_nested_attributes_for :keywords
end

이 매크로는ActiveRecord에서 제공하는 클래스 방법으로 주 모델 <othermodelname>_attributes= 에 새로운 방법을 만들 것입니다.이것은 주 대상의 클래스를 통해 유형의 대상을 만들 수 있도록 합니다.
명확하게 보기 위해서 우리는 모델 이름을 다시 첨가해서 실제 무슨 일이 일어났는지 볼 수 있다.
entry controller create action은 프런트엔드에서 전송된 매개변수를 수신합니다.전면에 Rails 중첩 양식이 아닌 JavaScript가 사용되므로 필요한 내용을 포함하도록 매개변수를 인코딩해야 합니다.params의 올바른 버전은 다음과 같이 키워드 attributes 태그가 표시됩니다.

pry>params
=>#"entry"=>{"body"=>"sample entry", "time_interval"=>1.0, "keywords_attributes"=>{"name"=>"nature"}}

params를 이렇게 보이게 하려면fetch 호출에 정확한 정보를 전달해야 합니다.

프런트엔드에서 매개변수 전달
다음에 열거한 변수에 우리가 되돌려 주고 싶은 값이 봉인되어 있다고 가정하십시오.이 값을 자바스크립트 대상 (이름 데이터) 에 할당하고, 예상한 파라메트릭 산열을 모방하십시오.그리고 이 데이터 대상을 JSONified 문자열로 설정 대상의 바디 키에 전달합니다.마지막으로 configObj를 두 번째 매개 변수로fetch 호출에 전달합니다.이 특정한 설정 대상은 POST 요청의fetch 호출을 보내고 항목과 키워드에 필요한 데이터를 백엔드 매개 변수에 전달합니다.

//info to pass to params
const body = "sample entry";
const timeInterval = 0.16666666666666666;
const keywordAttributes = {name: "nature"}

// imitate params hash with JavaScript object
const data = {
body: "sample entry",
time_interval: 1.0,
keywords_attributes: {name: "nature"}
};

//create configuration object
    const configObj = {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    }
    body: JSON.stringify(data),
}

fetch("url_to_backend_controller_action", configObj)

백엔드 양식 처리
상술한 추출 호출은 백엔드의 단점에 도달할 것이다.이 예에서 백엔드 끝점은 entries controller의 생성 작업입니다.
파마스 기억나?

pry>params
=>#"entry"=>{"body"=>"sample entry", "time_interval"=>0.16666666666666666, "keywords_attributes"=>{"name"=>"nature"}}

입구 컨트롤러가params 산열 keywords_attributes 줄을 만났을 때, 일치하는 이름을 가진 방법을 호출하도록 자극됩니다.이 예에서는 항목 모델에 일치 방법keywords_attributes=을 추가합니다.

def keywords_attributes=(keyword_params)
    name = keyword_params[:name].downcase.strip
    if !name.empty?
        keyword = Keyword.find_or_create_by(name: name)
        self.keywords << keyword unless self.keywords.include?(keyword)
    end
end

(방주: 이것은 여러 쌍의 관계이기 때문에 폼도 여러 개의 키워드를 받아들이는 실례로 인코딩될 수 있습니다. 이 경우 params는 기존 키워드의 ID와 keywords attributes 필드에 사용할 다른 필드를 포함해야 합니다. 그러나 간단하게 보기 위해 폼은 현재 항목에 키워드만 추가할 수 있습니다. 이것은 백엔드에서nam을 간단하게 사용할 수 있음을 의미합니다.키워드를 찾든 만들든 속성입니다.)
여기keywords_attributes=는params 산열 중의 keywords_attributes 매개 변수로 호출되었습니다.keywords_attributes는 {"name"=>"nature"} 값을 가리키는 매개 변수 중의 하나이기 때문에 이 값의 매개 변수keywords_attributes=를 사용하여 입구 모델 방법{"name"=>"nature"}을 호출할 수 있다.
따라서params에서keywords_attributes를 만났을 때 다음과 같은 방법으로 호출됩니다. keywords_attributes=({"name"=>"nature"}).
이런 방법은 네 가지 작용이 있다.
1) 우선 우리가 찾고 있는 특정 정보(name 키의 값)를 가져오고 .downcase와 .strip를 사용하여 입력을 정리합니다.(항상 애플과 애플을 비교하기를 원하기 때문에 키워드 이름을 모든 소문자로 저장합니다. 데이터베이스에서 검사할 때 소문자를 사용합니다. 또한 임의의 공백이나 빈 문자열을 데이터베이스에 저장하는 것을 원하지 않기 때문에 .strip 삭제하십시오.
2) 그런 다음 3단계와 4단계를 수행하는지 확인하기 위해 문자열이 비어 있는지 확인합니다.
(방주: 루비에서 빈 문자열""의 계산 결과는false이고 빈 문자만 있는 문자열" "의 계산 결과는true이다.)
따라서 문자열이 비어 있으면 계산 결과가false이며 이 방법에서는 다른 상황이 발생하지 않습니다.이 경우 작성 중인 새 항목에 키워드가 할당되지 않습니다.그러나 문자열에 값이 있으면 다음 단계를 계속하십시오.
3)ActiveRecord 매크로find_or_create_by를 호출하고 검색할 데이터베이스 열 이름(name)과 검사할 값(1단계의 국부 변수name을 전송합니다.find_or_create_by 검색과 일치하는 첫 번째 실례를 찾고 되돌려줍니다.찾을 수 없으면, 전송된 정보를 사용하여 새로운 실례를 실례화하고, 이 새로운 실례를 되돌려줍니다.이 방법의 반환값 (키워드 모델의 새로운 실례나 이전에 존재했던 실례) 은 국부 변수 keyword 에 분배됩니다.
4) 마지막으로 if 블록에 남아 있을 때 단계 3에서 되돌아오는 키 실례를 이 특정 일기 항목의 키 집합에 추가합니다.
그리고 keywords_attributes= 방법이 끝났습니다. entries_controller로 돌아가세요.
실례화된 항목을 사용한 후, json을 사용하여 앞부분에 표시하고 키워드를 포함합니다.이것은 보기에 다음과 같다.

def create
    entry = Entry.new(entry_params)

    if entry.save
      render json: entry, include: [:keywords]
    else
      render json: entry.errors.full_messages, status: :unprocessable_entity
    end
  end

앞쪽으로 돌아가기
마지막으로 프런트엔드로 돌아가서 JSON을 확인한 후 콘솔 레코드의 응답을 확인합니다.

fetch("backend/url", configPostObject)
    .then(response => response.json())
    .then(json => console.log(json))

다음과 같은 컨텐트가 기록되어 있는 것을 볼 수 있는 브라우저 도구를 엽니다.

// entry instance:
{id: 145, body: "sample entry", time_interval: 1, created_at: "2021-05-16T01:22:44.802Z", updated_at: "2021-05-16T01:22:44.802Z", …}
body: "sample entry"
created_at: "2021-05-16T01:22:44.802Z"
id: 145

// keyword array

keywords: Array(1)
0: {id: 4, name: "nature", created_at: "2021-05-12T17:22:45.771Z", updated_at: "2021-05-12T17:22:45.771Z"}
length: 1
__proto__: Array(0)
time_interval: 1
updated_at: "2021-05-16T01:22:44.802Z"
__proto__: Object

console logged 대상에서 보듯이 항목과 키워드의 연결이 성공적으로 지속되어 전단으로 되돌아왔습니다.이것은 삽입된 폼이 항목과 키워드 정보에 모두 유효하다는 것을 의미한다.이 프로그램은 성공적으로 Rails 백엔드와 JavaScript 백엔드 사이를 조율하였으며, 클릭만 하면 플러그인 폼을 처리할 수 있습니다.
**최초 2021년 5월 16일 github를 통해 발표.목위일