Pembangunan bahagian hadapan menggunakan Angular dalam Beego

Beego ialah rangka kerja MVC berdasarkan bahasa Go, dengan ciri cemerlang seperti prestasi tinggi dan keselarasan tinggi. Angular ialah rangka kerja pembangunan bahagian hadapan yang popular yang menyediakan pengikatan data, modularisasi, komponenisasi dan ciri lain yang berkuasa untuk membantu pembangun membina antara muka pengguna dengan cepat dan meningkatkan pengalaman pengguna. Menggunakan Angular untuk pembangunan bahagian hadapan dalam Beego boleh mencapai pemisahan bahagian hadapan dan belakang dengan lebih cekap dan meningkatkan kecekapan kerja. Artikel ini akan memperkenalkan cara menggunakan Angular untuk pembangunan bahagian hadapan dalam Beego daripada aspek berikut.

1. Pasang Angular CLI

Mula-mula anda perlu memasang Angular CLI, iaitu alat baris arahan rasmi Angular yang boleh membantu kami menjana kod dengan cepat untuk projek, komponen, perkhidmatan, dsb. Anda perlu menggunakan npm untuk memasang Angular CLI, yang boleh dipasang melalui arahan berikut:

npm install -g @angular/cli

Selepas pemasangan selesai, anda boleh mencipta projek Angular baharu melalui arahan ng.

2. Buat projek Angular

Buat folder dalam projek Beego sebagai direktori akar projek bahagian hadapan dan gunakan arahan ng untuk mencipta projek Angular baharu dalam direktori ini. Perintah khusus adalah seperti berikut:

ng new frontend

Arahan ini akan mencipta projek Angular bernama "frontend" dalam direktori semasa. Struktur direktori projek adalah seperti berikut:

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

Antaranya, direktori src mengandungi kod sumber projek kami, dan direktori aplikasi digunakan untuk menyimpan komponen, perkhidmatan dan kod lain yang ditulis oleh kami sendiri.

3. Mengkonfigurasi persekitaran pembangunan bahagian hadapan

Sebelum memulakan pembangunan, kami juga perlu mengkonfigurasi persekitaran pembangunan bahagian hadapan. Mula-mula, anda perlu mengubah suai konfigurasi outputPath dalam fail angular.json dan tetapkan direktori output kepada folder di bawah folder awam statik dalam projek Beego. Kaedah khusus adalah seperti berikut:

"outputPath": "../static",

Dengan cara ini, kod bahagian hadapan yang disusun boleh dikeluarkan terus ke folder statik projek Beego untuk kegunaan seterusnya.

Konfigurasi merentas domain juga perlu dikonfigurasikan untuk membolehkan bahagian hadapan meminta API bahagian belakang Beego. Perisian tengah CORS boleh disediakan dalam penghalaan Beego untuk membenarkan permintaan merentas domain daripada URL bahagian hadapan. Kaedah khusus adalah seperti berikut:

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

Berikut ialah contoh membenarkan permintaan merentas domain daripada alamat setempat http://localhost:4200, yang boleh diubah suai mengikut situasi sebenar.

4. Menulis kod bahagian hadapan

Selepas kerja di atas selesai, anda boleh mula menulis kod bahagian hadapan. Anda boleh mencipta komponen anda sendiri dalam direktori src/app Sebagai contoh, anda boleh mencipta komponen bernama "pengguna" untuk memaparkan senarai pengguna. Kaedah khusus adalah seperti berikut:

ng generate component users

Arahan ini akan menjana komponen bernama "pengguna" dalam direktori src/apl, termasuk fail templat HTML, fail gaya CSS, fail skrip TypeScript, dsb.

Dalam fail templat HTML, anda boleh menulis kod HTML untuk memaparkan senarai pengguna Contohnya, anda boleh menggunakan arahan *ngFor Angular untuk menggelungkan melalui semua pengguna:

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

Dalam TypeScript. fail skrip, anda boleh menulis Kod untuk memuatkan data senarai pengguna. Anda boleh menggunakan modul HttpClient Angular untuk menghantar permintaan ke API bahagian belakang dan mendapatkan data, contohnya:

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

Kod ini akan menghantar permintaan GET ke antara muka "/api/users" dalam API bahagian belakang Beego apabila komponen dimulakan , dapatkan data senarai pengguna dan simpan data ke atribut "pengguna" dalam komponen.

5. Jalankan kod bahagian hadapan

Selepas menulis kod bahagian hadapan, anda boleh menggunakan arahan ng untuk menyusun kod bahagian hadapan dan memulakan pelayan pembangunan untuk nyahpepijat. Perintah khusus adalah seperti berikut:

ng build --watch

Arahan ini akan menjana kod bahagian hadapan yang disusun dalam direktori "frontend/dist", memantau perubahan dalam kod sumber dan menyusun semula secara automatik. Anda boleh memulakan pelayan pembangunan dalam direktori akar projek Beego, dayakan API bahagian belakang dan akses http://localhost:4200 dalam penyemak imbas untuk mengakses halaman hujung hadapan.

6. Kesimpulan

Artikel ini memperkenalkan cara menggunakan Angular untuk pembangunan front-end dalam Beego, termasuk memasang Angular CLI, mencipta projek Angular, mengkonfigurasi persekitaran pembangunan front-end , menulis kod bahagian hadapan dan Langkah-langkah seperti menjalankan kod bahagian hadapan. Angular ialah rangka kerja pembangunan bahagian hadapan yang berkuasa yang boleh membantu kami membina antara muka pengguna dengan cepat dan meningkatkan pengalaman pengguna. Menggunakan Angular untuk pembangunan bahagian hadapan dalam Beego boleh mencapai pemisahan bahagian hadapan dan belakang dengan lebih cekap dan meningkatkan kecekapan kerja.

Atas ialah kandungan terperinci Pembangunan bahagian hadapan menggunakan Angular dalam Beego. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!