Rumah > Artikel > pembangunan bahagian belakang > Menggunakan Vue.js untuk pembangunan bahagian hadapan dalam Beego

Menggunakan Vue.js untuk pembangunan bahagian hadapan dalam Beego

WBOYasal: 2023-06-22 14:45:111510semak imbas

Apabila aplikasi web menjadi semakin kompleks, kepentingan teknologi bahagian hadapan menjadi semakin jelas. Sebagai pembangun, kami perlu memilih rangka kerja pembangunan bahagian hadapan yang sesuai untuk membantu kami mencapai pembangunan yang lebih pantas dan cekap. Pada masa ini, Vue.js ialah rangka kerja bahagian hadapan yang sangat popular, yang mempunyai kelebihan fleksibiliti, kemudahan penggunaan dan prestasi tinggi. Di bahagian belakang, Beego ialah rangka kerja web bahasa Go yang pantas, fleksibel dan berskala.

Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue.js untuk pembangunan bahagian hadapan dalam Beego.

Persediaan

Sebelum anda mula menggunakan Vue.js, pastikan Node.js dan NPM (Pengurus Pakej Node.js) telah dipasang. Anda boleh memuat turun dan memasang Node.js daripada tapak web rasmi [https://nodejs.org/en/](https://nodejs.org/en/).

Seterusnya, kami perlu memperkenalkan sumber Vue.js ke dalam projek Beego. Terdapat dua cara untuk mencapai ini:

Perkenalkan sumber CDN Vue.js ke dalam halaman
Perkenalkan sumber Vue.js melalui NPM

Di sini kita Pilih cara kedua. Menggunakan NPM untuk mengurus sumber hadapan membolehkan pengurusan pergantungan yang lebih baik dan memudahkan pembangunan kami.

Pergi ke direktori projek Beego anda dalam terminal dan laksanakan arahan berikut:

npm install vue --save

Ini akan menambah direktori node_modules dan fail package.json pada projek anda, Vue js akan disimpan dalam node_modules. Vue.js boleh digunakan dalam mana-mana fail dalam projek anda.

Mencipta aplikasi Vue.js dalam Beego

Kami perlu mencipta pengendali laluan dalam Beego untuk bertindak balas kepada aplikasi Vue.js. Tambahkan kod berikut pada projek Beego anda:

package controllers

import (
    "github.com/astaxie/beego"
    "fmt"
)

type VueController struct {
    beego.Controller
}

func (c *VueController) Get() {
    c.Data["Website"] = "Vue.js in Beego"
    c.Data["Email"] = "you@example.com"
    c.TplName = "vue.tpl"
}

Di sini kami mencipta jenis VueController, yang berasal daripada jenis beego.Controller. Kaedah Get() akan memberikan kami templat yang bertindak balas kepada aplikasi Vue.js. Kami akan mencipta fail templat vue.tpl di bawah.

Buat aplikasi Vue.js

Buat direktori yang dipanggil views dalam projek Beego anda. Cipta fail vue.tpl dalam direktori ini. Kod berikut akan memberi kami aplikasi Vue.js yang mudah:

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js in Beego</title>
</head>
<body>
    <div id="app">
        <h2>Welcome to {{ message }}!</h2>
    </div>
    <script src="/static/node_modules/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Beego and Vue.js'
            }
        })
    </script>
</body>
</html>

Dalam contoh ini, kami mencipta tika Vue dan mengikatnya pada elemen div. Atribut el menentukan elemen mana aplikasi terikat, manakala atribut data mentakrifkan objek data (mesej).

Nota: Memandangkan kami menggunakan NPM untuk memperkenalkan sumber Vue.js, kami perlu menambah direktori sumber statik. Tambahkan direktori bernama static pada projek Beego anda dan tambahkan kod berikut pada fail konfigurasi app.conf anda:

[static]
dir = static/

Sekarang, jalankan aplikasi Beego anda dan lawati http:// localhost:8080/vue , anda seharusnya melihat "Selamat Datang ke Beego dan Vue.js" dipaparkan pada halaman anda.

Komponen Vue

Komponen Vue.js ialah ciri penting Vue.js, yang membolehkan kami membuat blok kod boleh guna semula.

Buat direktori yang dipanggil components dalam projek Beego anda. Buat komponen Vue bernama hello.vue dalam direktori ini. Berikut ialah contoh mudah komponen Vue:

<template>
    <div>
        <h2>{{ title }}</h2>
        <p>{{ message }}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                message: 'This is a Vue.js component!'
            }
        }
    }
</script>

Seterusnya, menambah kod berikut dalam fail vue.tpl anda akan merujuk komponen Vue anda yang baru dibuat:

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js in Beego</title>
</head>
<body>
    <div id="app">
        <hello></hello>
    </div>
    <script src="/static/node_modules/vue/dist/vue.min.js"></script>
    <script src="/static/components/hello.vue"></script>
    <script>
        import hello from '/static/components/hello.vue'
        var app = new Vue({
            el: '#app',
            components: { hello }
        })
    </script>
</body>
</html>

Dalam contoh ini, kami memperkenalkan komponen Vue anda melalui pernyataan import dan daftarkan komponen dalam atribut komponen bagi tika Vue.

Sekarang akses aplikasi Beego anda dan anda akan melihat komponen anda dipaparkan pada halaman dengan mesej output "Hello" dan "Ini adalah komponen Vue.js!".

Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan Vue.js untuk pembangunan bahagian hadapan dalam Beego. Dengan menggunakan komponen Vue.js, kami boleh melaksanakan blok kod boleh guna semula, dengan itu meningkatkan kebolehselenggaraan dan kebolehskalaan kod. Vue.js menyediakan alatan yang berkuasa dan fleksibel untuk membantu kami membina aplikasi web moden. Gabungan teknologi Beego+Vue.js yang sangat baik ialah pilihan yang sangat kreatif dan sangat produktif.

Atas ialah kandungan terperinci Menggunakan Vue.js untuk pembangunan bahagian hadapan dalam Beego. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

node.js beego json vue.js npm 前端框架 Static Go语言 JS 对象 this http https

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Analisis data menggunakan Pig and Hive dalam BeegoArtikel seterusnya：Analisis data menggunakan Pig and Hive dalam Beego

Artikel berkaitan

Lihat lagi