So erstellen Sie flexible Webanwendungen mit Vue.js und Ruby on Rails

So verwenden Sie Vue.js und Ruby on Rails zum Erstellen flexibler Webanwendungen

Als zwei beliebte Frameworks für die moderne Webentwicklung sind Vue.js und Ruby on Rails bei Entwicklern wegen ihrer Einfachheit, Benutzerfreundlichkeit, Effizienz und Flexibilität beliebt . Liebe. Vue.js ist ein leichtes, progressives JavaScript-Framework, das sich auf die Erzielung interaktiver Effekte auf der Benutzeroberfläche konzentriert, während Ruby on Rails ein äußerst elegantes und vollständiges Ruby-Sprachentwicklungs-Framework ist, das sich auf die schnelle Erstellung zuverlässiger Webanwendungen konzentriert. In diesem Artikel wird erläutert, wie Sie mit diesen beiden Frameworks flexible Webanwendungen erstellen und entsprechende Codebeispiele bereitstellen.

1. Vorbereitung

1. Vue.js installieren

Vue.js ist sehr einfach zu installieren. Es kann über CDN eingeführt oder über den npm-Paketmanager installiert werden. Hier entscheiden wir uns für die Installation mit npm, öffnen das Terminal und geben den folgenden Befehl ein:

npm install vue

2. Erstellen Sie eine Ruby on Rails-Anwendung.

Stellen Sie zunächst sicher, dass Sie Ruby und Rails installiert haben, und erstellen Sie dann wie folgt eine neue Rails-Anwendung Befehl:

rails new myapp

Als nächstes gehen Sie in das Anwendungsverzeichnis und starten den Rails-Server:

cd myapp
rails server

2. Integrieren Sie Vue.js in die Ruby on Rails-Anwendung

1. Führen Sie Vue.js ein

Erstellen Sie eines in app/assets/ javascripts-Verzeichnis der Rails-Anwendung Einen neuen Ordner, z. B. vue, und eine neue JavaScript-Datei vue.js unter diesem Ordner erstellen. Führen Sie dann die Vue.js-Bibliothek in der vue.js-Datei ein:

//= require vue

2. Erstellen Sie eine Vue-Komponente.

Erstellen Sie eine neue Datei im Verzeichnis app/assets/javascripts/vue, z. B. app.vue. Definieren Sie eine Vue-Komponente in der Datei app.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. Vue-Komponenten in Rails-Ansichten verwenden

Erstellen Sie eine neue Ansichtsdatei im Verzeichnis app/views der Rails-Anwendung, z. B. Welcome.html.erb. Fügen Sie dann die Vue-Komponente in diese Datei ein und verwenden Sie sie als separates Tag:

<%= 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. Führen Sie die Anwendung aus

Geben Sie den folgenden Befehl in das Terminal ein, um den Rails-Server zu starten, und besuchen Sie dann http://localhost:3000/ Willkommen zum Anzeigen des Anwendungseffekts:

rails server

3. Interaktion mit dem Ruby on Rails-Backend

Vue.js kann als Front-End-Framework durch Dateninteraktion mit dem Backend leistungsfähigere Funktionen erreichen. Unten finden Sie ein einfaches Beispiel für die Interaktion mit einem Ruby on Rails-Backend.

1. Erstellen Sie ein Rails-Modell und einen Controller.

Erstellen Sie zunächst ein neues Modell und einen neuen Controller in der Rails-Anwendung, zum Beispiel Post:

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

Führen Sie dann den Datenbankmigrationsvorgang aus:

rake db:migrate

2. Schreiben Sie die API-Schnittstelle

in Posts im Controller , fügen Sie den Index hinzu, erstellen Sie Methoden und verwenden Sie sie als API-Schnittstellen, um JSON-Daten zurückzugeben:

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. Rufen Sie die Backend-Schnittstelle in der Vue-Komponente auf.

Verwenden Sie in der app.vue-Komponente das http-Modul von Vue und führen Sie im Backend eine Dateninteraktion durch . Deklarieren Sie ein leeres Array „Beiträge in Daten“ und erhalten Sie die vom Backend zurückgegebenen Daten über die http.get-Methode im gemounteten Hook:

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

4. Backend-Daten anzeigen

Verwenden Sie die V-for-Anweisung in der Vorlage, um die Beiträge zu durchlaufen Array und Daten auf der Seite anzeigen:

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

Durch die obigen Schritte haben wir eine einfache Front-End- und Back-End-Dateninteraktion implementiert und die vom Back-End zurückgegebenen Daten auf der Seite angezeigt.

Zusammenfassung

In diesem Artikel haben wir vorgestellt, wie man flexible Webanwendungen mit Vue.js und Ruby on Rails erstellt, und entsprechende Codebeispiele bereitgestellt. Durch die kombinierte Verwendung dieser beiden Frameworks können wir nicht nur eine effiziente Front-End-UI-Interaktion erreichen, sondern auch schnell zuverlässige Back-End-API-Schnittstellen erstellen. Ich hoffe, dieser Artikel hilft Ihnen bei der Verwendung von Vue.js und Ruby on Rails für die Webentwicklung.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie flexible Webanwendungen mit Vue.js und Ruby on Rails. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!