recherche

Maison >développement back-end >Golang >Comment afficher la vue dans Golang

Comment afficher la vue dans Golang

王林
王林original
2023-05-10 10:18:36927parcourir

Ces dernières années, avec le développement des frameworks front-end, de nombreux langages back-end ont commencé à essayer de se combiner avec des frameworks front-end pour réaliser un développement full-stack. Parmi ces langages back-end, Go (Golang) reçoit de plus en plus d'attention en raison de son efficacité, de sa simplicité, de sa stabilité et de sa fiabilité. Vue.js est un framework frontal rapide qui fournit de nombreux outils et composants puissants, permettant aux développeurs de créer des applications complexes d'une seule page plus rapidement et plus facilement.

Dans cet article, nous explorerons comment intégrer Vue.js dans une application Web Golang pour démontrer l'utilisation du front-end.

Prérequis

Avant d'afficher Vue.js, vous devez disposer des technologies et des outils suivants :

  • Environnement linguistique Go, qui peut être téléchargé et installé à partir du site officiel.
  • Vue CLI, qui peut être installé via le gestionnaire de packages npm : 
npm install -g vue-cli
  • Un éditeur de texte tel que Visual Studio Code, Sublime Text, etc.
  • Un navigateur, tel que Chrome, Firefox, etc.

Étape 1 : Créer une application Vue.js

Tout d'abord, nous devons créer une application Vue.js. Un projet Vue.js standard peut être rapidement créé à l'aide de Vue CLI : 

vue init webpack-simple my-vue-app

Ici, nous avons créé un projet Vue.js nommé my-vue-app. Cela créera un répertoire de projet contenant le fichier Vue.js. 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

Allez dans le répertoire my-vue-app et exécutez la commande suivante : 

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

Cela démarrera un serveur Web local et affichera la page par défaut de Vue.js dans le navigateur.

Étape 2 : Intégrer Vue.js dans l'application Go 🎜🎜Nous avons maintenant créé l'application Vue.js et pouvons l'exécuter localement. L'étape suivante consiste à l'intégrer dans notre application Go. 🎜🎜La manière la plus courante d'utiliser Vue.js dans une application Go consiste à placer les fichiers de construction Vue.js dans un répertoire statique de l'application Go et à référencer ces fichiers dans le fichier HTML. Ceci peut être réalisé des deux manières suivantes : 🎜

Méthode 1 : Utiliser des modèles dans l'application Go

🎜Dans cette méthode, nous utiliserons le modèle HTML fourni par l'application Go et y référencerons Vue.js fichier de construction. Nous devons d'abord nous assurer que le fichier de build Vue.js a été compilé. Nous pouvons utiliser la commande suivante pour terminer la compilation : 🎜
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)
}
🎜L'exécution de cette commande créera un répertoire nommé dist, qui contient notre. Application Vue .js packagée. Nous devons maintenant déplacer ce répertoire vers un répertoire statique dans notre application Go. Le répertoire statique peut être n’importe quel répertoire de notre choix et il stockera les fichiers de ressources statiques dans l’application. Dans cet article, nous utilisons static comme répertoire statique, vous pouvez le modifier vous-même. 🎜🎜Copiez le répertoire dist dans le répertoire statique de l'application Go : 🎜
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
    }
  ]
})
🎜Dans notre application Go, nous devons définir un gestionnaire http.FileServer, il renverra les fichiers dans le répertoire statique. Nous devons également définir le modèle qui chargera le fichier HTML de l'application Vue.js et y inclura le fichier de build Vue.js. 🎜🎜Voici l'exemple de code pour définir les routes et les modèles : 🎜
<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>
🎜Dans le code ci-dessus, nous avons défini une route / qui ouvrira templates/index dans le navigateur .html code> et restituez-le à l'utilisateur. Nous définissons également un gestionnaire de fichiers statiques qui chargera les fichiers de notre répertoire statique. Ce gestionnaire gérera toutes les requêtes commençant par <code>/static/. 🎜🎜Dans notre modèle HTML, nous incluons le fichier de construction Vue.js et utilisons l'élément div#app comme élément racine de l'application Vue.js. 🎜🎜Voici un exemple de fichier index.html : 🎜rrreee🎜Dans le code ci-dessus, nous définissons le chemin d'accès au fichier de build Vue.js sur /static/js/app. js . Vous pouvez le modifier vous-même selon vos besoins. 🎜

Méthode 2 : Utiliser le routage Vue.js dans l'application Go

🎜Dans cette méthode, nous utiliserons Vue.js comme routeur et l'intégrerons dans notre application Go. De cette façon, nous utiliserons réellement l'application Go comme backend pour Vue.js, et Vue.js sera responsable du traitement des demandes de routage de l'utilisateur. 🎜🎜Tout d'abord, nous devons nous assurer que l'application Vue.js a été compilée. Nous pouvons terminer la compilation en utilisant la commande suivante : 🎜rrreee🎜L'exécution de cette commande créera un répertoire appelé dist qui contient. notre package Après l'application Vue.js. Maintenant, nous devons déplacer ce répertoire dans le répertoire statique de notre application Go. Le répertoire statique peut être n’importe quel répertoire de notre choix et il stockera les fichiers de ressources statiques dans l’application. Dans cet article, nous utilisons static comme répertoire statique, vous pouvez le modifier vous-même. 🎜🎜Copiez le répertoire dist dans le répertoire statique de votre application Go : 🎜rrreee🎜Dans notre application Go, nous devons définir un gestionnaire de route qui renverra le fichier HTML de l'application Vue.js et aura le L'application Vue.js appelle l'API fournie par notre backend Go. 🎜🎜Voici l'exemple de code pour définir les routes et l'API : 🎜
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应用程序。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：golang io attendre erreurArticle suivant：golang io attendre erreur

Articles Liés

Voir plus