与Postman一起使用时无法通过表单发送POST请求

时间:2018-10-28 15:42:50

标签: java angular spring-boot

基于Angular 5的前端出现错误400,基于Spring-Boot的后端没有错误。当我向邮递员发送请求时,它可以正常工作。我不知道表格有什么问题。

这是辛迪加实体:

package smart.syndic.entities;

import java.io.Serializable;
import java.util.Collection;
import java.util.Date;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;
import javax.persistence.OneToMany;
import javax.persistence.Temporal;
import javax.persistence.TemporalType;

import com.fasterxml.jackson.annotation.JsonIgnore;

@Entity
public class Syndic implements Serializable 
{
    @Id @GeneratedValue
    private Long id;
    private String numero;
    private String nom;
    private String email;
    private String motPasse;
    private String tele;
    private String adresse;
    private String honoraires;
    private String nbrVote;

    @Temporal(TemporalType.DATE)
    private Date date1;
    @Temporal(TemporalType.DATE)
    private Date date2;

    private String photo;

//-------------------Constructors--------------
//-------------------Getters and Setters-------

    @ManyToOne
    @JoinColumn(name="ID_SYNDIC_TYPES")
    private SyndicTypes syndicTypes;
}

第二个实体SyndicTypes

package smart.syndic.entities;

import java.io.Serializable;
import java.util.Collection;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.OneToMany;

import com.fasterxml.jackson.annotation.JsonIgnore;

@Entity
public class SyndicTypes implements Serializable 
{
    @Id @GeneratedValue
    private Long id;


    private String designation;

//------------------Constructors------------------
//------------------Getters and Setters------------------

    @OneToMany(mappedBy="syndicTypes")
    private Collection<Syndic> syndics;
}

restcontroller:

package smart.syndic.web;

import java.util.List;

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.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import smart.syndic.dao.SyndicRepository;
import smart.syndic.dao.SyndicTypesRepository;
import smart.syndic.entities.Syndic;
import smart.syndic.metier.StorageServiceSyndic;

