首頁  >  文章  >  Java  >  如何使用Java開發一個基於JHipster的前後端分離應用

如何使用Java開發一個基於JHipster的前後端分離應用

WBOY
WBOY原創
2023-09-20 11:18:28944瀏覽

如何使用Java開發一個基於JHipster的前後端分離應用

如何使用Java開發一個基於JHipster的前後端分離應用程式

前言:
在當今的軟體開發中,前後端分離的架構越來越受到開發者的追捧。 JHipster是使用Java建立現代網路應用程式的強大工具,它結合了Spring Boot和Angular等技術,提供了快速開發應用的能力。本文將介紹如何使用Java開發一個基於JHipster的前後端分離應用,並提供程式碼範例。

JHipster簡介:
JHipster是用來產生現代Web應用的開發平台。它結合了Spring Boot、Spring Security、Angular、React和Vue等技術,旨在簡化應用程式的建置流程。 JHipster提供了許多開箱即用的功能,如使用者管理、認證授權、資料庫存取、前台頁面等。透過使用JHipster,開發者可以快速建立一個功能完整、高效可靠的應用程式。

前端和後端分離架構:
前後端分離架構將前端和後端程式碼分別獨立開發、部署和維護。前端透過API與後端進行通信,取得資料並渲染頁面。這種架構的優點是,前端和後端可以並行開發,減少了開發過程中的協調和依賴問題,同時也支援多平台和多端的應用開發。

步驟一:安裝JHipster和建立專案
在開始之前,請確保您已經安裝了Java、Node.js和Yarn。

  1. 開啟命令列工具,並安裝JHipster:

    npm install -g generator-jhipster
  2. 建立一個新的JHipster專案:

    jhipster

#根據提示,選擇您想要使用的技術堆疊和元件。

步驟二:建立前端應用

  1. 在專案根目錄下,建立一個名為「frontend」的資料夾:

    mkdir frontend
  2. 進入frontend資料夾,並使用Angular CLI建立一個新的Angular應用程式:

    cd frontend
    ng new myapp
  3. #進入myapp目錄,並啟動開發伺服器:

    cd myapp
    ng serve

現在,您可以在瀏覽器中造訪http://localhost:4200,查看Angular應用程式。

步驟三:與後端進行通信

  1. 開啟src/main/java/com/mycompany/myapp/config/Constants.java文件,設定前後端通信的API路徑:

    public static final String API_URL = "/api";
  2. 開啟src/main/java/com/mycompany/myapp/config/SecurityConfiguration.java文件,允許Cross Origin Resource Sharing(CORS):

    @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();
     }
    }
  3. 開啟src/main/java/com/mycompany/myapp/web/rest/UserResource.java文件,將使用者相關的API路徑改為/api/users:

    @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());
     }
    }
  4. 開啟frontend/src/app/app.component.ts文件,使用HttpClient取得後端API資料:

    import { Component } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    
    @Component({
      selector: 'app-root',
      template: `
     <h1>Users</h1>
     <ul>
       <li *ngFor="let user of users">{{user.login}}</li>
     </ul>
      `,
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      users: any[];
      
      constructor(private http: HttpClient) {
     this.http.get('/api/users').subscribe((data: any[]) => {
       this.users = data;
     });
      }
    }

透過以上程式碼範例,前端應用程式將會在頁面上顯示從後端取得的使用者清單。

總結:
透過使用JHipster,您可以輕鬆地開發一個基於Java的前後端分離應用程式。上述步驟提供了一個基本的框架,您可以根據需要進行擴展和最佳化。希望本文能幫助您快速上手使用JHipster進行前後端分離應用的開發。祝您編碼愉快!

以上是如何使用Java開發一個基於JHipster的前後端分離應用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn