Angular 5 client for Java RESTful Web Service application (i



必须有数千个预先存在的Java应用程序可以从与基于Web的GUI/Web应用程序的交互中受益。因此,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 Client

  1. 要生成 RESTful Web JavaScript 客户端:,请完成以下步骤。 a. 选择:播放器服务器项目 - 右键单击。 b. 选择:新建 - 其他 c.选择: HTML5/JavaScript d.选择: RESTful JavaScript Client e.填写向导的字段

    • 为 JS 和 HTML 文件提供一致的文件名。 f.如果要从数据库为数据表生成 HTML 表, 选择:选择生成的 UI:,并在其中选择表格排序器 UI (您可能需要将此行添加到生成的 XXX.html 文件中: )
  2. 通过在项目中选择生成的 html 文件进行测试, 右键单击并选择:运行文件。


我尝试在以下代码中使用 Angular:app.component.ts, 但它确实会产生错误。

"跨源请求被阻止:同源策略不允许在 http://localhost:8080/PlayerServer/webresources/com.playerentity.player 读取远程资源。(原因:缺少 CORS 标头"访问控制-允许源')。

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);
});
}
}

有趣的是宇宙是如何运作的。经过几天的挖掘,我在发布帮助请求后不久就找到了解决方案。

这是为那些感兴趣的人准备的。如果您在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 客户端应该从服务器获取您的数据。

快乐编码。

最新更新