我正在开发一个用户注册页面,我在正面使用 angular,在背面使用弹簧启动,我遇到的问题是启动应用程序时出现此错误:
这是我的用户类:
export class User {
constructor (
IDENTIFIANT: Number,
EMPLOI: Number,
ENTITE: Number,
LOGIN: string,
MOTDEPASSE: string,
NOM: string,
PRENOM: string,
STATUT: string,
DATEEFFET: Date,
DATEFIN: Date,
CREELE: Date,
CREEPAR: Date,
MOTIFDEDESACTIVATION: string,
ANNULEPAR: number,
ANNULELE: Date,
EMAIL: string,
CONFIRMATIONMOTDEPASSE: string
){}
}
这是我的 component.html :
<div class="inscription">
<!-- Default form register -->
<form class="text-center border border-light p-5">
<p class="h4 mb-4">Sign up</p>
<div class="form-row mb-4">
<div class="col">
<!-- First name -->
<input type="text" id="prenom" class="form-control" [(ngModel)]="user.prenom" placeholder="Votre prenom">
</div>
<div class="col">
<!-- Last name -->
<input type="text" id="nom" class="form-control" [(ngModel)]="user.nom" placeholder="Votre nom">
</div>
</div>
<!-- E-mail -->
<input type="email" id="email" class="form-control mb-4" [(ngModel)]="user.email" placeholder="Votre email">
<!-- Login -->
<input type="text" id="login" class="form-control mb-4" [(ngModel)]="user.login" placeholder="Votre login">
<!-- Password -->
<input type="password" id="password" class="form-control" [(ngModel)]="user.motdepasse" placeholder="Votre mot de passe"
aria-describedby="defaultRegisterFormPasswordHelpBlock">
<!-- Confirmation mot de passe -->
<input type="password" id="password-confirmation" class="form-control"
placeholder="Confirmez votre mot de passe" [(ngModel)]="user.confirmationmotdepasse" aria-describedby="defaultRegisterFormPasswordHelpBlock">
<!-- Entite -->
<select class="form-control" id="entite" [(ngModel)]="user.entite">
<option value="" selected disabled>Votre entité</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<!-- Emploi -->
<select class="form-control" id="emploi" [(ngModel)]="user.emploi">
<option value="" selected disabled >Votre emploi</option>
<ul class="list-unstyled navbar-list">
<li *ngFor="let tempAllEmploi of allEmploi">
<option>{{ tempAllEmploi.NOM}}</option>
</li>
</ul>
</select>
<!-- Sign up button -->
<button mdbBtn color="info" block="true" class="my-4" type="submit" id="btn-inscription" class="btn-primary btn-lg" (click)="inscriptionts()">Valider</button>
</form>
<!-- Default form register -->
</div>
更多地关注这段代码:
<input type="text" id="prenom" class="form-control" [(ngModel)]="user.prenom" placeholder="Votre prenom">
您可以在这里看到我创建了具有“名字”变量的用户类,并且我在我的 html 代码中使用了带有 user.prenom 的 ngModel,所以我看不到错误可能来自哪里:/
这是我的 component.ts :
import { Component, OnInit } from '@angular/core';
import { User } from 'src/app/model/user';
import { RestapiService } from 'src/app/restapi.service';
import { Emploi } from 'src/app/model/emploi';
@Component({
selector: 'app-inscription',
templateUrl: './inscription.component.html',
styleUrls: ['./inscription.component.css']
})
export class InscriptionComponent implements OnInit {
allEmploi: Emploi[];
user: any;
//user: Users= new Users(0,0,0,"","","","","",new Date("dd-mm-yyyy"),new Date("dd-mm-yyyy"),new Date("dd-mm-yyyy"),new Date("dd-mm-yyyy"),"",0,new Date("dd-mm-yyyy"),"","");
constructor(private Userservice: RestapiService) { }
ngOnInit(): void {
this.getAllEmploi();
}
public getAllEmploi(){
this.Userservice.getEmploi().subscribe(
data => {
this.allEmploi=data;
}
);
}
public inscriptionts(){
let resp=this.Userservice.inscription(this.user);
resp.subscribe((data)=> this.user=data);
}
}
这是我的服务:
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Emploi } from './model/emploi';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class RestapiService {
url_getAllEmploi="http://localhost:8484/emploi/getall";
constructor(private http:HttpClient) { }
public inscription(user) {
return this.http.post("http://localhost:8484/addUser", user);
}
public getEmploi(): Observable<Emploi[]> {
return this.http.get<Emploi[]>(this.url_getAllEmploi);
}
public login(username:string, password:string) {
const headers = new HttpHeaders({Authorization: 'Basic ' + btoa(username+":"+password)})
return this.http.get("http://localhost:8484/", {headers, responseType:'text' as 'json'});
}
public getUsers() {
let username="hr";
let password="hr";
const headers = new HttpHeaders({Authorization: 'Basic ' + btoa(username+":"+password)});
return this.http.get("http://localhost:8484/getUsers", {headers});
}
}
有人能帮助我吗 ?