Java RESTful Web服務應用程序的Angular 5客戶端（在Netbeans IDE中）

Question

通過與基於Web的GUI / Web應用程序進行交互，必須有成千上萬的Java應用程序可以從中受益。 因此，對於這些Java（服務器端）程序，Java作為后端必須對許多人有意義。

Netbeans提供了一種高度自動化的方法來生成servlet和客戶端框架代碼庫。

您可以使用自動生成的示例再次使用servlet數據-請參見以下步驟。

但，

經過大量研究，看來Angular將是我的前端Web應用程序的最佳擬合設計策略。 因此，我從Angular開始，並掌握了其核心功能（我知道，還有路要走）。

我想使用Angular 5客戶端/ Web應用程序解決方案與Java RESTfull Servlet進行通信-無需其他框架（Spring，Hibernate等）。 我嘗試了幾種發現的方法，但是每種方法只會增加更多的混亂。

您是否可以發布一個簡單的解決方案，以允許基於Angular 5的客戶端/ Web應用程序與給定的Java RESTfull Servlet進行CRUD交互？ 我相信許多人將從這個樣本中受益。 謝謝。

---

這是servlet和非Angular客戶端的示例，它們都可以很好地工作，而無需編寫任何Java或JS代碼行。

NetBeans 8.2中的RESTful Servlet

Servlet示例： 此處和相似處： 此處

NetBeans 8.2中的RESTful JavaScript客戶端

1. 要生成RESTful Web JavaScript客戶端：，請完成以下步驟。 一種。 選擇：PlayerServer項目-右鍵單擊。 灣 選擇：新建-其他c。 選擇：HTML5 / JavaScript d。 選擇：RESTful JavaScript客戶端e。 填寫向導的字段

   • 為您的js和html文件提供相應的文件名。 F。 如果要從數據庫為數據表生成HTML表，請選擇：選擇結果UI，並在其中：Tablesorter UI（您可能需要將此行添加到生成的XXX.html文件中：）

2. 通過在項目中選擇生成的html文件進行測試，右鍵單擊並選擇：Run file。

---

我嘗試將Angular與以下代碼一起使用：app.component.ts，但確實會產生錯誤。

“跨域請求被阻止： 同源策略禁止讀取位於http：// localhost：8080 / PlayerServer / webresources / com.playerentity.player的遠程資源。（原因：缺少CORS標頭'Access-Control-Allow-Origin' ）“。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
  title = 'app';
  results = '';
  constructor(private http: HttpClient){
  }
  ngOnInit(): void {
    this.http.get('http://localhost:8080/PlayerServer/webresources/com.playerentity.player').subscribe(data => {
      console.log(data);
    });
  }
}

Answer 1

有趣的宇宙如何運作。 經過幾天的挖掘，在發布我的幫助請求后不久，我便找到了解決方案。

這是給那些有興趣的人的。 如果您在Web服務器上處理CORS，則上面的Angular代碼可以正常工作：

CORS-跨域資源共享。

跨域資源共享（CORS）是一種允許跨域邊界進行開放訪問的規范。

在創建Angular（或服務器項目之外的任何其他客戶端）之前，我們需要解決CORS，因為您可能會在至少兩個域上工作：

    http://localhost:8080/  and
    http://localhost:4200/  (Angular)

它可以在服務器端或客戶端上完成。

對於我們的項目，最簡單的方法是在服務器項目上啟用CORS，如下所示：

1. Right-click your project
2. New > Other > Web Services > Cross Origin Resource Sharing Filter
3. Wizard opens
4. Enter package name - e.g: com.cors
5. Adjust class name - e.g> CrossOriginResourceSharingFilter or simply CorsFilter
6. Save

那應該照顧CORS /跨域數據處理。

然后生成一個Angular應用，並將以上代碼片段添加到腳本文件app.component.ts或您認為最合適的位置，Angular客戶端應從服務器獲取數據。

快樂的編碼。