java - 如何使用 HTTP 和 REST 将 Angular 前端连接到 Java Servlet 后端？

Question

我正在尝试调用用 Java 编写的后端机制。后端是一个接受 REST 请求的 servlet。调用机制是发送 HTTP 请求的 Angular 组件。不幸的是，我无法知道请求是否已发送，只能知道 Servlet 没有接收到请求。

Servlet:

package services;

import javax.ws.rs.Consumes;
import javax.ws.rs.GET;
import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;

import objects.*;

@Path("/player")
public class PlayerService {

    @GET
    @Path("/get")
    @Produces(MediaType.APPLICATION_JSON)
    public String getTrackInJSON() {

        return "Get success";

    }

    @POST
    @Path("/post")
    @Consumes(MediaType.APPLICATION_JSON)
    public Response registerNewPlayer(PlayerRegisterRequest new_player) {

        String result = "Player saved : " + new_player;
        return Response.status(201).entity(result).build();

    }

}

组件:

import { Component, OnInit } from '@angular/core';
import { Injectable } from '@angular/core';
import { NgForm } from '@angular/forms';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
import { NewPlayer } from './new-player';


const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Component({
  selector: 'app-players-register',
  templateUrl: './players-register.component.html',
  styleUrls: ['./players-register.component.css']
})


export class PlayersRegisterComponent implements OnInit {

  private registrationUrl = 'http://localhost:8080/arenamaster-backend/api/player/post';
  private getUrl = 'http://localhost:8080/arenamaster-backend/api/player/get';

  constructor(private http: HttpClient) { 

  }

  ngOnInit() {
  }

  model = new NewPlayer( '', '', '');

  onSubmit(f: NgForm) { 
    console.log(this.model.username);
    console.log(this.model.password);
    console.log(this.model.email);
    this.sendForm(this.model);
  }

  sendForm(form: NewPlayer): Observable<string>{
    console.log('attempting to send form');
    console.log(this.http.get<string>(this.getUrl));
        return this.http.post<NewPlayer>(this.registrationUrl, form, httpOptions).pipe(
            tap((form: NewPlayer) => this.log(`added new player w/ user=${form.username}`)),
            catchError(this.handleError<NewPlayer>('sendForm'))
        );
  }

  private handleError<T> (operation = 'operation', result?: T) {
      return (error: any): Observable<T> => {

        // TODO: send the error to remote logging infrastructure
        console.error(error); // log to console instead

        // TODO: better job of transforming error for user consumption
        this.log(`${operation} failed: ${error.message}`);

        // Let the app keep running by returning an empty result.
        return of(result as T);
      };
   }
}

如何配置其中一个或两者，以便 Java Servlet 打印出我在 Angular 组件中输入的内容？

Answer 1

您需要订阅this.sendForm(this.model) Observable

this.sendForm(this.model).subscribe();