suchen

Heim >Backend-Entwicklung >Golang >So zeigen Sie Vue in Golang an

So zeigen Sie Vue in Golang an

王林
王林Original
2023-05-10 10:18:36933Durchsuche

In den letzten Jahren haben mit der Entwicklung von Front-End-Frameworks viele Back-End-Sprachen versucht, sich mit Front-End-Frameworks zu kombinieren, um eine Full-Stack-Entwicklung zu erreichen. Unter diesen Back-End-Sprachen hat Go (Golang) aufgrund seiner Effizienz, Einfachheit, Stabilität und Zuverlässigkeit immer mehr Aufmerksamkeit erhalten. Vue.js ist ein schnelles Front-End-Framework, das viele leistungsstarke Tools und Komponenten bereitstellt und es Entwicklern ermöglicht, komplexe Single-Page-Anwendungen schneller und einfacher zu erstellen.

In diesem Artikel untersuchen wir, wie man Vue.js in eine Golang-Webanwendung einbettet, um die Verwendung des Frontends zu demonstrieren.

Voraussetzungen

Bevor Sie Vue.js anzeigen können, müssen Sie über die folgenden Technologien und Tools verfügen:

  • Go-Sprachumgebung, It kann von der offiziellen Website heruntergeladen und installiert werden.
  • Vue CLI, das über den npm-Paketmanager installiert werden kann: 
npm install -g vue-cli
  • Ein Texteditor, wie Visual Studio Code, Sublime Text , usw.
  • Ein Browser wie Chrome, Firefox usw.

Schritt 1: Erstellen Sie eine Vue.js-Anwendung.

Zuerst müssen wir eine Vue.js-Anwendung erstellen. Ein Standard-Vue.js-Projekt kann schnell mit der Vue-CLI erstellt werden: 

vue init webpack-simple my-vue-app

Hier haben wir ein Vue.js-Projekt mit dem Namen my-vue-app erstellt. Dadurch wird ein Projektverzeichnis erstellt, das die Datei Vue.js enthält. my-vue-app的Vue.js项目。这将创建一个包含Vue.js文件的项目目录。

进入my-vue-app目录并运行以下命令：

npm install
npm run dev

这会启动一个本地的Web服务器，并在浏览器中显示Vue.js默认页面。

步骤2：在Go应用程序中集成Vue.js

现在我们已经创建了Vue.js应用程序，并且可以在本地运行它。下一步是将它嵌入到我们的Go应用程序中。

在Go应用程序中使用Vue.js最常见的方式是将Vue.js构建文件放置在Go应用程序中的一个静态目录中，并在HTML文件中引用这些文件。这可以通过以下两种方式来实现：

方法1：在Go应用程序中使用模板

在这种方法中，我们将使用Go应用程序提供的HTML模板，并在其中引用Vue.js构建文件。我们首先需要确保Vue.js构建文件已经被编译，我们可以使用以下命令完成编译：

npm run build

执行此命令将创建一个名为dist的目录，其中包含我们打包后的Vue.js应用程序。现在，我们需要将该目录移动到Go应用程序中的静态目录中。静态目录可以是任何我们想要的目录，它会存储应用程序中的静态资源文件。在本文中，我们使用static作为静态目录，您可以自行修改。

将dist目录复制到Go应用程序的静态目录中：

cp -r dist/ $GOPATH/src/my-app/static/

在我们的Go应用程序中，我们需要定义一个http.FileServer处理程序，它将返回静态目录中的文件。我们还需要定义模板，该模板将加载Vue.js应用程序的HTML文件，并在其中包含Vue.js构建文件。

以下是用于定义路由和模板的示例代码：

package main

import (
    "html/template"
    "net/http"
)

func main() {
    http.HandleFunc("/", handler)
    http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static"))))
    http.ListenAndServe(":8080", nil)
}

func handler(w http.ResponseWriter, r *http.Request) {
    tpl, err := template.ParseFiles("templates/index.html")
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }

    err = tpl.Execute(w, nil)
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
    }
}

在上面的代码中，我们定义了一个路由/，它将在浏览器中打开templates/index.html文件，并将其呈现给用户。我们还定义了一个静态文件处理程序，它将加载我们静态目录中的文件。该处理程序将处理所有以/static/开头的请求。

在我们的HTML模板中，我们包含Vue.js构建文件，并将div#app元素用作Vue.js应用程序的根元素。

以下是一个index.html文件的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My Vue App</title>
</head>
<body>
  <div id="app">
    <!-- Vue.js应用程序将在此渲染 -->
  </div>
  <script src="/static/js/app.js"></script>
