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客户端应从服务器获取数据。

快乐的编码。