@RestController
@CrossOrigin("*")
public class SyndicRestController 
{
@Autowired
private SyndicRepository repository;

@Autowired
private StorageServiceSyndic storageServiceSyndic;

@Autowired
private SyndicTypesRepository repository2;

@RequestMapping(value="/syndic", method=RequestMethod.POST)
public Syndic addSyndic(Syndic s,
        @RequestParam("file") MultipartFile file)
{
    Syndic ss = null;
    try
    {
        ss = repository.save(s);
        storageServiceSyndic.store(file, "syndic", ss);

    }
    catch(Exception e)
    {
        e.printStackTrace();
        //throw new RuntimeException("Impossible de stocker l'image");
    }

    s.setSyndicTypes(repository2.findOne(s.getSyndicTypes().getId()));
    updateSyndic(s, s.getId());
    return ss;
}

@RequestMapping(value="/syndic/{id}", method=RequestMethod.PUT)
public Syndic updateSyndic(
        @RequestBody Syndic s,
        @PathVariable Long id)
{
    s.setId(id);
    return repository.save(


}

打字稿中的服务:

import {Injectable} from "@angular/core";
import {HttpClient, HttpParams, HttpRequest} from "@angular/common/http";

@Injectable()
export class SyndicService
{
host:any = "http://localhost:8080/";
constructor(private http:HttpClient)
{

}

uploadFile(model:any)
{

let formData = new FormData();
formData.append('file', model.file);
formData.append('nom', model.nom);
formData.append('numero', model.numero);
formData.append('email', model.email);
formData.append('motPasse', model.motPasse);
formData.append('tele', model.tele);
formData.append('adresse', model.adresse);
formData.append('honoraires', model.honoraires);
formData.append('nbrVote', model.nbrVote);
formData.append('date1', model.date1);
formData.append('date2', model.date2);
formData.append('photo', model.photo);
formData.append('syndicTypes', model.selectTypeSyndic);

let params = new HttpParams();

const options = {
  params: params,
  reportProgress: true,
};

const req = new HttpRequest('POST', this.host+"syndic", formData, options);
return this.http.request(req);
}
}

打字稿中的控制器:

import { Component, OnInit } from '@angular/core';
import {SyndicService} from "../../services/syndic.service";
import {SyndicTypesModel} from "../../modeles/syndicTypes.model";
import {SyndicModel} from "../../modeles/syndic.model";

@Component({
selector: 'app-ajouter-syndic',
templateUrl: './ajouter-syndic.component.html',
styleUrls: ['./ajouter-syndic.component.css']
})
export class AjouterSyndicComponent implements OnInit {


selectTypeSyndic:any;
tousLesTypeSyndic:any;

numero:any;
nom:any;
email:any;
motPasse:any;
tele:any;
adresse:any;
honoraires:any;
nbrVote:any;
date1:any;
date2:any;
photo:any = null;

syndicTypes:any;
imageURL:any;

fileToUpload:any;

newType:any;

modelTypesSyndic:any;
modelSyndic:any;

constructor(private service:SyndicService) { }

ngOnInit() {
 this.getAllTypes();
}

  ajouterSyndic()
 {
 this.modelSyndic = new SyndicModel();
 this.modelSyndic.numero = this.numero;
 this.modelSyndic.nom = this.nom;
 this.modelSyndic.email = this.email;
 this.modelSyndic.motPasse = this.motPasse;
 this.modelSyndic.tele = this.tele;
 this.modelSyndic.adresse = this.adresse;
 this.modelSyndic.honoraires = this.honoraires;
 this.modelSyndic.nbrVote = this.nbrVote;
 this.modelSyndic.date1 = this.date1;
 this.modelSyndic.date2 = this.date2;
 this.modelSyndic.file = this.fileToUpload;
 this.modelSyndic.photo = this.photo;
 this.modelSyndic.syndicTypes = this.selectTypeSyndic;

  this.service.uploadFile(this.modelSyndic)
    .subscribe(data=>{


      this.modelSyndic = data;
    }, err=>{

      console.log(err);
    }, ()=>{

    });
 }

}

HTML视图:

          <form class="form-horizontal form-label-left" #f1="ngForm" 
         enctype="multipart/form-data">
            <div id="containerAjouterSyndic">

            </div>
                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col- 
     xs-12">Type de Syndic<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <div class="input-group">
                            <select class="form-control" 
         name="selectTypeSyndic"
                                    [(ngModel)]="selectTypeSyndic" >
                              <option *ngFor="let v of tousLesTypeSyndic" 
        [value]="v.id">
                                {{v.designation}}
                              </option>
                            </select>

                            <span class="input-group-btn">
                                <button type="button" class="btn btn- 
        default" data-toggle="modal" data-target="#myModalTypeSyndic">
                                  Ajouter Type Syndic
                                </button>
                              </span>
                          </div>
                        </div>
                      </div>

                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col- 
      xs-12">Numero<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input [(ngModel)]="numero" name="numero" 
   class="form-control col-md-7 col-xs-12" type="text" required>
                        </div>
                      </div>

                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col- 
       xs-12">Nom<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input [(ngModel)]="nom" name="nom" class="form- 
      control col-md-7 col-xs-12" type="text" required>
                        </div>

                      </div>

                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col- 
       xs-12">Email<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input [(ngModel)]="email" name="email" 
     class="form-control col-md-7 col-xs-12" type="email" required>
                        </div>
                      </div>

                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col- 
    xs-12">Mot de Passe<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input [(ngModel)]="motPasse" name="motPasse" 
    class="form-control col-md-7 col-xs-12" type="password" required>
                        </div>
                      </div>

                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col- 
       xs-12">Téléphone<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input [(ngModel)]="tele" name="tele" class="form- 
      control col-md-7 col-xs-12" type="text" required>
                        </div>
                      </div>

                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col- 
      xs-12">Adresse<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <textarea [(ngModel)]="adresse" name="adresse" 
      class="form-control" placeholder="Adresse...">
                            </textarea>
                        </div>
                      </div>

                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col- 
     xs-12">Honoraires<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input [(ngModel)]="honoraires" name="honoraires" 
    class="form-control col-md-7 col-xs-12" type="text" required>
                        </div>
                      </div>

                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col- 
       xs-12">Nombre Vote<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input [(ngModel)]="nbrVote" name="nbrVote" 
    class="form-control col-md-7 col-xs-12" type="text" required>
                        </div>
                      </div>

                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col- 
     xs-12">Date Début Mondat<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input [(ngModel)]="date1" name="date1" 
      type="date" class="form-control col-md-7 col-xs-12"  required>
                        </div>
                      </div>

                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col- 
   xs-12">Date Fin Mondat<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input [(ngModel)]="date2" name="date2" 
      type="date"  class="form-control col-md-7 col-xs-12" required>
                        </div>
                      </div>

                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col- 
     xs-12">Photo<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input name="file" class="form-control col-sm-6 
    col-md-7 col-xs-12"
                                 type="file" required 
    (change)="handleFileInput($event)">
                        </div>
                      </div>

                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col- 
        xs-12">Image Preview</label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <img class="imagePrestataires" [src]="imageURL">
                        </div>
                      </div>
                    </form>

            <!-- Modal Type -->
            <div class="modal fade" id="myModalTypeSyndic" tabindex="-1" 
    role="dialog" aria-labelledby="myModalLabelType">
              <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" 
       aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabelType">Ajouter 
    Type Syndic</h4>
                  </div>
                  <div class="modal-body">
                    <form class="form-horizontal form-label-left" 
      enctype="multipart/form-data">

                      <div id="containerTypeSyndic">

                      </div>

                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col- 
       xs-12">Nouveau Type<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input [(ngModel)]="newType" name="newType" 
    class="form-control col-md-7 col-xs-12" type="text" required>
                        </div>
                        <button type="button" class="btn btn-success"  
     (click)="ajouterTypes()">Ajouter</button>
                      </div>

                    </form>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data- 
      dismiss="modal">Fermer </button>
                  </div>
                </div>
              </div>
            </div>
            <!-- / Modal Options -->



            <div class="ln_solid">

            </div>


</div>
</div>

邮递员生成的有效代码:

POST /syndic HTTP/1.1
Host: localhost:8080
Cache-Control: no-cache
Postman-Token: 568c8846-87a6-c194-2845-bdb6a6da1e69
Content-Type: multipart/form-data; boundary=---- 
WebKitFormBoundary7MA4YWxkTrZu0gW

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="numero"

sdsd
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="nom"

sdsd
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="email"

 sdsd
 ------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="motPasse"

sdsd
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="tele"

sdsd
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="adresse"

sdsd
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="honoraires"

dsdsd
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="nbrVote"

adfg
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="date1"

01/01/1990
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="date2"

01/01/2009
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="file"; 
filename="39320551_2003684179922600_4018500942646214656_n.jpg"
Content-Type: image/jpeg


 ------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="photo"

null
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="syndicTypes"

1
 ------WebKitFormBoundary7MA4YWxkTrZu0gW--

谢谢。

1 个答案:

答案 0 :(得分:0)

On your dates fields you must give a format for each date, for example:

@JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd HH:mm")
private Date date1;