Beego で Angular を使用したフロントエンド開発-Golang-php.cn

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

WBOY

リリース： 2023-06-23 11:30:07

オリジナル

824 人が閲覧しました

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

Angular CLI のインストール

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

npm install -g @angular/cli

ログイン後にコピー

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

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 ディレクトリはコンポーネント、サービス、その他自分で作成したコードを格納するために使用されます。

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

開発を開始する前に、フロントエンド開発環境も構成する必要があります。まず、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 からのクロスドメインリクエストを許可する例を示します。これは、実際の状況に応じて変更できます。

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

上記の作業が完了したら、フロントエンドコードの記述を開始できます。 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」属性にデータを保存します。

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

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

ng build --watch

ログイン後にコピー

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

結論

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

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