将更新数据从 Angular 中的 Angular SPA 解析到 Laravel 后端时出现问题
Problem parsing updated Data from Angular SPA in Angular to a Laravel backend
我正在开发单页应用程序,前端使用 Angular 8,后端使用 Laravel。我正在执行一些 CRUD 操作,在编辑部分,我有一个表单,其值是来自后端的用户值。当用户更新值时,我正在捕获他的数据并通过 JWT 发送到后端,这工作正常。
问题是当我使用 put 方法(在后端路径上从前端传递更新的数据)时出现错误。当我使用 post 方法 时,数据会正确通过。
从逻辑上讲这是错误的,因为在更新数据时将put方法与特定资源的id一起使用。我需要帮助从 Angular 前端传递带有 URL 的 id,以便我可以使用此路由更新 Laravel 后端上的数据:Route::put ('editedData/{id}', 'SubmitFormController@updateData');
请帮忙?
Edit.component.html 包含要更新值的表单
<form #editForm="ngForm" (ngSubmit)="onSubmit(editForm)">
<!--Errors-->
<div class="alert alert-danger" [hidden]="!error">
{{ error }}
</div>
<!--Children details-->
<div class="card-header childheader">Update Details</div>
<div class="card-body">
<div class="form-group row">
<div class="col-sm-12">
<label for="childFirstName">Child Name</label>
<input
type="text"
name="childName"
class="form-control"
[ngModel]="singleUser?.name"
id="childName"
placeholder="Child FirstName">
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<label for="childAge">Child Age</label>
<select
class="form-control"
id="chAge"
name="childAge"
[ngModel]="singleUser?.age"
required>
<option value="" selected disabled> Child's Age</option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
</select>
</div>
<div class="col-sm-6">
<label for="childGender">Child Gender</label>
<select
class="form-control"
id="childGender"
name="childGender"
[ngModel]="singleUser?.gender"
required>
<option value="" style="display:none"> Child's Gender</option>
<option value="Male"> Male</option>
<option value="Female"> Female </option>
</select>
</div>
</div>
<!--END children-->
<div class="form-group row">
<div class="col-sm-12">
<button
type="submit"
class="btn btn-lg btn-success btn-block"
[disabled]="!editForm.valid">Update Details </button>
</div>
</div>
</div>
</form>
edit.component.ts 捕获表单数据
import { Component, OnInit } from '@angular/core';
import { SharedService } from 'src/app/Services/shared.service';
import { AuthService } from 'src/app/Services/auth.service';
@Component({
selector: 'app-edit',
templateUrl: './edit.component.html',
styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {
public singleUser : any[];
public error = null;
constructor(
private Shared : SharedService,
private Auth:AuthService,
) { }
onSubmit(formValue) {
const capture = {
UserName: formValue.value.childName,
Password: formValue.value.childAge,
Gender: formValue.value.childGender,
};
return this.Auth
.editedData(capture)
.subscribe(
data => console.log(data),
error => console.log(error),
);
}
ngOnInit() {
this.Shared.edit$.subscribe(message => this.singleUser = message);
}
}
向后端提交更新数据的授权服务
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class AuthService {
private baseUrl = 'http://localhost/Laravel-anngular-spa/backend/public/api';
constructor(private http:HttpClient) {}
editedData(data:any){
return this.http.post(`${this.baseUrl}/editedData` , data);
}
}
Laravel 我要使用的后端路由
Route::put('editedData/{id}', 'SubmitFormController@updateData');
Laravel 后端控制器
public function updateData(Request $request){
dd($request->all());
}
由于您正在从 Angular 前端发出 post 请求,而 Laravel 的路由仅对 PUT
方法作出反应,因此您需要添加一个 [= Angular 前端中的 12=] 字段的值为 PUT
以便 Laravel 将其理解为 PUT
请求。参见 form-method-spoofing。
因此,在您的 Angular front-end 中添加如下内容:
const capture = {
UserName: formValue.value.childName,
Password: formValue.value.childAge,
Gender: formValue.value.childGender,
_method : 'PUT'
};
也就是说,您也可以尝试使用 Angular HttpClient 提供的 PUT 方法。您很可能会避免上述设置,只需执行 this.http.put(//your code).
我正在开发单页应用程序,前端使用 Angular 8,后端使用 Laravel。我正在执行一些 CRUD 操作,在编辑部分,我有一个表单,其值是来自后端的用户值。当用户更新值时,我正在捕获他的数据并通过 JWT 发送到后端,这工作正常。
问题是当我使用 put 方法(在后端路径上从前端传递更新的数据)时出现错误。当我使用 post 方法 时,数据会正确通过。
从逻辑上讲这是错误的,因为在更新数据时将put方法与特定资源的id一起使用。我需要帮助从 Angular 前端传递带有 URL 的 id,以便我可以使用此路由更新 Laravel 后端上的数据:Route::put ('editedData/{id}', 'SubmitFormController@updateData');
请帮忙?
Edit.component.html 包含要更新值的表单
<form #editForm="ngForm" (ngSubmit)="onSubmit(editForm)">
<!--Errors-->
<div class="alert alert-danger" [hidden]="!error">
{{ error }}
</div>
<!--Children details-->
<div class="card-header childheader">Update Details</div>
<div class="card-body">
<div class="form-group row">
<div class="col-sm-12">
<label for="childFirstName">Child Name</label>
<input
type="text"
name="childName"
class="form-control"
[ngModel]="singleUser?.name"
id="childName"
placeholder="Child FirstName">
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<label for="childAge">Child Age</label>
<select
class="form-control"
id="chAge"
name="childAge"
[ngModel]="singleUser?.age"
required>
<option value="" selected disabled> Child's Age</option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
</select>
</div>
<div class="col-sm-6">
<label for="childGender">Child Gender</label>
<select
class="form-control"
id="childGender"
name="childGender"
[ngModel]="singleUser?.gender"
required>
<option value="" style="display:none"> Child's Gender</option>
<option value="Male"> Male</option>
<option value="Female"> Female </option>
</select>
</div>
</div>
<!--END children-->
<div class="form-group row">
<div class="col-sm-12">
<button
type="submit"
class="btn btn-lg btn-success btn-block"
[disabled]="!editForm.valid">Update Details </button>
</div>
</div>
</div>
</form>
edit.component.ts 捕获表单数据
import { Component, OnInit } from '@angular/core';
import { SharedService } from 'src/app/Services/shared.service';
import { AuthService } from 'src/app/Services/auth.service';
@Component({
selector: 'app-edit',
templateUrl: './edit.component.html',
styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {
public singleUser : any[];
public error = null;
constructor(
private Shared : SharedService,
private Auth:AuthService,
) { }
onSubmit(formValue) {
const capture = {
UserName: formValue.value.childName,
Password: formValue.value.childAge,
Gender: formValue.value.childGender,
};
return this.Auth
.editedData(capture)
.subscribe(
data => console.log(data),
error => console.log(error),
);
}
ngOnInit() {
this.Shared.edit$.subscribe(message => this.singleUser = message);
}
}
向后端提交更新数据的授权服务
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class AuthService {
private baseUrl = 'http://localhost/Laravel-anngular-spa/backend/public/api';
constructor(private http:HttpClient) {}
editedData(data:any){
return this.http.post(`${this.baseUrl}/editedData` , data);
}
}
Laravel 我要使用的后端路由
Route::put('editedData/{id}', 'SubmitFormController@updateData');
Laravel 后端控制器
public function updateData(Request $request){
dd($request->all());
}
由于您正在从 Angular 前端发出 post 请求,而 Laravel 的路由仅对 PUT
方法作出反应,因此您需要添加一个 [= Angular 前端中的 12=] 字段的值为 PUT
以便 Laravel 将其理解为 PUT
请求。参见 form-method-spoofing。
因此,在您的 Angular front-end 中添加如下内容:
const capture = {
UserName: formValue.value.childName,
Password: formValue.value.childAge,
Gender: formValue.value.childGender,
_method : 'PUT'
};
也就是说,您也可以尝试使用 Angular HttpClient 提供的 PUT 方法。您很可能会避免上述设置,只需执行 this.http.put(//your code).