Beego의 프런트엔드 개발에 RevelJ 사용
- 王林원래의
- 2023-06-22 09:20:03981검색
최근에는 프론트엔드와 백엔드 분리 개발 모델이 점점 더 주류가 되었습니다. 이 모드에서는 백엔드가 인터페이스 제공을 담당하고, 프런트엔드는 인터페이스를 기반으로 인터페이스를 개발합니다. Beego 프레임워크 개발 시 프런트엔드 개발에 RevelJ를 사용할 수도 있으므로 프런트엔드와 백엔드 분리 개발이 더 쉬워집니다.
RevelJ는 React와 AntDesign을 기반으로 한 UI 구성 요소 라이브러리입니다. 이를 통해 우리는 아름답고 재사용 가능한 인터페이스를 더 빠르게 개발할 수 있습니다. 다음으로 Beego에서 RevelJ를 프론트엔드 개발에 활용하는 방법을 소개하겠습니다.
- RevelJ 설치
먼저 RevelJ를 설치해야 합니다. npm을 통해 설치할 수 있습니다:
npm install --save antd react react-dom
설치가 완료된 후 RevelJ 구성 요소를 코드에 도입할 수 있습니다.
- 개발 시작
다음으로 프런트엔드 템플릿을 정의해야 합니다. Beego의 views 폴더에 새 html 파일을 만든 다음 코드를 작성할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Beego+RevelJ</title>
</head>
<body>
<div id="root"></div>
<script src="static/js/app.js"></script>
</body>
</html>여기서 루트 ID로 div를 정의하고 app.js라는 스크립트 파일을 도입합니다.
다음으로 Beego의 static/js 폴더에 app.js 파일을 만듭니다.
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')
);여기에서는 React와 ReactDOM을 소개하고 RevelJ의 Button 구성 요소를 소개합니다. 그런 다음 Button 구성 요소가 포함된 ReactDOM.render에서 div를 렌더링합니다. 마지막으로 이 div를 ID가 root인 div로 렌더링합니다.
- 프로그램 실행
프로그램을 실행하기 전에 Beego의 라우팅을 수정해야 합니다. routers.go 파일에 일치하는 경로를 추가할 수 있습니다.
beego.Router("/", &controllers.MainController{})여기서 루트 경로를 MainController 컨트롤러와 일치시킵니다. 그런 다음 컨트롤러 폴더에 MainController.go 파일을 만들 수 있습니다.
package controllers
import (
"github.com/astaxie/beego"
)
type MainController struct {
beego.Controller
}
func (c *MainController) Get() {
c.TplName = "index.tpl"
}여기서 MainController라는 컨트롤러를 정의하고 Get 메서드를 실행합니다. Get 메서드에서 템플릿 이름을 index.tpl로 설정합니다. 이는 이전에 정의된 html 템플릿을 사용한다는 의미입니다.
마지막으로 beego run 명령을 사용하여 프로그램을 시작할 수 있습니다. http://localhost:8080을 방문하면 "Beego+RevelJ" 버튼이 있는 인터페이스를 볼 수 있습니다.
이 시점에서 우리는 프런트엔드 개발에 RevelJ를 성공적으로 사용했습니다. 실제 개발에서는 더 많은 RevelJ 구성 요소를 사용하고 더 복잡한 프런트 엔드 코드를 직접 작성할 수도 있습니다. 이런 방식으로 우리는 별도의 프런트엔드와 백엔드를 보다 쉽게 개발할 수 있으며 코드의 유지 관리성과 재사용성을 향상시킬 수 있습니다.
위 내용은 Beego의 프런트엔드 개발에 RevelJ 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!