如何通过HTTP和REST将Angular前端连接到Java Servlet后端?

时间:2019-06-19 16:17:56

标签: java angular rest http

我正在尝试调用用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组件中的内容?

1 个答案:

答案 0 :(得分:0)

您需要订阅this.sendForm(this.model)可观察的

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