Développement front-end avec Angular dans Beego

Beego est un framework MVC basé sur le langage Go, avec d'excellentes fonctionnalités telles que des performances élevées et une simultanéité élevée. Angular est un framework de développement frontal populaire qui fournit de puissantes liaisons de données, modularisation, composantisation et d'autres fonctionnalités pour aider les développeurs à créer rapidement des interfaces utilisateur et à améliorer l'expérience utilisateur. L'utilisation d'Angular pour le développement front-end dans Beego peut réaliser une séparation front-end et back-end plus efficacement et améliorer l'efficacité du travail. Cet article expliquera comment utiliser Angular pour le développement front-end dans Beego sous les aspects suivants.

1. Installer Angular CLI

Vous devez d'abord installer Angular CLI, qui est l'outil de ligne de commande officiel d'Angular qui peut nous aider à générer rapidement du code pour des projets, des composants, des services, etc. Vous devez utiliser npm pour installer Angular CLI, qui peut être installé via la commande suivante :

npm install -g @angular/cli

Une fois l'installation terminée, vous pouvez créer un nouveau projet Angular via la commande ng.

2. Créer un projet angulaire

Créez un dossier dans le projet Beego en tant que répertoire racine du projet frontal et utilisez la commande ng pour créer un nouveau projet angulaire dans ce répertoire. La commande spécifique est la suivante :

ng new frontend

Cette commande créera un projet Angular nommé "frontend" dans le répertoire courant. La structure des répertoires du projet est la suivante :

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

Parmi eux, le répertoire src contient le code source de notre projet, et le répertoire app est utilisé pour stocker les composants, services et autres codes écrits par nous-mêmes.

3. Configurer l'environnement de développement front-end

Avant de commencer le développement, nous devons également configurer l'environnement de développement front-end. Tout d'abord, vous devez modifier la configuration outputPath dans le fichier angulaire.json et définir le répertoire de sortie sur le dossier sous le dossier public statique dans le projet Beego. La méthode spécifique est la suivante :

"outputPath": "../static",

De cette façon, le code frontal compilé peut être sorti directement dans le dossier statique du projet Beego pour une utilisation ultérieure.

La configuration inter-domaines doit également être configurée pour permettre au front-end de demander l'API backend Beego. Le middleware CORS peut être configuré dans le routage de Beego pour permettre les requêtes inter-domaines à partir de l'URL frontale. La méthode spécifique est la suivante :

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,
    }))
}

Voici un exemple d'autorisation des requêtes inter-domaines à partir de l'adresse locale http://localhost:4200, qui peut être modifiée en fonction de la situation réelle.

4. Écrire le code front-end

Une fois le travail ci-dessus terminé, vous pouvez commencer à écrire le code front-end. Vous pouvez créer votre propre composant dans le répertoire src/app. Par exemple, vous pouvez créer un composant nommé « utilisateurs » pour afficher la liste des utilisateurs. La méthode spécifique est la suivante :

ng generate component users

Cette commande générera un composant nommé "users" dans le répertoire src/app, comprenant un fichier modèle HTML, un fichier de style CSS, un fichier de script TypeScript, etc.

Dans le fichier de modèle HTML, vous pouvez écrire le code HTML pour afficher la liste des utilisateurs. Par exemple, vous pouvez utiliser la directive *ngFor d'Angular pour parcourir tous les utilisateurs :

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

Dans le fichier de script TypeScript, vous pouvez écrire le code. pour charger les données de la liste des utilisateurs. Vous pouvez utiliser le module HttpClient d'Angular pour envoyer des requêtes à l'API backend et obtenir des données, par exemple :

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

Ce code enverra une requête GET à l'interface "/api/users" de l'API backend Beego lorsque le composant est initialisé à obtenez les données de la liste d'utilisateurs et enregistrez les données dans la propriété "users" du composant.

5. Exécutez le code front-end

Après avoir écrit le code front-end, vous pouvez utiliser la commande ng pour compiler le code front-end et démarrer le serveur de développement pour le débogage. La commande spécifique est la suivante :

ng build --watch

Cette commande générera du code frontal compilé dans le répertoire "frontend/dist", surveillera les modifications dans le code source et recompilera automatiquement. Vous pouvez démarrer le serveur de développement dans le répertoire racine du projet Beego, activer l'API back-end et accéder à http://localhost:4200 dans le navigateur pour accéder à la page front-end.

6. Conclusion

Cet article explique comment utiliser Angular pour le développement front-end dans Beego, y compris des étapes telles que l'installation d'Angular CLI, la création de projets Angular, la configuration de l'environnement de développement front-end, l'écriture de code front-end et l'exécution. code frontal. Angular est un puissant framework de développement front-end qui peut nous aider à créer rapidement des interfaces utilisateur et à améliorer l'expérience utilisateur. L'utilisation d'Angular pour le développement front-end dans Beego peut réaliser une séparation front-end et back-end plus efficacement et améliorer l'efficacité du travail.

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!