</body>
</html>

在上面的代码中，我们将Vue.js构建文件的路径设置为/static/js/app.js。您可以根据您的需求自行修改。

方法2：在Go应用程序中使用Vue.js路由

在这种方法中，我们将使用Vue.js作为我们的路由器，并将其嵌入到我们的Go应用程序中。这样，我们实际上将使用Go应用程序作为Vue.js的后端，Vue.js将负责处理用户的路由请求。

首先，我们需要确保Vue.js应用程序已经被编译，我们可以使用以下命令完成编译：

npm run build

执行此命令将创建一个名为dist的目录，其中包含我们打包后的Vue.js应用程序。现在，我们需要将该目录移动到Go应用程序的静态目录中。静态目录可以是任何我们想要的目录，它会存储应用程序中的静态资源文件。在本文中，我们使用static作为静态目录，您可以自行修改。

将dist

Gehen Sie in das Verzeichnis my-vue-app und führen Sie den folgenden Befehl aus: 

cp -r dist/ $GOPATH/src/my-app/static/

Dadurch wird ein lokaler Webserver gestartet und angezeigt Der Browser zeigt die Standardseite von Vue.j an.

Schritt 2: Vue.js in Go-Anwendung integrieren#🎜🎜##🎜🎜#Jetzt haben wir die Vue.js-Anwendung erstellt und können sie lokal ausführen. Der nächste Schritt besteht darin, es in unsere Go-Anwendung einzubetten. #🎜🎜##🎜🎜#Die häufigste Art, Vue.js in einer Go-Anwendung zu verwenden, besteht darin, die Vue.js-Build-Dateien in einem statischen Verzeichnis in der Go-Anwendung zu platzieren und diese Dateien in der HTML-Datei zu referenzieren. Dies kann auf zwei Arten erreicht werden: #🎜🎜#

Methode 1: Vorlagen in der Go-Anwendung verwenden

#🎜🎜# Bei dieser Methode verwenden wir den von der Go-Anwendungsvorlage bereitgestellten HTML-Code und verweisen auf die Vue.js Build-Datei darin. Wir müssen zunächst sicherstellen, dass die Build-Datei von Vue.js kompiliert wurde. Wir können den folgenden Befehl verwenden, um die Kompilierung abzuschließen: #🎜🎜#
package main

import (
    "encoding/json"
    "net/http"
)

type Message struct {
    Text string `json:"text"`
}

func main() {
    http.HandleFunc("/", handler)
    http.HandleFunc("/api/hello", hello)
    http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static"))))
    http.ListenAndServe(":8080", nil)
}

func handler(w http.ResponseWriter, r *http.Request) {
    http.ServeFile(w, r, "index.html")
}

