Maison > Article > développement back-end > Utiliser RevelJ pour le développement front-end dans Beego

Utiliser RevelJ pour le développement front-end dans Beego

王林original: 2023-06-22 09:20:031010parcourir

Ces dernières années, le modèle de développement de séparation front-end et back-end est devenu de plus en plus courant. Dans ce mode, le backend est chargé de fournir l'interface et le frontend développe l'interface en fonction de l'interface. Dans le développement du framework Beego, nous pouvons également utiliser RevelJ pour le développement front-end, ce qui nous facilite le développement de la séparation front-end et back-end.

RevelJ est une bibliothèque de composants d'interface utilisateur basée sur React et AntDesign. Cela nous permet de développer plus rapidement de belles interfaces réutilisables. Ensuite, nous présenterons comment utiliser RevelJ pour le développement front-end dans Beego.

Installer RevelJ

Tout d'abord, nous devons installer RevelJ. Nous pouvons l'installer via npm :

npm install --save antd react react-dom

Une fois l'installation terminée, nous pouvons introduire les composants RevelJ dans notre code.

Démarrer le développement

Ensuite, nous devons définir le modèle front-end. Nous pouvons créer un nouveau fichier html dans le dossier vues de Beego, puis écrire notre code :

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

Ici, nous définissons un div avec l'identifiant de root et introduisons un fichier de script nommé app.js.

Ensuite, nous créons un fichier app.js dans le dossier static/js de 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')
);

Ici, nous introduisons React et ReactDOM, et introduisons un composant Button de RevelJ. Ensuite, nous rendons un div dans ReactDOM.render, qui contient un composant Button. Enfin, nous rendons ce div dans le div avec l'identifiant root.

Exécuter le programme

Avant d'exécuter notre programme, nous devons modifier le routage de Beego. Nous pouvons ajouter une route correspondante dans le fichier routers.go :

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

Ici, nous faisons correspondre la route racine au contrôleur MainController. Ensuite, nous pouvons créer un fichier MainController.go dans le dossier des contrôleurs :

package controllers

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

type MainController struct {
    beego.Controller
}

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

Ici, nous définissons un contrôleur nommé MainController et exécutons une méthode Get. Dans la méthode Get, nous définissons le nom du modèle sur index.tpl, ce qui signifie que nous utiliserons le modèle HTML précédemment défini.

Enfin, nous pouvons utiliser la commande beego run pour démarrer notre programme. Lorsque nous visiterons http://localhost:8080, nous verrons une interface avec un bouton "Beego+RevelJ".

À ce stade, nous avons utilisé avec succès RevelJ pour le développement front-end. Dans le développement réel, nous pouvons également utiliser davantage de composants RevelJ et écrire nous-mêmes du code frontal plus complexe. De cette façon, nous pouvons développer plus facilement la séparation front-end et back-end et améliorer la maintenabilité et la réutilisabilité du code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utilisez Google Analytics pour compter les données du site Web dans BeegoArticle suivant：Utilisez Google Analytics pour compter les données du site Web dans Beego

Articles Liés

Voir plus