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:111538semak 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!