Rumah > Artikel > pembangunan bahagian belakang > Menggunakan RevelJ untuk pembangunan bahagian hadapan dalam Beego
Menggunakan RevelJ untuk pembangunan bahagian hadapan dalam Beego
- 王林asal
- 2023-06-22 09:20:03981semak imbas
Dalam beberapa tahun kebelakangan ini, model pembangunan pemisahan bahagian hadapan dan belakang semakin menjadi arus perdana. Dalam mod ini, bahagian belakang bertanggungjawab untuk menyediakan antara muka, dan bahagian hadapan membangunkan antara muka berdasarkan antara muka. Dalam pembangunan rangka kerja Beego, kami juga boleh menggunakan RevelJ untuk pembangunan bahagian hadapan, yang memudahkan kami membangunkan pemisahan bahagian hadapan dan belakang.
RevelJ ialah perpustakaan komponen UI berdasarkan React dan AntDesign. Ia membolehkan kami membangunkan antara muka yang cantik dan boleh diguna semula dengan lebih cepat. Seterusnya, kami akan memperkenalkan cara menggunakan RevelJ untuk pembangunan bahagian hadapan dalam Beego.
- Pasang RevelJ
Mula-mula, kita perlu memasang RevelJ. Kami boleh memasangnya melalui npm:
npm install --save antd react react-dom
Selepas pemasangan selesai, kami boleh memperkenalkan komponen RevelJ ke dalam kod kami.
- Mulakan pembangunan
Seterusnya, kita perlu menentukan templat bahagian hadapan. Kami boleh mencipta fail html baharu dalam folder pandangan Beego, dan kemudian tulis kod kami:
<!DOCTYPE html>
<html>
<head>
<title>Beego+RevelJ</title>
</head>
<body>
<div id="root"></div>
<script src="static/js/app.js"></script>
</body>
</html>Di sini kami mentakrifkan div dengan id akar dan memperkenalkan fail bernama fail skrip app.js.
Seterusnya, kami mencipta fail app.js dalam folder static/js Beego:
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'antd';
ReactDOM.render(
<div>
<Button type="primary">Beego+RevelJ</Button>
</div>,
document.getElementById('root')
);Di sini kami memperkenalkan React dan ReactDOM, serta memperkenalkan komponen Butang daripada RevelJ . Kemudian kami memberikan div dalam ReactDOM.render, yang mengandungi komponen Butang. Akhirnya, kami menjadikan div ini ke dalam div dengan id akar.
- Jalankan program
Sebelum menjalankan program kami, kami perlu mengubah suai penghalaan Beego. Kita boleh menambah laluan yang sepadan dalam fail routers.go:
beego.Router("/", &controllers.MainController{})Di sini kita memadankan laluan akar kepada pengawal MainController. Kemudian, kita boleh mencipta fail MainController.go dalam folder pengawal:
package controllers
import (
"github.com/astaxie/beego"
)
type MainController struct {
beego.Controller
}
func (c *MainController) Get() {
c.TplName = "index.tpl"
}Di sini kita mentakrifkan pengawal bernama MainController dan melaksanakan kaedah Dapatkan. Dalam kaedah Dapatkan, kami menetapkan nama templat kepada index.tpl, yang bermaksud bahawa kami akan menggunakan templat html yang ditakrifkan sebelum ini.
Akhir sekali, kita boleh menggunakan arahan beego run untuk memulakan program kita. Apabila kami melawati http://localhost:8080, kami akan melihat antara muka dengan butang "Beego+RevelJ".
Pada ketika ini, kami telah berjaya menggunakan RevelJ untuk pembangunan bahagian hadapan. Dalam pembangunan sebenar, kami juga boleh menggunakan lebih banyak komponen RevelJ dan menulis sendiri kod bahagian hadapan yang lebih kompleks. Dengan cara ini, kami boleh membangunkan pemisahan bahagian hadapan dan belakang dengan lebih mudah serta meningkatkan kebolehselenggaraan dan kebolehgunaan semula kod.
Atas ialah kandungan terperinci Menggunakan RevelJ untuk pembangunan bahagian hadapan dalam Beego. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!