Beego의 프런트엔드 개발에 RevelJ 사용-Golang-php.cn

Beego의 프런트엔드 개발에 RevelJ 사용

王林

풀어 주다： 2023-06-22 09:20:03

원래의

1009명이 탐색했습니다.

최근에는 프론트엔드와 백엔드 분리 개발 모델이 점점 더 주류가 되었습니다. 이 모드에서는 백엔드가 인터페이스 제공을 담당하고, 프런트엔드는 인터페이스를 기반으로 인터페이스를 개발합니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!