Frontend-Entwicklung mit Angular in Beego

Beego ist ein MVC-Framework, das auf der Go-Sprache basiert und hervorragende Funktionen wie hohe Leistung und hohe Parallelität bietet. Angular ist ein beliebtes Front-End-Entwicklungsframework, das leistungsstarke Datenbindung, Modularisierung, Komponentisierung und andere Funktionen bietet, um Entwicklern dabei zu helfen, schnell Benutzeroberflächen zu erstellen und die Benutzererfahrung zu verbessern. Durch die Verwendung von Angular für die Front-End-Entwicklung in Beego kann eine effizientere Front-End- und Back-End-Trennung erreicht und die Arbeitseffizienz verbessert werden. In diesem Artikel wird unter folgenden Aspekten erläutert, wie Angular für die Front-End-Entwicklung in Beego verwendet wird.

1. Angular CLI installieren

Zuerst müssen Sie Angular CLI installieren, das offizielle Befehlszeilentool von Angular, das uns dabei helfen kann, schnell Code für Projekte, Komponenten, Dienste usw. zu generieren. Sie müssen npm verwenden, um Angular CLI zu installieren, das über den folgenden Befehl installiert werden kann:

npm install -g @angular/cli

Nach Abschluss der Installation können Sie über den Befehl ng ein neues Angular-Projekt erstellen.

2. Angular-Projekt erstellen

Erstellen Sie einen Ordner im Beego-Projekt als Stammverzeichnis des Front-End-Projekts und verwenden Sie den Befehl ng, um in diesem Verzeichnis ein neues Angular-Projekt zu erstellen. Der spezifische Befehl lautet wie folgt:

ng new frontend

Dieser Befehl erstellt ein Angular-Projekt mit dem Namen „frontend“ im aktuellen Verzeichnis. Die Verzeichnisstruktur des Projekts ist wie folgt:

frontend/
  dist/
  e2e/
  node_modules/
  src/
    app/
    assets/
    environments/
    favicon.ico
    index.html
    main.ts
    styles.css
    test.ts
  .angular.json
  .editorconfig
  .gitignore
  .browserslistrc
  karma.conf.js
  package.json
  README.md
  tsconfig.app.json
  tsconfig.json
  tsconfig.spec.json
  tslint.json

Darunter enthält das src-Verzeichnis den Quellcode unseres Projekts, und das App-Verzeichnis dient zum Speichern von Komponenten, Diensten und anderen von uns geschriebenen Codes.

3. Konfigurieren Sie die Front-End-Entwicklungsumgebung

Bevor wir mit der Entwicklung beginnen, müssen wir auch die Front-End-Entwicklungsumgebung konfigurieren. Zuerst müssen Sie die OutputPath-Konfiguration in der Datei angle.json ändern und das Ausgabeverzeichnis auf den Ordner unter dem öffentlichen Ordner static im Beego-Projekt festlegen. Die spezifische Methode lautet wie folgt:

"outputPath": "../static",

Auf diese Weise kann der kompilierte Front-End-Code zur späteren Verwendung direkt in den statischen Ordner des Beego-Projekts ausgegeben werden.

Auch die domänenübergreifende Konfiguration muss konfiguriert werden, damit das Frontend die Beego-Backend-API anfordern kann. CORS-Middleware kann im Routing von Beego eingerichtet werden, um domänenübergreifende Anfragen von der Front-End-URL zu ermöglichen. Die spezifische Methode lautet wie folgt:

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

func init() {
    beego.InsertFilter("*", beego.BeforeRouter, cors.Allow(&cors.Options{
        AllowOrigins: []string{"http://localhost:4200"},
        AllowMethods: []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
        AllowHeaders: []string{"Origin", "Content-Type", "Authorization"},
        ExposeHeaders: []string{"Content-Length", "Access-Control-Allow-Origin"},
        AllowCredentials: true,
    }))
}

Hier nehmen wir als Beispiel das Zulassen domänenübergreifender Anforderungen von der lokalen Adresse http://localhost:4200, das entsprechend der tatsächlichen Situation geändert werden kann.

4. Schreiben des Front-End-Codes

Nach Abschluss der oben genannten Arbeiten können Sie mit dem Schreiben des Front-End-Codes beginnen. Sie können Ihre eigene Komponente im Verzeichnis src/app erstellen. Sie können beispielsweise eine Komponente mit dem Namen „users“ erstellen, um die Benutzerliste anzuzeigen. Die spezifische Methode lautet wie folgt:

ng generate component users

Dieser Befehl generiert eine Komponente mit dem Namen „users“ im Verzeichnis src/app, einschließlich einer HTML-Vorlagendatei, einer CSS-Stildatei, einer TypeScript-Skriptdatei usw.

In der HTML-Vorlagendatei können Sie den HTML-Code für die Anzeige der Benutzerliste schreiben. Sie können beispielsweise die *ngFor-Direktive von Angular verwenden, um alle Benutzer zu durchlaufen:

<ul>
    <li *ngFor="let user of users">
        {{ user.name }}
    </li>
</ul>

In der TypeScript-Skriptdatei können Sie den Code schreiben zum Laden der Benutzerlistendaten. Sie können das HttpClient-Modul von Angular verwenden, um Anfragen an die Backend-API zu senden und Daten abzurufen, zum Beispiel:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  users: any[];

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get('/api/users').subscribe(
      (data: any[]) => {
        this.users = data;
      }
    );
  }
}

Dieser Code sendet eine GET-Anfrage an die Schnittstelle „/api/users“ in der Beego-Backend-API, wenn die Komponente initialisiert wird Rufen Sie die Benutzerlistendaten ab und speichern Sie die Daten in der Eigenschaft „users“ in der Komponente.

5. Führen Sie den Front-End-Code aus

Nachdem Sie den Front-End-Code geschrieben haben, können Sie den Befehl ng verwenden, um den Front-End-Code zu kompilieren und den Entwicklungsserver zum Debuggen zu starten. Der spezifische Befehl lautet wie folgt:

ng build --watch

Dieser Befehl generiert kompilierten Front-End-Code im Verzeichnis „frontend/dist“, überwacht Änderungen im Quellcode und führt eine automatische Neukompilierung durch. Sie können den Entwicklungsserver im Stammverzeichnis des Beego-Projekts starten, die Back-End-API aktivieren und im Browser auf http://localhost:4200 zugreifen, um auf die Front-End-Seite zuzugreifen.

6. Fazit

In diesem Artikel wird die Verwendung von Angular für die Front-End-Entwicklung in Beego vorgestellt, einschließlich Schritten wie der Installation der Angular-CLI, der Erstellung von Angular-Projekten, der Konfiguration der Front-End-Entwicklungsumgebung, dem Schreiben von Front-End-Code und der Ausführung Front-End-Code. Angular ist ein leistungsstarkes Front-End-Entwicklungsframework, das uns dabei helfen kann, schnell Benutzeroberflächen zu erstellen und die Benutzererfahrung zu verbessern. Durch die Verwendung von Angular für die Front-End-Entwicklung in Beego kann eine effizientere Front-End- und Back-End-Trennung erreicht und die Arbeitseffizienz verbessert werden.

Das obige ist der detaillierte Inhalt vonFrontend-Entwicklung mit Angular in Beego. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!