Using RevelJ for front-end development in Beego-Golang-php.cn

Using RevelJ for front-end development in Beego

王林

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

Original

1007 people have browsed it

In recent years, the development model of front-end and back-end separation has become more and more mainstream. In this mode, the backend is responsible for providing the interface, and the frontend develops the interface based on the interface. In the development of the Beego framework, we can also use RevelJ for front-end development, which makes it easier for us to develop front-end and back-end separation.

RevelJ is a UI component library based on React and AntDesign. It allows us to develop beautiful, reusable interfaces more quickly. Next, we will introduce how to use RevelJ for front-end development in Beego.

Installing RevelJ

First, we need to install RevelJ. We can install it through npm:

npm install --save antd react react-dom

Copy after login

After the installation is completed, we can introduce RevelJ components into our code.

Start development

Next, we need to define the front-end template. We can create a new html file in Beego's views folder, and then write our code:

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

Copy after login

Here we define a div with the id of root and introduce a file named app.js script file.

Next, we create an app.js file in Beego’s static/js folder:

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')
);

Copy after login

Here we introduce React and ReactDOM, and introduce a Button component from RevelJ . Then we render a div in ReactDOM.render, which contains a Button component. Finally, we render this div into the div with the id root.

Run the program

Before running our program, we need to modify Beego's routing. We can add a matching route in the routers.go file:

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

Copy after login

Here we match the root route to the MainController controller. Then, we can create a MainController.go file in the controllers folder:

package controllers

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

type MainController struct {
    beego.Controller
}

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

Copy after login

Here we define a controller named MainController and execute a Get method. In the Get method, we set the template name to index.tpl, which means we will use the previously defined html template.

Finally, we can use the beego run command to start our program. When we visit http://localhost:8080, we will see an interface with a "Beego RevelJ" button.

At this point, we have successfully used RevelJ for front-end development. In actual development, we can also use more RevelJ components and write more complex front-end code ourselves. In this way, we can more easily develop front-end and back-end separation and improve the maintainability and reusability of the code.

The above is the detailed content of Using RevelJ for front-end development in Beego. For more information, please follow other related articles on the PHP Chinese website!