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 のビュー フォルダーに新しい 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 サイトの他の関連記事を参照してください。