Vue.js と Ruby on Rails を使用して柔軟な Web アプリケーションを構築する方法

Vue.js と Ruby on Rails を使用して柔軟な Web アプリケーションを構築する方法

最新の Web 開発で人気のある 2 つのフレームワークとして、Vue.js と Ruby on Rails はどちらも使いやすく、効率的で柔軟性があります。機能は大多数の開発者に愛されています。 Vue.js は、UI インターフェイス上でインタラクティブな効果を実現することに重点を置いた軽量で進歩的な JavaScript フレームワークであり、一方、Ruby on Rails は、信頼性の高い Web アプリケーションを迅速に構築することに重点を置いた、非常にエレガントで完全な Ruby 言語開発フレームワークです。この記事では、これら 2 つのフレームワークを使用して柔軟な Web アプリケーションを構築する方法を紹介し、対応するコード例を示します。

1. 準備

1. Vue.js のインストール

Vue.js のインストールは非常に簡単で、CDN または経由で導入できます。 npmパッケージマネージャーのインストール。ここでは、インストールに npm を使用することを選択し、ターミナルを開いて次のコマンドを入力します。

npm install vue

2. Ruby on Rails アプリケーションの作成

まず、Ruby とRails がインストールされたら、次のコマンドを使用して新しい Rails アプリケーションを作成します。

rails new myapp

次に、アプリケーション ディレクトリに移動し、Rails サーバーを起動します。

cd myapp
rails server

2. Vue.js を Ruby on Rails に統合します。 application

1. Vue.js の紹介

Rails アプリケーション (vue など) の app/assets/javascripts ディレクトリに新しいフォルダーを作成し、その下に新しいフォルダーを作成します。このフォルダーには JavaScript ファイル vue.js が含まれます。次に、vue.js ファイルに Vue.js ライブラリを導入します。

//= require vue

2. 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>

3. 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>

4. アプリケーションを実行します

ターミナルに次のコマンドを入力して、Rails サーバーを起動します。次に、http://localhost:3000/welcome にアクセスして、アプリケーションの効果を表示します:

rails server

3. フロントエンド フレームワークとしての Ruby on Rails バックエンド

Vue.js との対話、バックエンドと対話可能 データと対話して、より強力な機能を実現します。以下は、Ruby on Rails バックエンドと対話する簡単な例です。

1. Rails モデルとコントローラーの作成

まず、Rails アプリケーションで新しいモデルとコントローラーを作成します。たとえば、Post:

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

次に、データベースの移行を実行します。操作:

rake db:migrate

2. API インターフェイスの書き込み

Posts コントローラーで、インデックスを追加してメソッドを作成し、JSON データを API インターフェイスとして返します:

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

3. Vue コンポーネントでバックエンド インターフェイスを呼び出す

app.vue コンポーネントで、Vue の http モジュールを使用してバックエンドと対話します。データ内の空の配列ポストを宣言し、マウントされたフックの http.get メソッドを通じてバックエンドから返されるデータを取得します。

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

4. バックエンド データの表示

Inテンプレートの v-for 命令を使用して、posts 配列を走査し、ページにデータを表示します。

<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 を使用して柔軟な Web アプリケーションを構築する方法を紹介し、対応するコード例を提供しました。これら 2 つのフレームワークを組み合わせて使用​​することで、効率的なフロントエンド UI インタラクションを実現できるだけでなく、信頼性の高いバックエンド API インターフェイスを迅速に構築することもできます。この記事が、Web 開発で Vue.js と Ruby on Rails を使用する際のお役に立てれば幸いです。

以上がVue.js と Ruby on Rails を使用して柔軟な Web アプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。