요즘시작하다
Ruby on Rails에 적힌 기존 애플리케이션의 프론트 데스크 주변에서 방법을 생각해 보십시오.js로 다시 썼기 때문에 자기가 쓴 노트로 남겼어요.

이번 목표

그림에서 보듯이 EC 사이트에서 유형 일람표의 모든 유형을 클릭하십시오
Rails의 DB에서 호출된 다양한 아티스트가 그려집니다!

개요

이걸 어떻게 이룰 수 있을까.
Rails의 데이터베이스를 Vue로 설정합니다.물론 js에서 수신할 때 변수로 직접 전달할 수 없습니다.
따라서 Rails로 API를 만들고, axios의 get 방법으로 그곳을 두드려 Vue 쪽에서 받아들이면 된다.

일단 블루.도입

이번에는 기존 Rails 애플리케이션에 이어 Vue를 추가하는 방법입니다.
Gemfile

gem "webpacker", github: "rails/webpacker”

, 그런 다음 bundle install 을 사용합니다.
그리고 터미널에 다음 명령을 입력하십시오

$ bin/rails webpacker:install

편역하다

$ bin/webpack

같이 컴파일해 주세요.
컴파일 실패 시
development.rb

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

module.exports = Object.assign({}, environment.toWebpackConfig(), {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
})

응용 프로그램.rb에 보충해 주세요.
지금까지 app/javascript/packs라는 디렉터리가 있어야 합니다.
이번에는 헬로.vue.js라는 파일에 코드를 추가합니다.

뷰로 읽어주세요.

application.html.eb의 yeld 아래
덧붙이다
application.html.erb

 <%= javascript_pack_tag "hello_vue" %>

API 생성

만약 이번에 H 장르를 선택했다면, 나는 그 장르의 연예인을 배열 형식으로 컴백하고 싶다
Rails 측 데이터베이스와 결합해야 합니다.
그래서

$ bundle exec rails g controller api::genres show

일단 컨트롤러를 만들어 볼게요.

추가 라우팅

routes.rb

  namespace :api do 
    resources :genres, only: %i(show)
  end

API::GenresController

api/genres_controller

class GenresController < ApplicationController
  def show
    @genre = Genre.find(params[:id])
    @artists = Artist.where(genre_id: params[:id])
  end
end

그나저나 다양한 장르의 연예인들이 있으니까요.
연관은 Genre has입니다.many artists로 변신!
또한 이번에는 json 형식으로 제출해야 하기 때문에 jbuilder를 사용합니다.
app/views/api/genres/show.json.jbuilder에서
show.json.jbuilder

json.genre_name @genre.genre_name
json.array do
  json.array! @genre.artists, :artist_name, :id
end

각 카테고리별 아티스트 일람표를 아라이 형식으로 제출했다.

API 확인

/appi/genres/1 방문 후

그렇습니다.
매번 클릭 유형 appi::genres-controller라고 불리며 클릭한 ID의 종류가 매개 변수로 전달됩니다.
준비됐습니다.

Vue.js 쓰세요!

Vue 코드(hello vue.js)

import Vue from 'vue/dist/vue.esm'
import axios from 'axios'

new Vue({
  el: ".genre_vue",
  data: {
    genreInfo: {},
    artists: [],
    showModal: false,
  },
  methods: {
    setGenreInfo(id){
      axios.get(`api/genres/${id}.json`)
      .then(res => {
        this.genreInfo = res.data;
        this.artists = res.data.array;
        this.showModal = true
      });
    },
    setArtistInfo(id){
     window.location.href = `artists/${id}`;
    }
  }
});

Rails의 API에서 데이터를 가져오기 위해 처음부터 axios를 import로 사용했습니다.
우선 데이터에서 빈 배열로artists를 준비합니다.
Axios에서 자체 제작 API에서 genre를 가져오는artist 배열,this.artists에 저장합니다.
set Artist Info는 더 좋은 방법이 있을 것입니다. 단지 연예인 상세 페이지에 링크를 강제로 연결하려고 할 뿐입니다.

Rails 코드

<li v-for="artist in artists" v-on:click="setArtistInfo(artist.id)" class= "lime" v-bind:key="artist"> 
   {{ artist.artist_name }}
</li> 

아까 Vue 쪽에서 this.artists에 저장된 값을 v-for 지시에 따라 회전
음악가 이름을 순환하는 중입니다.

완성!

다음은 검색 기능을 실현하고 싶다.
현재 검색 후 마이그레이션된 Vue를 사용하여 검색 결과를 비동기적으로 표시합니다.

인용원

https://qiita.com/jnchito/items/30ab14ebf29b945559f6
https://qiita.com/cohki0305/items/582c0f5ed0750e60c951
https://qiita.com/cohki0305/items/a678b0b17c5b496c1de9