Javascript/Rails API 프로젝트: Moby - 서평 앱
3379 단어 webdevrailsbeginnersjavascript
프로젝트 개요
Flatiron School Bootcamp 커리큘럼의 Javascript 모듈에 대한 프로젝트 요구 사항을 충족하기 위해 새로운 단일 페이지 앱을 방금 마무리했습니다. 저는 Vanilla Javascript 프런트엔드에 JSON을 제공하기 위해 Rails API 백엔드가 있는 서평 애플리케이션을 만들었습니다.
백엔드
부트캠프의 대부분을 객체 지향 Ruby로 코딩한 후, Rails에서 API를 만드는 것은 꽤 즐거웠습니다. 새롭다고 느낀 것은 첫 번째 API 전용 Rails 앱을 만드는 것이었습니다. 나는 active_model_serializers gem, ActiveRecord 및 Rails 컨트롤러를 활용하여 프런트엔드에 데이터를 제공했습니다.
내 책 리소스의 예는 다음과 같습니다.
create_table "books", force: :cascade do |t|
t.string "title"
t.string "author"
t.string "genre"
t.datetime "created_at", precision: 6, null: false
t.datetime "updated_at", precision: 6, null: false
end
프런트 엔드까지 데이터를 제공하는 데 가장 유연하게 사용할 수 있도록 직렬 변환기를 사용했습니다.
class BookSerializer < ActiveModel::Serializer
attributes :id, :title, :author, :genre
has_many :reviews
end
프런트엔드의 요청을 처리하기 위해 몇 가지 일반적인 편안한 컨트롤러 작업을 만들었지만 모든 데이터가 JSON을 통해 렌더링되고 있습니다.
class Api::V1::ReviewsController < ApplicationController
before_action :set_review, only: [:show, :destroy]
def index
reviews = Review.all
render json: @reviews
end
def show
render json: @review
end
def create
book = Book.find(params[:book_id])
@review = book.reviews.build(review_params)
if @review.save
render json: @review, status: :created
else
render json: @review.errors, status: :unprocessable_entity
end
end
def destroy
@review.destroy
end
private
def set_review
@review = Review.find(params[:id])
end
def review_params
params.require(:review).permit(:book_id, :body)
end
end
프런트엔드
이 앱의 프런트엔드에서 작업하면서 지식 격차를 발견하고 객체 지향 Javascript에 대해 더 많이 배울 수 있었습니다. Javascript 클래스로 작업하기 위해 방향을 전환하는 데 필요한 몇 가지 사항이 있습니다. Static 키워드는 빈 배열에 할당한 클래스 범위 변수(allBooks)를 만드는 데 도움이 됩니다. 다음으로 Javascript에는 속성을 가져와서 클래스의 새 인스턴스에 할당하는 방법을 제공하는 클래스용 생성자 함수가 있습니다. 이 예에서 마지막으로 This 키워드를 확인할 수 있습니다. This 키워드는 개체 지향 Javascript에서 컨텍스트를 참조하는 방법을 제공합니다. 이 경우 새 책 인스턴스를 참조하는 경우입니다.
자바스크립트 책 클래스:
class Book {
static allBooks = [];
constructor({id, title, author = "unknown", genre = "uncategorized", reviews = [] }) {
this.id = id
this.title = title
this.author = author
this.genre = genre
this.reviews = reviews
Book.allBooks.push(this)
}
}
프로젝트를 확인하세요
시간을 내어 웹 개발에 대해 더 많이 배우는 여정에 대해 읽어주셔서 감사합니다. 내 Rails/Javascript 웹 앱을 확인하는 데 관심이 있는 경우 아래 링크를 확인하고 웹 개발 학습 경험에 대한 의견을 자유롭게 남겨주세요.
Click Here to view the Moby App
행복한 코딩,
테리 위협
Reference
이 문제에 관하여(Javascript/Rails API 프로젝트: Moby - 서평 앱), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/terrythreatt/javascript-rails-api-project-moby-book-review-app-43nj
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
부트캠프의 대부분을 객체 지향 Ruby로 코딩한 후, Rails에서 API를 만드는 것은 꽤 즐거웠습니다. 새롭다고 느낀 것은 첫 번째 API 전용 Rails 앱을 만드는 것이었습니다. 나는 active_model_serializers gem, ActiveRecord 및 Rails 컨트롤러를 활용하여 프런트엔드에 데이터를 제공했습니다.
내 책 리소스의 예는 다음과 같습니다.
create_table "books", force: :cascade do |t|
t.string "title"
t.string "author"
t.string "genre"
t.datetime "created_at", precision: 6, null: false
t.datetime "updated_at", precision: 6, null: false
end
프런트 엔드까지 데이터를 제공하는 데 가장 유연하게 사용할 수 있도록 직렬 변환기를 사용했습니다.
class BookSerializer < ActiveModel::Serializer
attributes :id, :title, :author, :genre
has_many :reviews
end
프런트엔드의 요청을 처리하기 위해 몇 가지 일반적인 편안한 컨트롤러 작업을 만들었지만 모든 데이터가 JSON을 통해 렌더링되고 있습니다.
class Api::V1::ReviewsController < ApplicationController
before_action :set_review, only: [:show, :destroy]
def index
reviews = Review.all
render json: @reviews
end
def show
render json: @review
end
def create
book = Book.find(params[:book_id])
@review = book.reviews.build(review_params)
if @review.save
render json: @review, status: :created
else
render json: @review.errors, status: :unprocessable_entity
end
end
def destroy
@review.destroy
end
private
def set_review
@review = Review.find(params[:id])
end
def review_params
params.require(:review).permit(:book_id, :body)
end
end
프런트엔드
이 앱의 프런트엔드에서 작업하면서 지식 격차를 발견하고 객체 지향 Javascript에 대해 더 많이 배울 수 있었습니다. Javascript 클래스로 작업하기 위해 방향을 전환하는 데 필요한 몇 가지 사항이 있습니다. Static 키워드는 빈 배열에 할당한 클래스 범위 변수(allBooks)를 만드는 데 도움이 됩니다. 다음으로 Javascript에는 속성을 가져와서 클래스의 새 인스턴스에 할당하는 방법을 제공하는 클래스용 생성자 함수가 있습니다. 이 예에서 마지막으로 This 키워드를 확인할 수 있습니다. This 키워드는 개체 지향 Javascript에서 컨텍스트를 참조하는 방법을 제공합니다. 이 경우 새 책 인스턴스를 참조하는 경우입니다.
자바스크립트 책 클래스:
class Book {
static allBooks = [];
constructor({id, title, author = "unknown", genre = "uncategorized", reviews = [] }) {
this.id = id
this.title = title
this.author = author
this.genre = genre
this.reviews = reviews
Book.allBooks.push(this)
}
}
프로젝트를 확인하세요
시간을 내어 웹 개발에 대해 더 많이 배우는 여정에 대해 읽어주셔서 감사합니다. 내 Rails/Javascript 웹 앱을 확인하는 데 관심이 있는 경우 아래 링크를 확인하고 웹 개발 학습 경험에 대한 의견을 자유롭게 남겨주세요.
Click Here to view the Moby App
행복한 코딩,
테리 위협
Reference
이 문제에 관하여(Javascript/Rails API 프로젝트: Moby - 서평 앱), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/terrythreatt/javascript-rails-api-project-moby-book-review-app-43nj
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
class Book {
static allBooks = [];
constructor({id, title, author = "unknown", genre = "uncategorized", reviews = [] }) {
this.id = id
this.title = title
this.author = author
this.genre = genre
this.reviews = reviews
Book.allBooks.push(this)
}
}
시간을 내어 웹 개발에 대해 더 많이 배우는 여정에 대해 읽어주셔서 감사합니다. 내 Rails/Javascript 웹 앱을 확인하는 데 관심이 있는 경우 아래 링크를 확인하고 웹 개발 학습 경험에 대한 의견을 자유롭게 남겨주세요.
Click Here to view the Moby App
행복한 코딩,
테리 위협
Reference
이 문제에 관하여(Javascript/Rails API 프로젝트: Moby - 서평 앱), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/terrythreatt/javascript-rails-api-project-moby-book-review-app-43nj텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)