Beego でのフロントエンド開発に RevelJ を使用する-Golang-php.cn

Beego でのフロントエンド開発に RevelJ を使用する

王林

リリース： 2023-06-22 09:20:03

オリジナル

1008 人が閲覧しました

近年、フロントエンドとバックエンドを分離した開発モデルがますます主流になってきています。このモードでは、バックエンドがインターフェイスを提供する責任を負い、フロントエンドがインターフェイスに基づいてインターフェイスを開発します。 Beegoフレームワークの開発では、フロントエンド開発にもRevelJを利用できるため、フロントエンドとバックエンドの分離開発が容易になります。

RevelJ は、React と AntDesign に基づく UI コンポーネントライブラリです。これにより、美しく再利用可能なインターフェイスをより迅速に開発できるようになります。次に、Beego でのフロントエンド開発に RevelJ を使用する方法を紹介します。

RevelJ のインストール

まず、RevelJ をインストールする必要があります。 npm を通じてインストールできます:

npm install --save antd react react-dom

ログイン後にコピー

インストールが完了したら、RevelJ コンポーネントをコードに導入できます。

開発の開始

次に、フロントエンドテンプレートを定義する必要があります。 Beego のビューフォルダーに新しい 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 コンポーネントを紹介します。次に、ボタンコンポーネントを含む 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 中国語 Web サイトの他の関連記事を参照してください。