Verwendung von RevelJ für die Front-End-Entwicklung in Beego-Golang-php.cn

Verwendung von RevelJ für die Front-End-Entwicklung in Beego

王林

Freigeben： 2023-06-22 09:20:03

Original

1007 Leute haben es durchsucht

In den letzten Jahren hat sich das Entwicklungsmodell der Front-End- und Back-End-Trennung immer mehr durchgesetzt. In diesem Modus ist das Backend für die Bereitstellung der Schnittstelle verantwortlich und das Frontend entwickelt die Schnittstelle basierend auf der Schnittstelle. Bei der Entwicklung des Beego-Frameworks können wir RevelJ auch für die Front-End-Entwicklung verwenden, was uns die Entwicklung der Front-End- und Back-End-Trennung erleichtert.

RevelJ ist eine UI-Komponentenbibliothek basierend auf React und AntDesign. Dadurch können wir schneller schöne, wiederverwendbare Schnittstellen entwickeln. Als Nächstes stellen wir vor, wie man RevelJ für die Front-End-Entwicklung in Beego verwendet.

RevelJ installieren

Zuerst müssen wir RevelJ installieren. Wir können es über npm installieren:

npm install --save antd react react-dom

Nach dem Login kopieren

Nachdem die Installation abgeschlossen ist, können wir RevelJ-Komponenten in unseren Code einführen.

Entwicklung starten

Als nächstes müssen wir die Front-End-Vorlage definieren. Wir können eine neue HTML-Datei im View-Ordner von Beego erstellen und dann unseren Code schreiben:

<!DOCTYPE html>
<html>
<head>
    <title>Beego+RevelJ</title>
</head>
<body>
<div id="root"></div>
<script src="static/js/app.js"></script>
</body>
</html>

Nach dem Login kopieren

Hier definieren wir ein div mit der ID root und führen eine Skriptdatei namens app.js ein.

Als nächstes erstellen wir eine app.js-Datei im Ordner static/js von 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')
);

Nach dem Login kopieren

Hier stellen wir React und ReactDOM vor und stellen eine Button-Komponente von RevelJ vor. Dann rendern wir ein Div in ReactDOM.render, das eine Button-Komponente enthält. Schließlich rendern wir dieses Div in das Div mit der ID-Wurzel.

Führen Sie das Programm aus

Bevor wir unser Programm ausführen, müssen wir Beegos Routing ändern. Wir können eine passende Route in der Datei routers.go hinzufügen:

beego.Router("/", &controllers.MainController{})

Nach dem Login kopieren

Hier passen wir die Root-Route an den MainController-Controller an. Dann können wir eine MainController.go-Datei im Controller-Ordner erstellen:

package controllers

import (
    "github.com/astaxie/beego"
)

type MainController struct {
    beego.Controller
}

func (c *MainController) Get() {
    c.TplName = "index.tpl"
}

Nach dem Login kopieren

Hier definieren wir einen Controller namens MainController und führen eine Get-Methode aus. In der Get-Methode setzen wir den Vorlagennamen auf index.tpl, was bedeutet, dass wir die zuvor definierte HTML-Vorlage verwenden.

Schließlich können wir den Befehl beego run verwenden, um unser Programm zu starten. Wenn wir http://localhost:8080 besuchen, sehen wir eine Schnittstelle mit einer Schaltfläche „Beego+RevelJ“.

Zu diesem Zeitpunkt haben wir RevelJ erfolgreich für die Front-End-Entwicklung eingesetzt. In der tatsächlichen Entwicklung können wir auch mehr RevelJ-Komponenten verwenden und selbst komplexeren Front-End-Code schreiben. Auf diese Weise können wir die Front-End- und Back-End-Trennung einfacher entwickeln und die Wartbarkeit und Wiederverwendbarkeit des Codes verbessern.

Das obige ist der detaillierte Inhalt vonVerwendung von RevelJ für die Front-End-Entwicklung in Beego. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!