맞혀봐!?
나는 vanilla Javascript("JS")를 전면으로, Ruby on Rails("Rails")를 백엔드로 사용하는 단일 페이지를 구축했다.
Github Link
Youtube Demo
현장 - 출시 예정

소개

나는 단지 이 프로젝트가 결코 쉽지 않다고 말하고 싶을 뿐이다. 사실 내가 보기에 이 프로젝트는 내가 한 적이 있는 가장 어려운 프로젝트 중의 하나이다.Rails가 있으면 모든 것이 간단하고 조리 있게 보이지만, 나중에 Javascript가 나타났는데, 그것은 나에게 규칙이 없다는 것을 알려주었다😩😂! 자바스크립트를 배우는 것은 결코 쉬운 일이 아니다. 나는 자바스크립트나 그 모든 기능을 진정으로 이해하는 사람이 없다고 믿을 이유가 있다.나는 항상 다른 플랫폼에 가서 더 많이 공부하는 것을 발견한다. 비록 때로는 어렵지만, 나는 그 중의 매 분을 즐긴다.나는 Javascript 변수, 함수, 데이터 구조, 향상, 패키지 닫기, 클래스 문법 등을 배웠다.
만약 당신이 Javascript를 배우고 있다면, 나는 이 과정을 추천합니다. 그것은 나에게 매우 큰 도움이 됩니다. Javascript: Understanding The Weird Parts

계획

우선, 나는 반드시 나의 프로젝트를 위해 아이디어를 생각해 내야 한다.나는 반드시 나의 데이터베이스를 기획해야 한다.나는 아래의 흐름도를 그렸다.io:

나는 내 응용 프로그램에 많은 사용자가 있고 모든 사용자가 많은 단련을 하기를 바란다는 것을 안다.그러나 나는 같은 날에 여러 번 운동을 할 수 있기를 바란다. 나의 코치는 이 때문에 가입표를 추천했다. 그는 총명한 사람이다.다음 단계는 나의 계획을 실행에 옮기는 것이다.

API로 Rails 사용

이전 Ruby-on-Rails 응용 프로그램과 이 응용 프로그램의 주요 차이점은 API로만 사용된다는 것입니다.이것은 다음 코드를 실행해야 내 코드를 시작하고 실행할 수 있다는 것을 의미합니다 Ruby on Rails API.

$ rails new my_api --api

일단 railsapi를 시작하면 Gemfile에 내가 알고 있는 gm를 추가합니다.첫 번째는 gem 'rack-cors'입니다. 이것은 웹 응용 프로그램이 전역 AJAX에서 호출할 수 있도록 하는gem입니다.랙 코어의 작동 원리와 구현 방법에 대한 자세한 내용은 here 을 참조하십시오.
일단 나의gem가 모두 설정되면, 나는 이전을 만들고, 피드 데이터를 만들고, RESTful 루트를 설정한다.Ruby on Rails를 사용하여 구축된 프로젝트와 서버로 사용되는 프로젝트 간의 또 다른 차이점은 JSON 형식으로 데이터를 반환해야 한다는 것입니다.예를 들어, 내 사용자 컨트롤러의 색인 방법은 다음과 같습니다.

class UsersController < ApplicationController
 def index
        user = User.all
        render json: user
    end
end

서버를 실행하고 브라우저에서 http://localhost:3000/users 액세스할 때 비슷한 데이터를 볼 수 있도록 json을 보여야 합니다.

{
    "users": [
      {
        "name": 1,
        "name": "Harry Potter",
      },
      {
        "id": 2,
        "name": "Courage The Cowardly Dog"
      }
    ]
  }

나는 지금 json 데이터에 접근할 수 있으며, 지금은 백엔드에 요청을 할 수 있다.

내 데이터베이스에 가져오기 요청 보내기

백엔드에서 정보를 얻기 위해서 나는 어쩔 수 없이 fetch 요청을 해야 한다.우선, 나는 백엔드rails s에 터미널을 열어 서버가 실행 중인지 확인함으로써 json 데이터에 접근할 수 있다.그리고 나서 join user\u workouts 테이블에 fetch 요청을 하는 파일을 만들었습니다.

class WorkoutsAdapter {
    getWorkouts(){
        return fetch(`http://localhost:3000/api/v1/user_workouts`).then(res => res.json()
        )
    }

페이지에서 교체 및 렌더링

나의 가장 큰 도전

메시지를 반환한 후, 나는 정보를 두루 훑어보고 날짜에 따라 정렬하고 싶다. 나는 다음과 같은 코드를 사용하여 이 점을 실현할 수 있다.

class Workouts{
    constructor(){
        this.workouts = {}
        this.adapter = new WorkoutsAdapter()
        this.fetchAndLoadWorkouts()  
    }
   fetchAndLoadWorkouts(){
        this.adapter.getWorkouts().then(workouts =>{
            workouts.forEach(workout => {
                if (this.workouts[workout.date]) {
                  this.workouts[workout.date].push(new Workout(workout))
                } else {
                    this.workouts = {...this.workouts, [workout.date]: [new Workout(workout)]}
                }

            })
        })
        .then(() =>{
            this.render()
        })
    }

위의 코드는 WorkoutsAdapter 클래스와fetch AndLoadWorkouts () 함수에 요청을 보냅니다. 이 함수는 본질적으로fetch 요청입니다.받은 메시지는 일련의 훈련이다.그리고 for_each 객체에 날짜가 있는지 확인합니다.만약 이 날짜가 확실히 존재한다면, 훈련을 이 날짜로 미루게 될 것이다.날짜가 존재하지 않으면 이 날짜를 관건으로 하는 훈련이 만들어집니다.데이터의 교체가 완료되면 제가 만든 this.workouts 함수로 넘어갑니다.
다음은 내 렌더링 함수입니다.

    render(){
   this.workoutContainer = document.getElementById('workout-container')
        const workoutString = Object.keys(this.workouts).map((date) => {
           return `<button type="button" class="collapsible">${date}</button><div id="all-workouts">
            ${this.workouts[date].map((work) => work.renderHTML()).join(' ')}</div>`
        }).join(' ')
        this.workoutContainer.innerHTML = `${workoutString}`
    }

나는 문서를 사용하여 페이지에 성공적으로 렌더링할 수 있다.getelementById('workout-container')에서 HTML의 요소/div를 선택합니다.그리고 render() 대상에서 Object.keys 방법을 사용하여 날짜에 따라 데이터를 비추고 단추에서 날짜를 되돌려줍니다.그리고 나는 날짜에 따라 훈련을 비추고div에 두었다가 훈련을 페이지에 있는 모든 사용자의 정확한 날짜 아래에 성공적으로 보여 주었다.
이 코드는 매우 도전적이지만, 그것이 완성되었을 때 나는 매우 기뻤다.제 프로젝트를 마음대로 보십시오. 저는 모든 피드백과 공헌을 환영합니다.
예전과 같이, 읽어 주셔서 감사합니다!
정성스레
브레타니
오늘의 노래: