Cara menggunakan Java untuk membangunkan aplikasi pemisahan bahagian hadapan dan belakang berdasarkan JHipster

Cara menggunakan Java untuk membangunkan aplikasi pemisahan bahagian hadapan dan belakang berdasarkan JHipster

Kata Pengantar:
Dalam pembangunan perisian hari ini, seni bina pemisahan bahagian hadapan dan belakang semakin dicari oleh pembangun. JHipster ialah alat yang berkuasa untuk membina aplikasi web moden menggunakan Java Ia menggabungkan teknologi seperti Spring Boot dan Angular untuk menyediakan keupayaan untuk membangunkan aplikasi dengan cepat. Artikel ini akan memperkenalkan cara menggunakan Java untuk membangunkan aplikasi pemisahan bahagian hadapan dan belakang berdasarkan JHipster, dan memberikan contoh kod.

JHipster Pengenalan:
JHipster ialah platform pembangunan untuk menjana aplikasi web moden. Ia menggabungkan teknologi seperti Spring Boot, Spring Security, Angular, React dan Vue untuk memudahkan proses pembinaan aplikasi. JHipster menyediakan banyak fungsi luar biasa, seperti pengurusan pengguna, pengesahan dan kebenaran, akses pangkalan data, halaman hadapan, dsb. Dengan menggunakan JHipster, pembangun boleh membina aplikasi yang berfungsi sepenuhnya, cekap dan boleh dipercayai.

Seni bina pemisahan bahagian hadapan dan belakang:
Seni bina pemisahan bahagian hadapan dan belakang membangun, menggunakan dan mengekalkan kod bahagian hadapan dan belakang secara bebas. Bahagian hadapan berkomunikasi dengan bahagian belakang melalui API, mendapatkan data dan memaparkan halaman. Kelebihan seni bina ini ialah bahagian hadapan dan bahagian belakang boleh dibangunkan secara selari, mengurangkan isu penyelarasan dan pergantungan dalam proses pembangunan Ia juga menyokong pembangunan aplikasi berbilang platform dan berbilang terminal.

Langkah 1: Pasang JHipster dan buat projek
Sebelum bermula, sila pastikan anda telah memasang Java, Node.js dan Yarn.

1. Buka alat baris arahan dan pasang JHipster:

   npm install -g generator-jhipster

2. Buat projek JHipster baharu:

   jhipster

Ikuti gesaan dan pilih tindanan teknologi dan komponen yang anda mahu gunakan.

Langkah 2: Buat aplikasi bahagian hadapan

1. Dalam direktori akar projek, buat folder bernama "frontend":

   mkdir frontend

2. Pergi ke folder bahagian hadapan dan gunakan Angular CLI untuk mencipta aplikasi Sudut baharu:

   cd frontend
   ng new myapp

3. Masukkan direktori myapp dan mulakan pelayan pembangunan:

   cd myapp
   ng serve

Sekarang, anda boleh melawati http://localhost:4200 dalam penyemak imbas untuk melihat aplikasi Angular.

Langkah 3: Berkomunikasi dengan bahagian belakang

1. Buka fail src/main/java/com/mycompany/myapp/config/Constants.java dan konfigurasikan laluan API untuk komunikasi bahagian hadapan dan belakang:

   rreee

2. Buka fail src/ main/java/com/mycompany/myapp/config/SecurityConfiguration.java, membenarkan Cross Origin Resource Sharing (CORS):

   public static final String API_URL = "/api";

3. Buka src/main/java/com/mycompany/myapp/web/ rest/UserResource. java, tukar laluan API berkaitan pengguna kepada /api/users:

   @Configuration
   @EnableWebSecurity
   @EnableGlobalMethodSecurity(prePostEnabled = true, securedEnabled = true)
   public class SecurityConfiguration extends WebSecurityConfigurerAdapter {
   
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        // ...
   
        http.cors()
            .and()
            .csrf()
            .disable()
            .headers()
            .frameOptions()
            .disable()
            .cacheControl()
            .disable();
    }
   }

4. Buka fail frontend/src/app/app.component.ts, gunakan HttpClient untuk mendapatkan data API bahagian belakang:

   @RestController
   @RequestMapping("/api")
   public class UserResource {
   
    // ...
   
    @GetMapping("/users")
    public ResponseEntity<List<UserDTO>> getAllUsers(Pageable pageable) {
        Page<UserDTO> page = userService.getAllManagedUsers(pageable);
        HttpHeaders headers = PaginationUtil.generatePaginationHttpHeaders(ServletUriComponentsBuilder.fromCurrentRequest(), page);
        return ResponseEntity.ok().headers(headers).body(page.getContent());
    }
   }

Melalui contoh Kod di atas, aplikasi bahagian hadapan akan memaparkan senarai pengguna yang diperolehi dari bahagian belakang pada halaman.

Ringkasan:
Dengan menggunakan JHipster, anda boleh membangunkan aplikasi pemisah bahagian hadapan dan belakang berasaskan Java dengan mudah. Langkah-langkah di atas menyediakan rangka kerja asas yang boleh anda panjangkan dan optimumkan mengikut keperluan. Saya harap artikel ini dapat membantu anda mula menggunakan JHipster dengan cepat untuk membangunkan aplikasi pemisahan bahagian hadapan dan belakang. Selamat mengekod!

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