Vue.js 및 Ruby on Rails를 사용하여 유연한 웹 애플리케이션을 구축하는 방법-View.js-php.cn

Vue.js 및 Ruby on Rails를 사용하여 유연한 웹 애플리케이션을 구축하는 방법

PHPz

풀어 주다： 2023-07-31 18:41:13

원래의

1511명이 탐색했습니다.

Vue.js와 Ruby on Rails를 사용하여 유연한 웹 애플리케이션을 구축하는 방법

현대 웹 개발을 위한 두 가지 널리 사용되는 프레임워크인 Vue.js와 Ruby on Rails는 모두 단순성, 사용 용이성, 효율성 및 유연성으로 인해 개발자들 사이에서 인기가 높습니다. . 사랑. Vue.js는 UI 인터페이스에서 대화형 효과를 얻는 데 초점을 맞춘 가볍고 진보적인 JavaScript 프레임워크인 반면, Ruby on Rails는 안정적인 웹 애플리케이션을 빠르게 구축하는 데 초점을 맞춘 매우 우아하고 완전한 Ruby 언어 개발 프레임워크입니다. 이 기사에서는 이 두 프레임워크를 사용하여 유연한 웹 애플리케이션을 구축하는 방법을 소개하고 해당 코드 예제를 제공합니다.

1. 준비

Vue.js 설치

Vue.js는 설치가 매우 간단합니다. CDN을 통해 도입하거나 npm 패키지 관리자를 통해 설치할 수 있습니다. 여기에서는 npm을 사용하여 설치하고 터미널을 열고 다음 명령을 입력합니다.

npm install vue

로그인 후 복사

Ruby on Rails 애플리케이션 생성

먼저 Ruby and Rails가 설치되어 있는지 확인한 후 다음을 통해 새 Rails 애플리케이션을 생성합니다. 명령:

rails new myapp

로그인 후 복사

다음으로 애플리케이션 디렉토리로 이동하여 Rails 서버를 시작합니다.

cd myapp
rails server

로그인 후 복사

2. Vue.js를 Ruby on Rails 애플리케이션에 통합

Vue.js 소개

app/assets/에서 하나 생성 Rails 애플리케이션의 javascripts 디렉터리 vue와 같은 새 폴더를 만들고 해당 폴더 아래에 새 JavaScript 파일 vue.js를 만듭니다. 그런 다음 vue.js 파일에 Vue.js 라이브러리를 도입합니다.

//= require vue

로그인 후 복사

Vue 구성 요소 만들기

app/assets/javascripts/vue 디렉토리에 app.vue와 같은 새 파일을 만듭니다. app.vue 파일에서 Vue 구성 요소를 정의합니다.

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello Vue.js!'
      }
    },
    methods: {
      changeMessage() {
        this.message = 'Hello Ruby on Rails!'
      }
    }
  }
</script>

로그인 후 복사

Rails 보기에서 Vue 구성 요소 사용

Rails 애플리케이션의 app/views 디렉터리에 Welcome.html.erb와 같은 새 보기 파일을 만듭니다. 그런 다음 이 파일에 Vue 구성 요소를 추가하고 별도의 태그로 사용합니다.

<%= javascript_pack_tag 'vue' %>

<div id="app">
  <app></app>
</div>

<script>
  import App from '../vue/app.vue'

  new Vue({
    el: '#app',
    components: { App }
  })
</script>

로그인 후 복사

Run the application

터미널에 다음 명령을 입력하여 Rails 서버를 시작한 다음 http://localhost:3000/을 방문합니다. 애플리케이션 효과 보기:

rails server

로그인 후 복사

3. Ruby on Rails 백엔드와의 상호 작용

Vue.js는 프론트 엔드 프레임워크로서 백엔드와의 데이터 상호 작용을 통해 더욱 강력한 기능을 구현할 수 있습니다. 다음은 Ruby on Rails 백엔드와 상호작용하는 간단한 예입니다.

Rails 모델 및 컨트롤러 만들기

먼저 Rails 애플리케이션에서 새 모델과 컨트롤러를 만듭니다. 예를 들어 Post:

rails generate model Post title:string content:text
rails generate controller Posts index create

로그인 후 복사

그런 다음 데이터베이스 마이그레이션 작업을 수행합니다.

rake db:migrate

로그인 후 복사

Posts에서 API 인터페이스 쓰기

컨트롤러에서 , 인덱스를 추가하고 메소드를 생성하고 이를 API 인터페이스로 사용하여 JSON 데이터를 반환합니다.

class PostsController < ApplicationController
  def index
    @posts = Post.all
    render json: @posts
  end

  def create
    @post = Post.new(post_params)
    if @post.save
      render json: @post, status: :created
    else
      render json: @post.errors, status: :unprocessable_entity
    end
  end

  private

  def post_params
    params.require(:post).permit(:title, :content)
  end
end

로그인 후 복사

Vue 구성 요소에서 백엔드 인터페이스를 호출합니다.

app.vue 구성 요소에서 Vue의 http 모듈과 백엔드를 사용하여 데이터 상호 작용 수행 . 데이터에 빈 게시물 배열을 선언하고 마운트된 후크의 http.get 메소드를 통해 백엔드에서 반환된 데이터를 가져옵니다.

export default {
  data() {
    return {
      posts: []
    }
  },
  mounted() {
    this.$http.get('/posts')
      .then(response => {
        this.posts = response.data
      })
  }
}

로그인 후 복사

백엔드 데이터 표시

템플릿에서 v-for 명령을 사용하여 게시물 배열 및 페이지에 데이터 표시:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <h2>{{ post.title }}</h2>
        <p>{{ post.content }}</p>
      </li>
    </ul>
  </div>
</template>

로그인 후 복사

위 단계를 통해 간단한 프런트엔드 및 백엔드 데이터 상호 작용을 구현하고 백엔드에서 반환된 데이터를 페이지에 표시했습니다.

요약

이 글에서는 Vue.js와 Ruby on Rails를 사용하여 유연한 웹 애플리케이션을 구축하는 방법을 소개하고 해당 코드 예제를 제공했습니다. 이 두 프레임워크의 결합을 통해 효율적인 프런트엔드 UI 상호 작용을 달성할 수 있을 뿐만 아니라 안정적인 백엔드 API 인터페이스를 신속하게 구축할 수 있습니다. 이 글이 웹 개발을 위해 Vue.js와 Ruby on Rails를 사용할 때 도움이 되기를 바랍니다.

위 내용은 Vue.js 및 Ruby on Rails를 사용하여 유연한 웹 애플리케이션을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!