Vue.js と Ruby を使用して高パフォーマンスの Web アプリケーションを構築する方法

Vue.js と Ruby 言語を使用して高パフォーマンスの Web アプリケーションを構築する方法

Web アプリケーションの継続的な開発に伴い、高パフォーマンスのアプリケーションを構築することがますます重要になってきています。 Vue.js と Ruby 言語を使用して Web アプリケーションを作成することは、非常に理想的な選択です。 Vue.js は軽量のフロントエンド フレームワークであるのに対し、Ruby はシンプルかつ強力なプログラミング言語です。これら 2 つのテクノロジーを組み合わせることで、高性能の Web アプリケーションをより効率的に構築できるようになります。

この記事では、Vue.js と Ruby 言語を使用して高パフォーマンスの Web アプリケーションを構築する方法について説明し、理解を助けるためにいくつかのコード例を示します。

1. プロジェクトの作成

まず、新しいプロジェクトを作成する必要があります。 Vue CLI を使用すると、Vue.js プロジェクトをすばやく作成できます。コマンド ラインで次のコマンドを実行して、Vue CLI をインストールします。

npm install -g @vue/cli

次に、新しい Vue プロジェクトを作成できます。

vue create project-name

次に、使用する構成を選択する必要があります。手動構成を選択して、プロジェクト設定をカスタマイズできます。構成オプションでは、ES6 構文をサポートするために Babel を使用することを選択する必要があります。また、複雑な Web アプリケーションの構築に役立つ Vue Router や Vuex などのプラグインを使用することも選択する必要があります。

2. フロントエンド ページの作成

Vue.js プロジェクトでは、データを表示するフロントエンド ページを作成できます。 Vue のコンポーネントを使用して、ページのさまざまな部分を構築できます。

まず、リストを表示するコンポーネントを作成しましょう。 src フォルダーの下に新しいフォルダー コンポーネントを作成し、その中に次のコードを使用して新しい単一ファイル コンポーネント List.vue を作成します。

<template>
  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  }
}
</script>

次に、これを App.vue ファイル コンポーネントで使用します。 。次のコードを App.vue に追加します。

<template>
  <div>
    <h1>My App</h1>
    <List></List>
  </div>
</template>

<script>
import List from './components/List.vue'

export default {
  components: {
    List
  }
}
</script>

最後に、App.vue を main.js ファイルに導入し、DOM 要素にマウントする必要があります。次のコードを main.js に追加します。

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

これで、フロントエンド ページの作成が完了しました。 npm runserve を実行して開発サーバーを起動し、ブラウザでページを表示できます。

3. バックエンド API の作成

Ruby 言語部分に入り、フロントエンド ページにデータを提供するための単純なバックエンド API を作成する必要があります。

まず、Ruby on Rails をインストールする必要があります。コマンドラインで次のコマンドを実行して、Ruby on Rails をインストールします。

gem install rails

次に、新しい Rails プロジェクトを作成します。コマンド ラインで次のコマンドを実行します。

rails new api

次に、項目に関連するロジックを処理するための項目モデルと項目コントローラーを作成する必要があります。コマンドラインで次のコマンドを実行します:

rails g model Item name:string
rails g controller Items

データベースにItemテーブルを作成したいと考えています。コマンド ラインで次のコマンドを実行します。

rails db:migrate

その後、すべてのアイテム データを取得し、JSON 形式でフロントエンドに返すために、アイテム コントローラーでインデックス メソッドを定義する必要があります。次のコードを app/controllers/items_controller.rb に追加します。

class ItemsController < ApplicationController
  def index
    @items = Item.all
    render json: @items
  end
end

最後に、Items コントローラーを指すように config/routes.rb ファイル内でルートを定義する必要があります。次のコードをroutes.rbに追加します:

Rails.application.routes.draw do
  resources :items
end

これで、バックエンドAPIが作成されました。 Rails を実行して Rails サーバーを起動し、ブラウザで API を呼び出して返されたデータを表示できます。

4. フロントエンドとバックエンドを接続する

次に、フロントエンド ページとバックエンド API を接続する必要があります。 axios を使用して HTTP リクエストを送信し、データを取得します。

まず、axios をインストールする必要があります。コマンド ラインで次のコマンドを実行して axios をインストールします:

npm install axios

次に、List.vue コンポーネントを変更してバックエンド API からデータを取得する必要があります。 List.vue に次のコードを追加します。

<script>
import axios from 'axios'

export default {
  data() {
    return {
      list: []
    }
  },
  methods: {
    fetchList() {
      axios.get('/items')
        .then(response => {
          this.list = response.data
        })
        .catch(error => {
          console.log(error)
        })
    }
  },
  mounted() {
    this.fetchList()
  }
}
</script>

この時点で、フロントエンド ページとバックエンド API が正常に接続されました。 npm runserve を再度実行して開発サーバーを起動し、ブラウザーでアプリを表示できます。

結論

Vue.js と Ruby 言語を使用することで、優れたパフォーマンスの Web アプリケーションを構築できます。 Vue.js は柔軟で強力なフロントエンド フレームワークを提供し、Ruby は簡潔で効率的なバックエンド言語を提供します。 Vue.js と Ruby 言語を使用して高パフォーマンスな Web アプリケーションを構築する方法をサンプル コードを通して説明しました。

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