不能發送角度2的值到彈簧控制器使用休息

Question

我想創建一個CRUD應用程序，對於選擇操作一切正常但我不能創建一個新的Personne，通過發送表單的值彈簧控制器 這是我的應用程序，components.ts

 import { personne } from './personne'; 
    import { StylesCompileResult } from '@angular/compiler'; 
    import { Component } from '@angular/core'; 
    import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
    import { Observable } from 'rxjs'; 
    import 'rxjs/add/operator/map'; 

    @Component({ 
     selector: 'app-root', 
     templateUrl: './app.component.html', 
     styleUrls: ['./app.component.css'] 
    }) 
    export class AppComponent { 
     title = 'ICS DashBoard Project'; 
     http: Http; 
     contacts = [ 
     'toto', 
     'momo', 
     'soso' 
     ]; 
     personne: Observable<personne[]>; 
     constructor(http: Http) { 
     //http.get('http://localhost:8082/personne/all'); 
     this.http = http; 
     this.http.get('http://localhost:8082/personne/all').subscribe((res: Response) => this.personne = res.json()); 


     } 

     addPersonne(nom: string, prenom: string, age: number, dateNaissance) { 


     /* 
     console.log(nom); 
      this.http.post('http://localhost:8086/personne/save', 
       {"prenom": prenom, 
       "nom":nom, 
       "age":age, 
       "dateNaissance":dateNaissance 
      }).toPromise(); * 
     */ 
     /* 
      var headers = new Headers({ 'Content-Type': 'application/json' }); 
      var options = new RequestOptions({ headers: headers }); 
      var body = JSON.stringify({ 
      var1:'test', 
      var2:'test2' 
      }); 
      var params='json'+body; 
      this.http.post('http://validate.jsontest.com', body, headers).map((res: Response) => res.json()); 
      console.log("ajoutee"); 
       */ 
     // var json=JSON.stringify({var1:'test1',var2:3}); 
     var params = { 

      "prenom": prenom, 
      "nom": nom, 
      "age": age, 
      "dateNaissance": dateNaissance 
     } 

     let options = new RequestOptions({ headers: headers }); 
     //var head = new Headers(); 
     console.log("TOTO"); 
     // head.append('Content-Type','application/x-www-form-urlencoded'); 
     /*this.http.post('http://localhost:8082/personne/save',params,{ 

      headers:head 
     }).map(res=> res.json())*/ 


     var headers = new Headers(); 
     headers.append('Content-Type', 'application/x-www-form-urlencoded'); 

     this.http.post('http://localhost:3001/sessions/create', params, { 
     headers: headers 
     }) 
     .map(res => res.json()) 
     .subscribe(


     () => console.log('Authentication Complete') 
     ); 
     } 
    /* 
    updatePersonne(oldName:string, newName:string){ 
     console.log("UPDATE"); 
     this.http.post('http://localhost:8082/personne/update', { "oldName": oldName, "newName": newName }); 
    }*/ 
      } 

這是我的休息控制器

  package org.sqli.Controller; 

     import java.util.List; 

     import org.sqli.entities.Personne; 
     import org.springframework.beans.factory.annotation.Autowired; 
     import org.springframework.web.bind.annotation.CrossOrigin; 
     import org.springframework.web.bind.annotation.PathVariable; 
     import org.springframework.web.bind.annotation.RequestBody; 
     import org.springframework.web.bind.annotation.RequestMapping; 
     import org.springframework.web.bind.annotation.RequestMethod; 
     import org.springframework.web.bind.annotation.RestController; 
     import org.sqli.service.PersonneService; 

     @RestController 
     //@CrossOrigin("*") 
     //@CrossOrigin(origins = "http://localhost:4200") 
     @RequestMapping(value="/personne") 
     public class PersonneRestController { 

      @Autowired 
      private PersonneService personneService; 

      @CrossOrigin 
      @RequestMapping(value="/save") 
      public Personne savePersonne(@RequestBody Personne p){ 

       System.out.println("persoone :::"+p.getNom()); 
       return personneService.savePersonne(p); 

      } 
     /* @CrossOrigin 
      @RequestMapping(value="/update",method=RequestMethod.POST) 
      public Personne updatePersonne(@RequestBody String oldName , String newName){ 
       List<Personne> lPersonne = listPersonne(); 
       Personne newPersonne = null; 
       for(Personne personne : lPersonne){ 
        if(personne.getNom().equals(oldName)){ 
         newPersonne = personne; 
         newPersonne.setNom(newName); 
         break; 
        } 
       } 
        return personneService.updatePersonne(newPersonne); 

      }*/ 

     /* @CrossOrigin 
      @RequestMapping(value="savep",method=RequestMethod.PUT) 
      public Personne savePersonnep(@RequestBody Personne p){ 

       return personneService.savePersonne(p); 
      }*/ 
      @CrossOrigin 
      @RequestMapping(value="/all") 
      public List<Personne> listPersonne(){ 
       return personneService.listPersonne(); 
      } 
      @CrossOrigin 
      @RequestMapping(value="/delete/{id}",method=RequestMethod.DELETE) 
      public void deletePersonne(@PathVariable Long id){ 
       System.out.println("Delete bien"); 
       personneService.deletePersonne(id); 

      } 




     } 

Answer 1

你需要添加請求方法

@PostMapping(value = "/save", consumes = { MediaType.APPLICATION_JSON_UTF8_VALUE }) 
public Personne savePersonne(@RequestBody Personne p){ 

       System.out.println("persoone :::"+p.getNom()); 
       return personneService.savePersonne(p); 

      } 

，並確認網址的服務（AppComponent/addpersonne）

Answer 2

使用控制器的終端不匹配的網址：

//addPersonne 
this.http.post('http://localhost:port/personne/save', params, { 
    headers: headers 
    }) 
    .map(res => res.json()) 
    .subscribe(


    () => console.log('Authentication Complete') 
    );