servlet和angular 4之间的通信

Question

我正在使用控制器端的 servlet 和前端的 angular 创建一个 java web 应用程序。这个应用程序使用 javamail api 从电子邮件帐户（如 gmail）获取电子邮件，然后将它们作为 json 格式返回..我做了所有这些..我可以带来电子邮件消息并使用servlet以json格式返回它们，但我的问题是我无法使用角度显示它们..我试图用这个网站测试我的代码“ http://jsonplaceholder.typicode.com/users" 用 json 测试我的角度，它带来了所有数据，但是当我修改它并用我的应用程序尝试它时，它没有带来任何东西.. 这是我的应用程序中的 json 数据示例..

这就是打印这些数据的 servlet 代码：

        // TODO Auto-generated method stub
        doGet(request, response);
        EmailAccount emailaccount= new EmailAccount("myemail@gmail.com","HardPas$$word!@");
        EmailServices read = new EmailServices();
        ArrayList<Email> emails = new ArrayList<Email>();
        emails = read.readEmail(emailaccount);      

        String json = new Gson().toJson(emails.get(2));
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(json);
        } 

这是用于获取 json 数据并显示它的 Angular 代码：

html

<form action="http://127.0.0.1:8080/oneBox/ReadEmail" method="POST" (submit)="onSubmit()">
    <input type="submit" value="submit">
</form>
        <ul >
            <li>
                {{users.id}}
            </li>
            <li>
                {{users.title}}  ---- {{users.from}}
            </li>
            <li>
                {{users.to}}
            </li>
        </ul>   

组件：

import { Component, OnInit } from '@angular/core';
import { MyServiceService } from '../../services/my-service.service';
import {EmailModel} from '../../models/user.model'




@Component({
  selector: 'app-my-compo',
  templateUrl: './my-compo.component.html',
  styleUrls: ['./my-compo.component.css']
})
export class MyCompoComponent implements OnInit {

users:EmailModel;

  constructor(public service:MyServiceService) {



   }

   onSubmit(){
    this.service.getUsers().subscribe(

      users => {this.users=users;});
   }

  ngOnInit(): void {
  }

}

和我的服务代码：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

import {map, catchError} from "rxjs/operators";

import { Observable, throwError } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MyServiceService {


url="http://127.0.0.1:8080/oneBox/ReadEmail";

getUsers():Observable<any>{

    return this.http.get(this.url)
           .pipe(map(res => res.json()));

            }

  constructor(public http: Http) { }
}

所以我的问题是如何从本地服务器获取这些 json 数据并使用 angular 打印出来？

Answer 1

您的后端似乎工作正常，因为您从 Java 方面获得了正确的 JSON 响应。

在您的服务类中尝试以下操作：

getUsers(): Observable<any>{
   return this.http.get<any>(this.url); 
}

在组件控制器中添加错误回调并记录两个字段的结果，然后在 cmets 中向我们提供结果：

onSubmit(){
  this.service.getUsers().subscribe(
    users => {
        console.log(users);
        this.users=users;
    }, 
    error => {
       console.log(error);
    });
}

此外，我认为 POST 和 GET 请求之间存在误解，正如我在您的表单中看到的那样。删除表单中的 method 和 action 属性，因为在 Angular 中这将不起作用。您使用 (submit) 事件提交表单，这就足够了。

最后但同样重要的是，您是否在后端考虑过 CORS 政策？这是前端/后端分离的问题，因为后端只允许来自相同 IP 和端口的请求，因此不允许来自您的 Angular 前端。也许这可以帮助你：https://howtodoinjava.com/servlets/java-cors-filter-example/