Pembelajaran Golang pembangunan aplikasi Web berdasarkan Vue.js

Golang ialah bahasa pengaturcaraan sumber terbuka yang dibangunkan oleh Google Ia dilahirkan tidak lama dahulu, tetapi ia sangat dicari oleh pembangun kerana prestasi serentak yang cekap, prestasi cemerlang dan pengalaman pembangunan yang baik. Pada masa yang sama, Vue.js ialah salah satu rangka kerja JavaScript yang paling popular pada masa ini dan digunakan secara meluas dalam pembangunan aplikasi web. Artikel ini akan meneroka cara membangunkan aplikasi berasaskan web menggunakan Golang dan Vue.js.

1. Persediaan persekitaran

Mula-mula, anda perlu memasang persekitaran yang diperlukan untuk Golang dan Vue.js berjalan:

Untuk Golang, anda perlu memasang persekitaran pembangunan Golang dan menambahkannya pada laluan sistem. Pakej pemasangan boleh dimuat turun dari [laman web rasmi](https://golang.org/dl/) dan dipasang mengikut gesaan.

Untuk Vue.js, anda perlu memasang npm, pengurus pakej node.js secara global dan memasang Vue.js melalui npm. Maklumat berkaitan boleh diperolehi di [laman web rasmi](https://vuejs.org).

2. Buat projek baharu

Buat projek Golang dan Vue.js baharu:

mkdir myproject
cd myproject

Buat fail go.mod baharu menggunakan Golang:

module projectname

go 1.16

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

Dalam contoh ini, kami menggunakan rangka kerja Gin, anda juga boleh gunakan rangka kerja lain yang anda biasa gunakan.

Seterusnya, gunakan npm untuk mencipta aplikasi Vue.js baharu:

npm init @vue/cli

Arahan ini akan menggesa kami memilih konfigurasi yang diperlukan dan memasukkan pilihan. Selepas konfigurasi selesai, kami akan melakukan beberapa permulaan projek:

cd frontend
npm install
npm run build

Ambil perhatian bahawa arahan ini perlu dijalankan di bawah direktori bahagian hadapan projek Vue.js.

3. Tulis kod hujung belakang

Seterusnya, kita perlu menulis kod hujung belakang. Dalam contoh ini, kami menggunakan rangka kerja Gin untuk menulis aplikasi web yang paling mudah dan menyediakan fail HTML yang dihasilkan oleh aplikasi Vue.js kepada penyemak imbas untuk pemaparan.

Dalam main.go, kami memperkenalkan pakej rangka kerja gin dan mencipta contoh Gin:

package main

import (
    "net/http"

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

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

Kami menggunakan fungsi Lalai Gin untuk mencipta tika penghala lalai. Sekarang kami menyambungkan penghala ke fail HTML yang dijana Vue.js:

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

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

Kod ini memautkan semua permintaan ke direktori akar "/" ke fail HTML yang dijana Vue.js. Akhirnya, kami menjalankan aplikasi web ini:

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

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

    router.Run(":8080")
}

Menggunakan baris kod ini, kami boleh memulakan perkhidmatan pada port 8080 tempatan.

4. Tulis kod bahagian hadapan

Selepas melengkapkan penulisan kod bahagian belakang, kita perlu menulis kod bahagian hadapan dalam Vue.js.

Pertama, dalam fail App.vue aplikasi Vue.js, kami perlu memperkenalkan API bahagian belakang:

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

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

Baris kod ini akan mengakses laluan /data yang kami tulis di bahagian belakang dan akan mendapat respons dalam format JSON, Isikan tatasusunan data. Seterusnya, kita perlu menggunakan sintaks templat Vue.js untuk mengekstrak data ini dan menjadikannya:

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

Kod ini menggunakan arahan v-untuk Vue.js untuk melintasi tatasusunan data dan memaparkan item senarai. Akhir sekali, kita perlu menambah penghala pada fail masukan main.js aplikasi Vue.js, menunjuk ke laluan /data, dan mulakan aplikasi Vue.js:

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

import router from "./router";

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

Kami menggunakan laluan yang disediakan secara rasmi oleh Vue.js dalam contoh ini Untuk menguruskan pemalam, kandungan fail router.js adalah seperti berikut:

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;

Dalam kod ini, kami mentakrifkan penghala asas untuk menavigasi laluan akar ke komponen Home.vue.

5. Jalankan

Kini, kami telah melengkapkan semua kod untuk membangunkan aplikasi web dengan Golang dan Vue.js. Anda perlu menggunakan arahan berikut untuk memulakan aplikasi:

go run main.go

Buka pelayar dan masukkan "http://localhost:8080" untuk mengakses aplikasi web kami.

6. Kesimpulan

Dalam artikel ini, kami telah menunjukkan cara membangunkan aplikasi berasaskan web menggunakan Golang dan Vue.js. Dengan menggabungkan kelebihan kedua-dua rangka kerja ini, kami boleh membangunkan aplikasi web yang lebih cekap dan lebih pantas untuk memenuhi keperluan pembangunan keperluan yang berbeza. Saya harap artikel ini dapat membantu pembangun dan menginspirasikan lebih banyak kreativiti dan pemikiran inovatif.

Atas ialah kandungan terperinci Pembelajaran Golang pembangunan aplikasi Web berdasarkan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!