общаться между сервлетом и angular 4

Question

Я работаю над созданием java веб-приложения с использованием сервлета на стороне контроллера и angular на стороне клиента. Это приложение использует javamail api для получения писем от учетной записи электронной почты (например, gmail), а затем возвращает их как json формат .. я сделал все это .. я могу принести электронные письма и вернуть их в формате json с помощью сервлета, но моя проблема здесь в том, что я не могу отобразить их с помощью angular .. я попытался проверить свой код на этом веб-сайте "http://jsonplaceholder.typicode.com/users", чтобы проверить мой angular с json, и он принесет все данные, но когда я изменяю его и пробую с моим приложением, это не принесите что-нибудь ... вот пример json данных из моего приложения ..

и вот код сервлета, который печатает эти данные:

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

и это коды в angular, чтобы получить данные json и отобразить их:

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

Ваш бэкэнд, кажется, работает нормально, поскольку вы получаете JSON ответ от Java стороны вещей.

Попробуйте следующее в вашем классе обслуживания:

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

Добавьте функцию обратного вызова в вашем компонентном контроллере и зарегистрируйте результат обоих полей, затем предоставьте нам результат в комментариях:

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

Более того, я думаю, что существует неправильное представление между POST и ПОЛУЧИТЕ ЗАПРОСЫ, как я увидел это в вашей форме. Удалите атрибуты method и action в вашей форме, поскольку в Angular это не будет иметь никаких эффектов. Вы отправляете свои формы с событием (submit), и этого достаточно.

И последнее, но не менее важное: рассматривали ли вы политику CORS в своем бэкэнде? Эта проблема связана с разделением внешнего интерфейса и внутреннего интерфейса, поскольку внутренний сервер будет разрешать только запросы, поступающие с одного и того же IP-адреса и порта, а не вашего внешнего интерфейса Angular. Вероятно, это может помочь вам: https://howtodoinjava.com/servlets/java-cors-filter-example/