Bagaimana untuk memaparkan vue dalam golang

Dalam beberapa tahun kebelakangan ini, dengan pembangunan rangka kerja bahagian hadapan, banyak bahasa bahagian belakang telah mula cuba untuk digabungkan dengan rangka kerja bahagian hadapan untuk mencapai pembangunan tindanan penuh. Antara bahasa belakang ini, Go (Golang) telah mendapat lebih banyak perhatian kerana kecekapan, kesederhanaan, kestabilan dan kebolehpercayaannya. Vue.js ialah rangka kerja bahagian hadapan pantas yang menyediakan banyak alatan dan komponen berkuasa, membolehkan pembangun membina aplikasi satu halaman yang kompleks dengan lebih pantas dan mudah.

Dalam artikel ini, kami akan meneroka cara membenamkan Vue.js ke dalam aplikasi web Golang untuk menunjukkan penggunaan bahagian hadapan.

Prasyarat

Sebelum memaparkan Vue.js, anda perlu mempunyai teknologi dan alatan berikut:

• Persekitaran bahasa Go, yang boleh dimuat turun dan dipasang dari laman web rasmi.
• Vue CLI, yang boleh dipasang melalui pengurus pakej npm:

npm install -g vue-cli

• Penyunting teks, seperti Kod Visual Studio, Teks Sublime, dsb.
• Pelayar, seperti Chrome, Firefox, dsb.

Langkah 1: Buat aplikasi Vue.js

Mula-mula, kita perlu mencipta aplikasi Vue.js. Projek Vue.js standard boleh dibuat dengan cepat menggunakan Vue CLI:

vue init webpack-simple my-vue-app

Di sini, kami telah mencipta projek Vue.js bernama my-vue-app. Ini akan mencipta direktori projek yang mengandungi fail Vue.js.

Pergi ke direktori my-vue-app dan jalankan arahan berikut:

npm install
npm run dev

Ini akan memulakan pelayan web tempatan dan memaparkan halaman lalai Vue.js dalam penyemak imbas.

Langkah 2: Integrasikan Vue.js dalam aplikasi Go

Kini kami telah mencipta aplikasi Vue.js dan boleh menjalankannya secara setempat. Langkah seterusnya ialah membenamkannya ke dalam aplikasi Go kami.

Cara paling biasa untuk menggunakan Vue.js dalam aplikasi Go ialah meletakkan fail binaan Vue.js dalam direktori statik dalam aplikasi Go dan merujuk fail ini dalam fail HTML. Ini boleh dicapai dalam dua cara berikut:

Kaedah 1: Menggunakan Templat dalam Aplikasi Go

Dalam kaedah ini kami akan menggunakan templat HTML yang disediakan oleh aplikasi Go dan Rujukan Vue.js bina fail di dalamnya. Mula-mula kita perlu memastikan bahawa fail binaan Vue.js telah disusun Kita boleh menggunakan arahan berikut untuk melengkapkan kompilasi:

npm run build

Melaksanakan arahan ini akan mencipta direktori bernama dist, yang mengandungi pakej kami. Aplikasi vue. Sekarang kita perlu mengalihkan direktori ini ke direktori statik dalam aplikasi Go kami. Direktori statik boleh menjadi mana-mana direktori yang kami mahu, dan ia akan menyimpan fail sumber statik dalam aplikasi. Dalam artikel ini, kami menggunakan static sebagai direktori statik, anda boleh mengubah suainya sendiri.

Salin direktori dist ke dalam direktori statik aplikasi Go:

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

Dalam aplikasi Go kami, kami perlu mentakrifkan pengendali http.FileServer yang akan mengembalikan fail statik dalam direktori . Kami juga perlu menentukan templat yang akan memuatkan fail HTML aplikasi Vue.js dan memasukkan fail binaan Vue.js di dalamnya.

Berikut ialah contoh kod untuk menentukan laluan dan templat:

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

Dalam kod di atas, kami telah menentukan laluan / yang akan dibuka dalam pelayar templates/index.html fail dan membentangkannya kepada pengguna. Kami juga mentakrifkan pengendali fail statik yang akan memuatkan fail dari direktori statik kami. Pengendali ini akan mengendalikan semua permintaan bermula dengan /static/.

Dalam templat HTML kami, kami memasukkan fail binaan Vue.js dan menggunakan elemen div#app sebagai elemen akar aplikasi Vue.js.

Berikut ialah contoh fail 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>

Dalam kod di atas, kami menetapkan laluan ke fail binaan Vue.js kepada /static/js/app.js. Anda boleh mengubahnya sendiri mengikut keperluan anda.

Kaedah 2: Menggunakan Penghalaan Vue.js dalam Aplikasi Go

Dalam kaedah ini kami akan menggunakan Vue.js sebagai penghala kami dan membenamkannya ke dalam aplikasi Go kami. Dengan cara ini, kami sebenarnya akan menggunakan aplikasi Go sebagai hujung belakang untuk Vue.js dan Vue.js akan bertanggungjawab untuk mengendalikan permintaan penghalaan pengguna.

Pertama, kita perlu memastikan bahawa aplikasi Vue.js telah dikompilasi kita boleh melengkapkan kompilasi menggunakan arahan berikut:

npm run build

Melaksanakan arahan ini akan mencipta direktori bernama dist, di mana Mengandungi aplikasi Vue.js kami yang dibungkus. Sekarang, kami perlu mengalihkan direktori ini ke dalam direktori statik aplikasi Go kami. Direktori statik boleh menjadi mana-mana direktori yang kami mahu, dan ia akan menyimpan fail sumber statik dalam aplikasi. Dalam artikel ini, kami menggunakan static sebagai direktori statik, anda boleh mengubah suainya sendiri.

Salin direktori dist ke dalam direktori statik aplikasi Go anda:

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

Dalam aplikasi Go kami, kami perlu menentukan pengendali laluan yang akan mengembalikan fail HTML Vue.js untuk aplikasi dan minta aplikasi Vue.js memanggil API yang disediakan oleh bahagian belakang Go kami.

Berikut ialah kod contoh untuk menentukan laluan dan 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应用程序。

Atas ialah kandungan terperinci Bagaimana untuk memaparkan vue dalam golang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!