Beego에서 Angular를 사용한 프런트엔드 개발

Beego는 Go 언어 기반의 MVC 프레임워크로, 고성능, 높은 동시성 등 뛰어난 기능을 갖추고 있습니다. Angular는 개발자가 신속하게 사용자 인터페이스를 구축하고 사용자 경험을 향상시키는 데 도움이 되는 강력한 데이터 바인딩, 모듈화, 구성 요소화 및 기타 기능을 제공하는 인기 있는 프런트 엔드 개발 프레임워크입니다. Beego의 프런트엔드 개발에 Angular를 사용하면 프런트엔드와 백엔드 분리를 보다 효율적으로 달성하고 작업 효율성을 향상시킬 수 있습니다. 이 글에서는 Beego의 프론트엔드 개발에 Angular를 활용하는 방법을 다음과 같은 측면에서 소개하겠습니다.

1. Angular CLI 설치

먼저 프로젝트, 구성 요소, 서비스 등에 대한 코드를 빠르게 생성하는 데 도움이 되는 Angular의 공식 명령줄 도구인 Angular CLI를 설치해야 합니다. Angular CLI를 설치하려면 npm을 사용해야 하며, 다음 명령을 통해 설치할 수 있습니다.

npm install -g @angular/cli

설치가 완료된 후 ng 명령을 통해 새 Angular 프로젝트를 생성할 수 있습니다.

2. Create 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. 프런트엔드 개발 환경 구성

개발을 시작하기 전에 프런트엔드 개발 환경도 구성해야 합니다. 먼저, angle.json 파일에서 outputPath 구성을 수정하고 출력 디렉터리를 Beego 프로젝트의 static public 폴더 아래에 있는 폴더로 설정해야 합니다. 구체적인 방법은 다음과 같습니다.

"outputPath": "../static",

이렇게 하면 컴파일된 프런트엔드 코드를 Beego 프로젝트의 정적 폴더에 직접 출력하여 나중에 사용할 수 있습니다.

프런트 엔드에서 Beego 백엔드 API를 요청할 수 있도록 교차 도메인 구성도 구성해야 합니다. CORS 미들웨어는 프런트 엔드 URL의 도메인 간 요청을 허용하도록 Beego의 라우팅에 설정할 수 있습니다. 구체적인 방법은 다음과 같습니다.

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

이 명령은 src/app 디렉토리에 HTML 템플릿 파일, CSS 스타일 파일, TypeScript 스크립트 파일 등을 포함하여 "users"라는 구성 요소를 생성합니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!