Daten senden von Client angular2 zum Server Feder ‚POST‘

Question

ich einen Fehler nicht, aber ich Daten null in der Server-Seite erhalten für Sie helfen, indem Sie ein Beispiel geben thks

dies mein Client-Dienst ist

import {Injectable, Inject} from "angular2/core"; 
import {Http, Headers} from "angular2/http"; 
import 'rxjs/add/operator/map'; 
import {User} from "../User/User"; 


@Injectable() 
export class loginService { 

    constructor(private _http:Http) { 

    } 

    login(user) { 

     // var creds = "username=" + "khalil" + "&password=" + 3; .map(res=>res.text()); 
     var headers = new Headers(); 
     headers.append('Content-Type', 'application/json'); 
     return this._http.post('http://localhost:8080/login', user, { 
       headers: headers 
      }) 
      .map(res=>res.json()); 

    } 

das ist meine Komponente, wo ich Login-Methode aufrufen

import {Component, Inject} from 'angular2/core'; 
import {Router} from "angular2/router"; 
import {loginService} from "./login.service"; 
import {HTTP_PROVIDERS, Http} from "angular2/http"; 
import {User} from "../User/User"; 
import {ControlGroup, FormBuilder, Validators, Control} from "angular2/common"; 

@Component({ 
    selector: 'login', 
    templateUrl: '../dev/login/login.html', 
    providers: [HTTP_PROVIDERS, loginService] 
}) 

export class loginComponent { 
    public _user:User; 
    loginForm:ControlGroup; 

    constructor(private _router:Router, 
       private _loginService:loginService, 
    private _formBuilder:FormBuilder) { 


     this._user = { 
      firstName: '', 
      lastName: '', 
      tel: '', 
      email: '', 
      creationDate: new Date(), 
      compteMatriculaire: '', 
      enabled: false, 
      password: '', 
      structure: '' 
     }; 

    } 

    login() { 
     console.log("email"+this._user.email); 
     this._loginService.login(this._user).subscribe(
      (data:User) => { 
       this._user = data; 
      }, 
      error => alert('Erreur ' + error), 
      () => { 
       console.log("finished " + this._user.email + " " + this._user.password); 
       //this._router.navigate(['Home']); 
      } 
     ); 
    } 

diese Seite meine Form

ist

<div class="container"> 

    <form #loginForm="ngForm" (ngSubmit)="login()" class="form-signin"> 
     <h2 class="form-signin-heading">Please sign in</h2> 
     <label for="email" class="sr-only">Email</label> 
     <input type="email" ngControl="email" [(ngModel)]="_user.email" #email id="email" class="form-control" placeholder="email" required autofocus> 
     <label for="password" class="sr-only">Password</label> 
     <input type="password" ngControl="password" [(ngModel)]="_user.password" #password id="password" class="form-control" placeholder="Password" required> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox" value="remember-me"> Remember me 
      </label> 
     </div> 
     <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> 
    </form> 
</div> 

und dies ist mein Controller

@RequestMapping(value = "/login", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE) 
    public ResponseEntity<User_khalil> login(User_khalil user) { 
     System.out.println("------- " + user.getEmail() + user.getPassword()); 

     User_khalil u = userRepository_khalil.findOneByEmailAndPassword(user.getEmail(), user.getPassword()); 
     if (u != null) { 
      return new ResponseEntity<User_khalil>(user, HttpStatus.OK); 
     } 
     return new ResponseEntity<User_khalil>(user, HttpStatus.OK); 
    } 

Answer 1

Sie haben Ihr Objekt als Zeichenfolge mit der JSON.stringify Funktion zu konvertieren:

return this._http.post('http://localhost:8080/login', 
     JSON.stringify(user), { // <------ 
      headers: headers 
     }) 
     .map(res=>res.json()); 

bearbeiten

Sie versuchen, die folgenden könnten:

Answer 2

login() { console.log("email"+this._user.email); this._loginService.login(this._user).subscribe(data => { console.log(data); this._user = data; }, error => alert('Erreur ' + error),() => { console.log("finished " + this._user.email + " " + this._user.password); //this._router.navigate(['Home']); }); } 

Answer 3

public ResponseEntity<User_khalil> login(@RequestBody User_khalil user) 

@RequestBody ist der Schlüssel mit dieser Lösung.

Die andere Option (ohne @RequestBody):

this._http.post('http://localhost:8080/login', user, { 
    headers: headers, 
    params: new HttpParams().set('username', 'Khalil'), 
}) 

Auf diese Weise senden Sie die POST-Anforderung an die URL/api/login username = Khalil?.

Ich empfehle die erste Option mit @RequestBody.