Question

必须有数千个预先存在的Java应用程序，这些应用程序可以从与基于Web的GUI / Web应用程序交互中受益。因此，Java作为后端必须对这些Java（服务器端）程序的许多人有意义。

Netbeans提供了一种非常自动化的方法来生成servlet和客户端框架代码库。

您可以再次使用自动生成的示例来使用servlet数据 - 请参阅以下步骤。

，但

经过大量研究后，看来Angular将是我的前端网络应用程序的最佳拟合设计策略。所以，我从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示例：here 和类似的：here

NetBeans 8.2中的RESTful JavaScript客户端

要生成RESTful Web JavaScript客户端：，请完成以下步骤。一个。选择：PlayerServer项目 - 右键单击。湾选择：新 - 其他 C。选择：HTML5 / JavaScript d。选择：RESTful JavaScript Client 即填写向导的字段
- 为您的js和html文件提供相应的文件名。 F。如果要从数据库为数据表生成HTML表，选择：选择生成的UI：并在其中：Tablesorter UI （您可能需要将此行添加到生成的XXX.html文件中：）
通过在项目中选择生成的html文件进行测试，右键单击并选择：运行文件。

我尝试在以下代码中使用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问题，因为您可能会在至少2个域中工作：

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

快乐的编码。

用于Java RESTful Web服务应用程序的Angular 5客户端（在Netbeans IDE中）

NetBeans 8.2中的RESTful JavaScript客户端

1 个答案: