java - 与邮递员一起工作时无法通过表单发送 POST 请求
问题描述
我在基于 Angular 5 的前端有一个错误 400，在基于 Spring-Boot 的后端没有错误。当我向邮递员发送请求时，它工作正常。我不知道我的表格有什么问题。
这是 Syndic 实体：
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;
}
休息控制器：
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">×</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--
谢谢。
解决方案
在您的日期字段中，您必须为每个日期指定格式，例如：
@JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd HH:mm")
private Date date1;
推荐阅读
- solrcloud - 如何将 Solr Cloud 与 Norconex 集成？
- r - R中的一种循环遍历每一行并运行一个临时的2乘2的方法，我可以将统计结果转换为相应的行
- azure - 不使用 IN 运算符从另一表的列中搜索一列的子字符串
- reactjs - 如何从数据对象渲染图像？（反应）
- python - 我们可以将列表项转换为 ListNames 吗？
- python - 如何使用python将非分区表复制到bigquery中的摄取时间分区表中？
- ios - 我可以使用 messageKIt 在 swift 5 ios 中创建像这样的自定义单元格吗？
- javascript - 带有旋转箭头的下拉内容（css/js）
- python-3.x - 尽管安装了 opencv-python，但仍无法导入 cv2
- google-cloud-firestore - 在 Android 上需要 Firebase 人脸检测和识别方面的帮助，谁能指导我（编程语言：- JAVA）？