Beego で Angular を使用したフロントエンド開発

Beego は Go 言語をベースとした MVC フレームワークであり、高いパフォーマンスと高い同時実行性などの優れた機能を備えています。 Angular は、強力なデータ バインディング、モジュール化、コンポーネント化、その他の機能を提供する人気のフロントエンド開発フレームワークで、開発者がユーザー インターフェイスを迅速に構築し、ユーザー エクスペリエンスを向上させるのに役立ちます。 Beego でのフロントエンド開発に Angular を使用すると、フロントエンドとバックエンドの分離がより効率的に実現され、作業効率が向上します。この記事では、Beego でフロントエンド開発に Angular を使用する方法を以下の観点から紹介します。

1. Angular CLI のインストール

まず、Angular CLI をインストールする必要があります。これは Angular の公式コマンド ライン ツールであり、プロジェクト、コンポーネント、サービスなどAngular CLI をインストールするには、npm を使用する必要があります。Angular CLI は、次のコマンドでインストールできます。

npm install -g @angular/cli

インストールが完了したら、ng コマンドを使用して新しい Angular プロジェクトを作成できます。

2. Angular プロジェクトの作成

Beego プロジェクト内にフロントエンド プロジェクトのルート ディレクトリとしてフォルダーを作成し、ng コマンドを使用して新しい Angular プロジェクトを作成しますそのディレクトリ内にあります。具体的なコマンドは次のとおりです。

ng new frontend

このコマンドは、現在のディレクトリに「frontend」という名前の Angular プロジェクトを作成します。プロジェクトのディレクトリ構造は次のとおりです。

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

このうち、src ディレクトリにはプロジェクトのソース コードが含まれ、app ディレクトリはコンポーネント、サービス、その他自分で作成したコードを格納するために使用されます。

3. フロントエンド開発環境の構成

開発を開始する前に、フロントエンド開発環境も構成する必要があります。まず、angular.json ファイルの OutputPath 構成を変更し、出力ディレクトリを Beego プロジェクトのパブリック フォルダー static の下のフォルダーに設定する必要があります。具体的な方法は次のとおりです。

"outputPath": "../static",

この方法では、コンパイルされたフロントエンド コードを、後で使用するために Beego プロジェクトの静的フォルダーに直接出力できます。

フロントエンドが Beego バックエンド API をリクエストできるようにクロスドメインを構成する必要もあります。 CORS ミドルウェアを Beego のルーティングにセットアップして、フロントエンド URL からのクロスドメイン リクエストを許可できます。具体的な方法は次のとおりです。

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

ここでは、ローカル アドレス http://localhost:4200 からのクロスドメイン リクエストを許可する例を示します。これは、実際の状況に応じて変更できます。

4. フロントエンド コードの記述

上記の作業が完了したら、フロントエンド コードの記述を開始できます。 src/app ディレクトリに独自のコンポーネントを作成できます。たとえば、ユーザー リストを表示する「users」という名前のコンポーネントを作成できます。具体的な方法は次のとおりです。

ng generate component users

このコマンドは、HTML テンプレート ファイル、CSS スタイル ファイル、TypeScript スクリプト ファイルなどを含む「users」という名前のコンポーネントを src/app ディレクトリに生成します。

HTML テンプレート ファイルでは、ユーザー リストを表示するための HTML コードを記述することができます。たとえば、Angular の *ngFor ディレクティブを使用してすべてのユーザーを走査できます:

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

TypeScript スクリプト ファイル内、ユーザーリストデータをロードするコードを書くことができます。 Angular の HttpClient モジュールを使用して、バックエンド API にリクエストを送信し、データを取得できます。例:

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

このコードは、Beego バックエンド API の "/api/users" インターフェイスに GET リクエストを送信します。コンポーネントが初期化され、ユーザーリストのデータを取得し、コンポーネントの「users」属性にデータを保存します。

5. フロントエンド コードを実行する

フロントエンド コードを作成した後、ng コマンドを使用してフロントエンド コードをコンパイルし、開発サーバーを起動できます。デバッグ用。具体的なコマンドは次のとおりです。

ng build --watch

このコマンドは、コンパイルされたフロントエンド コードを「frontend/dist」ディレクトリに生成し、ソース コードの変更を監視し、自動的に再コンパイルします。 Beego プロジェクトのルート ディレクトリで開発サーバーを起動し、バックエンド API を有効にして、ブラウザで http://localhost:4200 にアクセスしてフロントエンド ページにアクセスします。

6. 結論

この記事では、Angular CLI のインストール、Angular プロジェクトの作成、フロントエンド開発環境の構成など、Beego でのフロントエンド開発に Angular を使用する方法を紹介します。 、フロントエンド コードの作成、およびフロントエンド コードの実行などの手順。 Angular は、ユーザー インターフェイスを迅速に構築し、ユーザー エクスペリエンスを向上させるのに役立つ強力なフロントエンド開発フレームワークです。 Beego でのフロントエンド開発に Angular を使用すると、フロントエンドとバックエンドの分離がより効率的に実現され、作業効率が向上します。

以上がBeego で Angular を使用したフロントエンド開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。