So erstellen Sie leistungsstarke Webanwendungen mit Vue.js und Ruby

So erstellen Sie leistungsstarke Webanwendungen mit Vue.js und der Ruby-Sprache

Mit der kontinuierlichen Entwicklung von Webanwendungen wird die Erstellung leistungsstarker Anwendungen immer wichtiger. Die Verwendung von Vue.js und der Ruby-Sprache zum Erstellen von Webanwendungen ist eine sehr ideale Wahl. Vue.js ist ein leichtes Front-End-Framework, während Ruby eine einfache, aber leistungsstarke Programmiersprache ist. Durch die Kombination dieser beiden Technologien können wir leistungsstarke Webanwendungen effizienter erstellen.

In diesem Artikel besprechen wir, wie Sie Vue.js und die Ruby-Sprache verwenden, um leistungsstarke Webanwendungen zu erstellen, und stellen einige Codebeispiele bereit, die Ihnen das Verständnis erleichtern.

1. Erstellen Sie ein Projekt

Zuerst müssen wir ein neues Projekt erstellen. Mithilfe der Vue-CLI können wir schnell ein Vue.js-Projekt erstellen. Führen Sie den folgenden Befehl in der Befehlszeile aus, um die Vue-CLI zu installieren:

npm install -g @vue/cli

Dann können wir ein neues Vue-Projekt erstellen:

vue create project-name

Als nächstes möchten wir auswählen, welche Konfiguration verwendet werden soll. Wir können die manuelle Konfiguration wählen, um unsere Projekteinstellungen anzupassen. In den Konfigurationsoptionen müssen wir uns für die Verwendung von Babel zur Unterstützung der ES6-Syntax entscheiden und uns auch für die Verwendung von Plug-Ins wie Vue Router und Vuex entscheiden, um uns beim Erstellen komplexer Webanwendungen zu unterstützen.

2. Erstellen Sie eine Frontend-Seite

In unserem Vue.js-Projekt können wir eine Frontend-Seite erstellen, um unsere Daten anzuzeigen. Wir können die Komponenten von Vue verwenden, um verschiedene Teile der Seite zu erstellen.

Erstellen wir zunächst eine Komponente zur Anzeige einer Liste. Erstellen Sie einen neuen Ordner „components“ unter dem Ordner „src“ und erstellen Sie darin eine neue Einzeldateikomponente „List.vue“ mit dem folgenden Code:

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

Dann möchten wir diese Komponente in unserer App.vue-Datei verwenden. Fügen Sie den folgenden Code in App.vue hinzu:

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

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

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

Schließlich müssen wir App.vue in die Datei main.js einführen und es auf einem DOM-Element bereitstellen. Fügen Sie den folgenden Code zu main.js hinzu:

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

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

Jetzt haben wir die Erstellung der Frontend-Seite abgeschlossen. Wir können den Entwicklungsserver starten, indem wir npm runserv ausführen und unsere Seite im Browser anzeigen.

3. Erstellen Sie eine Backend-API

Jetzt betreten wir den Ruby-Sprachteil und erstellen eine einfache Backend-API, um Daten für unsere Frontend-Seite bereitzustellen.

Zuerst müssen wir Ruby on Rails installieren. Führen Sie den folgenden Befehl in der Befehlszeile aus, um Ruby on Rails zu installieren:

gem install rails

Dann erstellen wir ein neues Rails-Projekt. Führen Sie den folgenden Befehl in der Befehlszeile aus:

rails new api

Als Nächstes möchten wir ein Item-Modell und einen Items-Controller erstellen, um die mit Items verbundene Logik zu verwalten. Führen Sie den folgenden Befehl in der Befehlszeile aus:

rails g model Item name:string
rails g controller Items

Wir möchten die Item-Tabelle in der Datenbank erstellen. Führen Sie den folgenden Befehl in der Befehlszeile aus:

rails db:migrate

Danach müssen wir eine Indexmethode im Items-Controller definieren, um alle Artikeldaten abzurufen und sie im JSON-Format an das Frontend zurückzugeben. Fügen Sie den folgenden Code zu app/controllers/items_controller.rb hinzu:

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

Abschließend definieren wir eine Route in der Datei config/routes.rb, die auf unseren Items-Controller verweist. Fügen Sie den folgenden Code in „routes.rb“ hinzu:

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

Jetzt wurde unsere Backend-API erstellt. Wir können den Rails-Server starten, indem wir „rails“ ausführen und die API im Browser aufrufen, um die zurückgegebenen Daten anzuzeigen.

4. Front-End und Back-End verbinden

Jetzt müssen wir die Front-End-Seite und die Back-End-API verbinden. Wir werden Axios verwenden, um HTTP-Anfragen zu senden und Daten abzurufen.

Zuerst müssen wir Axios installieren. Führen Sie den folgenden Befehl in der Befehlszeile aus, um Axios zu installieren:

npm install axios

Dann müssen wir die List.vue-Komponente ändern, um Daten von der Backend-API abzurufen. Fügen Sie den folgenden Code in List.vue hinzu:

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

Zu diesem Zeitpunkt haben wir die Front-End-Seite und die Back-End-API erfolgreich verbunden. Wir können npm run dienen erneut ausführen, um den Entwicklungsserver zu starten und unsere App im Browser anzuzeigen.

Fazit

Durch die Verwendung von Vue.js und der Ruby-Sprache können wir Webanwendungen mit hervorragender Leistung erstellen. Vue.js bietet ein flexibles und leistungsstarkes Front-End-Framework, während Ruby eine prägnante und effiziente Back-End-Sprache bereitstellt. Wir haben anhand von Beispielcodes gezeigt, wie Sie mit Vue.js und der Ruby-Sprache eine leistungsstarke Webanwendung erstellen.

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