Golang lernt die Entwicklung von Webanwendungen basierend auf Vue.js

Golang ist eine von Google entwickelte Open-Source-Programmiersprache, die jedoch aufgrund ihrer effizienten Parallelitätsleistung, hervorragenden Leistung und guten Entwicklungserfahrung bei Entwicklern sehr gefragt ist. Gleichzeitig ist Vue.js derzeit eines der beliebtesten JavaScript-Frameworks und wird häufig bei der Entwicklung von Webanwendungen eingesetzt. In diesem Artikel erfahren Sie, wie Sie mit Golang und Vue.js eine webbasierte Anwendung entwickeln.

1. Umgebungseinrichtung

Zunächst müssen Sie die für die Ausführung von Golang und Vue.js erforderliche Umgebung installieren:

Für Golang müssen Sie die Golang-Entwicklungsumgebung installieren und zum Systempfad hinzufügen. Das Installationspaket kann von der [offiziellen Website](https://golang.org/dl/) heruntergeladen und gemäß den Anweisungen installiert werden.

Für Vue.js müssen Sie npm, den Paketmanager von node.js, global installieren und Vue.js über npm installieren. Relevante Informationen finden Sie auf der [offiziellen Website](https://vuejs.org).

2. Erstellen Sie ein neues Projekt.

Erstellen Sie ein neues Golang- und Vue.js-Projekt:

mkdir myproject
cd myproject

Erstellen Sie eine neue go.mod-Datei mit Golang:

module projectname

go 1.16

require (
    github.com/gin-gonic/gin v1.6.3
)

In diesem Beispiel haben wir das Gin-Framework verwendet. Sie können auch Verwenden Sie andere Frameworks, mit denen Sie vertraut sind.

Als nächstes erstellen Sie mit npm eine neue Vue.js-Anwendung:

npm init @vue/cli

Dieser Befehl fordert uns auf, die erforderliche Konfiguration auszuwählen und die Auswahl einzugeben. Nachdem die Konfiguration abgeschlossen ist, führen wir eine Initialisierung des Projekts durch:

cd frontend
npm install
npm run build

Beachten Sie, dass diese Befehle im Frontend-Verzeichnis des Vue.js-Projekts ausgeführt werden müssen.

3. Backend-Code schreiben

Als nächstes müssen wir Backend-Code schreiben. In diesem Beispiel verwenden wir das Gin-Framework, um die einfachste Webanwendung zu schreiben und stellen die von der Vue.js-Anwendung erstellten HTML-Dateien dem Browser zum Rendern zur Verfügung.

In main.go führen wir das Gin-Framework-Paket ein und erstellen eine Gin-Instanz:

package main

import (
    "net/http"

    "github.com/gin-gonic/gin"
)

func main() {
    router := gin.Default()
}

Wir verwenden Gins Standardfunktion, um eine Standard-Router-Instanz zu erstellen. Jetzt verbinden wir den Router mit der von Vue.js generierten HTML-Datei:

func main() {
    router := gin.Default()

    router.StaticFS("/", http.Dir("./frontend/dist"))
}

Dieser Code verknüpft alle Anfragen an das Stammverzeichnis „/“ mit der von Vue.js generierten HTML-Datei. Zum Schluss führen wir diese Webanwendung aus:

func main() {
    router := gin.Default()

    router.StaticFS("/", http.Dir("./frontend/dist"))

    router.Run(":8080")
}

Mit dieser Codezeile können wir den Dienst auf dem lokalen 8080-Port starten.

4. Schreiben Sie den Front-End-Code

Nachdem wir das Schreiben des Back-End-Codes abgeschlossen haben, müssen wir den Front-End-Code in Vue.js schreiben.

Zuerst müssen wir in der App.vue-Datei der Vue.js-Anwendung die API des Backends einführen:

<script>
export default {
  data() {
    return {
      data: [],
    };
  },

  async created() {
    const response = await fetch("/api/data");
    this.data = await response.json();
  },
};
</script>

Diese Codezeile greift auf die /data-Route zu, die wir im Backend geschrieben haben, und erhält eine Antwort Füllen Sie im JSON-Format das Datenarray aus. Als nächstes müssen wir die Vorlagensyntax von Vue.js verwenden, um diese Daten zu extrahieren und zu rendern:

<template>
  <ul>
    <li v-for="(title, index) in data" :key="index">
      {{ title }}
    </li>
  </ul>
</template>

Dieser Code verwendet die V-for-Anweisung von Vue.js, um das Datenarray zu durchlaufen und die Listenelemente zu rendern. Schließlich müssen wir der Eintragsdatei main.js der Vue.js-Anwendung einen Router hinzufügen, der auf den /data-Pfad verweist, und die Vue.js-Anwendung starten:

import { createApp } from "vue";
import App from "./App.vue";

import router from "./router";

createApp(App).use(router).mount("#app");

Wir verwenden die von Vue.js offiziell bereitgestellte Route In diesem Beispiel lautet der Inhalt der Datei router.js zum Verwalten des Plug-Ins wie folgt:

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    name: "Home",
    component: () => import(/* webpackChunkName: "home" */ "./views/Home.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

In diesem Code definieren wir einen Basisrouter, um den Stammpfad zur Home.vue-Komponente zu navigieren.

5. Ausführen

Jetzt haben wir den gesamten Code für die Entwicklung der Webanwendung mit Golang und Vue.js fertiggestellt. Sie müssen den folgenden Befehl verwenden, um die Anwendung zu starten:

go run main.go

Öffnen Sie den Browser und geben Sie „http://localhost:8080“ ein, um auf unsere Webanwendung zuzugreifen.

6. Fazit

In diesem Artikel haben wir gezeigt, wie man webbasierte Anwendungen mit Golang und Vue.js entwickelt. Durch die Kombination der Vorteile dieser beiden Frameworks können wir effizientere und schnellere Webanwendungen entwickeln, um den Entwicklungsanforderungen unterschiedlicher Anforderungen gerecht zu werden. Ich hoffe, dass dieser Artikel Entwicklern helfen und zu mehr Kreativität und innovativem Denken inspirieren kann.

Das obige ist der detaillierte Inhalt vonGolang lernt die Entwicklung von Webanwendungen basierend auf Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!