Cara menggunakan Java untuk membangunkan aplikasi pembangunan bahagian hadapan berdasarkan JHipster

Cara menggunakan Java untuk membangunkan aplikasi pembangunan bahagian hadapan berdasarkan JHipster

Kata Pengantar:
Dalam bidang pembangunan bahagian hadapan, JHipster ialah alat sumber terbuka yang sangat popular, yang membantu pembangun membina aplikasi web moden dengan cepat . JHipster menyepadukan banyak teknologi front-end dan back-end yang biasa digunakan, termasuk Java, Spring Boot, Angular, React, dll., membolehkan pembangun membina aplikasi web berciri penuh dengan cepat. Artikel ini akan memperkenalkan cara menggunakan Java untuk membangunkan aplikasi pembangunan bahagian hadapan berdasarkan JHipster dan memberikan contoh kod khusus.

1. Pasang JHipster
   Pertama, kita perlu memasang JHipster. JHipster ialah penjana kod berasaskan Yeoman, kami boleh memasangnya melalui npm:

npm install -g generator-jhipster

Selepas pemasangan selesai, anda boleh menyemak sama ada pemasangan berjaya:

jhipster --version

2. Buat projek JHipster baharu
   Masukkan baris arahan anda ingin mencipta direktori projek dan jalankan arahan berikut:

jhipster

JHipster akan menggesa anda untuk memilih beberapa pilihan untuk mengkonfigurasi projek, seperti memilih teknologi bahagian hadapan (Angular atau React), jenis pangkalan data, dsb. Pilih berdasarkan keperluan anda.

3. Membangunkan aplikasi bahagian hadapan
   JHipster menyediakan direktori berasingan untuk aplikasi bahagian hadapan, yang mengandungi semua kod bahagian hadapan dan fail sumber. Di sini, kami akan menggunakan Angular sebagai rangka kerja bahagian hadapan, tetapi anda juga boleh memilih untuk menggunakan rangka kerja lain seperti React.

Masukkan direktori bahagian hadapan:

cd src/main/webapp

Dalam direktori ini, kita boleh melihat folder aplikasi, yang mengandungi semua kod Angular dan fail sumber.

Buka direktori aplikasi dan anda akan menemui subdirektori bernama rumah. Ini ialah halaman contoh yang anda boleh mula membangunkan apl anda.

4. Tulis kod bahagian hadapan
   Buka fail dalam direktori utama, anda akan menemui fail bernama home.component.ts. Ini ialah fail definisi komponen Sudut, yang mengandungi logik dan pandangan komponen.

Kami boleh membuka fail menggunakan mana-mana penyunting teks dan mula menulis kod kami. Berikut ialah contoh mudah:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  title = 'Hello, JHipster!';

  constructor() { }

  ngOnInit(): void {
  }
}

Kod di atas mentakrifkan komponen Sudut yang dipanggil HomeComponent, yang mempunyai sifat yang dipanggil tajuk. Kita boleh menggunakan atribut ini dalam templat HTML untuk memaparkan tajuk.

5. Tulis templat bahagian hadapan
   Dalam direktori rumah, anda juga akan menemui fail bernama home.component.html. Ini ialah fail templat HTML komponen yang mentakrifkan paparan komponen.

Buka home.component.html dan tulis kandungan berikut:

<h1 id="title">{{ title }}</h1>

Kod di atas hanya memaparkan tajuk komponen.

6. Jalankan aplikasi
   Kembali ke direktori akar projek dan jalankan arahan berikut untuk memulakan aplikasi:

./mvnw

Selepas berjaya memulakan, buka penyemak imbas dan lawati http://localhost:8080/, anda akan lihat halaman "Helo, JHipster!"

7. Fungsi lanjutan dan pembangunan lanjutan
   Selain fungsi asas di atas, JHipster juga menyediakan banyak fungsi lanjutan lain dan pilihan pembangunan lanjutan, termasuk konfigurasi penghalaan, pengesahan dan kebenaran, panggilan API, dsb. Anda boleh mengetahui lebih lanjut melalui dokumentasi JHipster dan sumber komuniti.

Kesimpulan:
Artikel ini memperkenalkan cara menggunakan Java untuk membangunkan aplikasi pembangunan bahagian hadapan berdasarkan JHipster. Kami menggunakan JHipster untuk membina aplikasi web berciri penuh dengan cepat, menunjukkan proses pembangunan bahagian hadapan asas dan menyediakan contoh kod khusus. Saya harap artikel ini dapat memberi anda sedikit bantuan supaya anda boleh menggunakan JHipster dengan lebih baik untuk membangunkan aplikasi bahagian hadapan.

Atas ialah kandungan terperinci Cara menggunakan Java untuk membangunkan aplikasi pembangunan bahagian hadapan berdasarkan JHipster. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!