func hello(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "application/json")
    message := Message{"Hello, Vue.js!"}
    json.NewEncoder(w).Encode(message)
}
#🎜🎜#Durch die Ausführung dieses Befehls wird ein Verzeichnis mit dem Namen dist erstellt. code>, wobei unsere verpackte Vue.js-Anwendung enthält. Jetzt müssen wir dieses Verzeichnis in ein statisches Verzeichnis in unserer Go-Anwendung verschieben. Das statische Verzeichnis kann ein beliebiges Verzeichnis sein und speichert die statischen Ressourcendateien in der Anwendung. In diesem Artikel verwenden wir <code>static als statisches Verzeichnis. Sie können es selbst ändern. #🎜🎜##🎜🎜#Kopieren Sie das Verzeichnis dist in das statische Verzeichnis der Go-Anwendung: #🎜🎜#
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})
#🎜🎜#In unserer Go-Anwendung müssen wir einen definieren http.FileServerhandler, der die Dateien im statischen Verzeichnis zurückgibt. Wir müssen auch die Vorlage definieren, die die HTML-Datei der Vue.js-Anwendung lädt und die Vue.js-Build-Datei darin einbindet. #🎜🎜##🎜🎜#Das Folgende ist der Beispielcode zum Definieren von Routen und Vorlagen: #🎜🎜#
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      message: ''
    }
  },
  created () {
    axios.get('/api/hello')
      .then(response => {
        this.message = response.data.text
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>
#🎜🎜#Im obigen Code definieren wir einen Routen-/, der den templates/index.html wird im Browser geöffnet und dem Benutzer angezeigt. Wir definieren auch einen statischen Dateihandler, der Dateien aus unserem statischen Verzeichnis lädt. Dieser Handler verarbeitet alle Anfragen, die mit /static/ beginnen. #🎜🎜##🎜🎜#In unsere HTML-Vorlage integrieren wir die Vue.js-Build-Datei und verwenden das div#app-Element als Stammelement der Vue.js-Anwendung. #🎜🎜##🎜🎜#Das Folgende ist ein Beispiel für eine index.html-Datei: #🎜🎜#rrreee#🎜🎜#Im obigen Code legen wir den Pfad zu Vue.js fest Die Build-Datei ist /static/js/app.js. Sie können es selbst nach Ihren Bedürfnissen modifizieren. #🎜🎜#

Methode 2: Vue.js-Routing in der Go-Anwendung verwenden

#🎜🎜#Bei dieser Methode verwenden wir Vue.js als unseren Router und betten ihn in unsere Go-Anwendung ein. Auf diese Weise verwenden wir die Go-Anwendung tatsächlich als Backend für Vue.js und Vue.js ist für die Bearbeitung der Routing-Anfragen des Benutzers verantwortlich. #🎜🎜##🎜🎜#Zuerst müssen wir sicherstellen, dass die Vue.js-Anwendung kompiliert wurde. Wir können die Kompilierung mit dem folgenden Befehl abschließen: #🎜🎜#rrreee#🎜🎜#Durch Ausführen dieses Befehls wird eine erstellt Datei namens dist Verzeichnis, die unsere gepackte Vue.js-Anwendung enthält. Jetzt müssen wir dieses Verzeichnis in das statische Verzeichnis unserer Go-Anwendung verschieben. Das statische Verzeichnis kann ein beliebiges Verzeichnis sein und speichert die statischen Ressourcendateien in der Anwendung. In diesem Artikel verwenden wir static als statisches Verzeichnis. Sie können es selbst ändern. #🎜🎜##🎜🎜#Kopieren Sie das Verzeichnis dist in das statische Verzeichnis der Go-Anwendung: #🎜🎜#rrreee#🎜🎜#In unserer Go-Anwendung müssen wir einen Routenhandler definieren. Dadurch wird die HTML-Datei der Vue.js-Anwendung zurückgegeben und die Vue.js-Anwendung kann die von unserem Go-Backend bereitgestellte API aufrufen. #🎜🎜##🎜🎜#Das Folgende ist Beispielcode zum Definieren von Routen und APIs: #🎜🎜#
package main

import (
    "encoding/json"
    "net/http"
)

type Message struct {
    Text string `json:"text"`
}

func main() {
    http.HandleFunc("/", handler)
    http.HandleFunc("/api/hello", hello)
    http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static"))))
    http.ListenAndServe(":8080", nil)
}

func handler(w http.ResponseWriter, r *http.Request) {
    http.ServeFile(w, r, "index.html")
}

func hello(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "application/json")
    message := Message{"Hello, Vue.js!"}
    json.NewEncoder(w).Encode(message)
}

在上面的代码中，我们定义了两个路由：/和/api/hello。/路由将返回Vue.js应用程序的HTML文件，并让Vue.js应用程序调用我们的Go后端提供的API。/api/hello路由是我们定义的API，它将返回一条简单的JSON消息。

在我们的Vue.js应用程序中，我们需要实现路由器，并确保它可以调用我们Go后端提供的API。以下是一个示例路由器：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

在上面的代码中，我们定义了一个路由器，并将/路由与一个名为HelloWorld的组件相对应。我们还将路由模式设置为history，以便它使用HTML5路由历史记录API，并将其与我们的Go应用程序进行集成。

最后，在我们的Vue.js应用程序中，我们可以使用axios来调用我们Go后端提供的API。以下是一个使用axios调用API的示例：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      message: ''
    }
  },
  created () {
    axios.get('/api/hello')
      .then(response => {
        this.message = response.data.text
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

在上面的代码中，我们在组件的created生命周期中使用axios来调用我们的Go后端提供的API，并将响应数据设置为组件模板中的message数据。

结论

通过本文，我们已经学习了如何将Vue.js嵌入到Golang的Web应用程序中。我们已经探讨了两种方法，一种是使用模板，另一种是使用Vue.js路由器。通过使用Vue.js，我们可以更轻松地构建和管理复杂的前端应用程序，并将其与Golang开发的后端应用程序结合在一起。希望这篇文章可以帮助您更好地理解如何将Golang和Vue.js结合在一起，从而构建高效和可靠的全栈Web应用程序。

Das obige ist der detaillierte Inhalt vonSo zeigen Sie Vue in Golang an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：golang io wartefehlerNächster Artikel：golang io wartefehler

In Verbindung stehende Artikel

Mehr sehen