node.js - 来自 API express 和 Angular 10 的 post 方法
问题描述
我正在尝试使用 angular 和 express.js 做一个 post 方法来做到这一点,我创建了一个名为 index.js 的文件,我在其中添加了不同的方法,但是在 Angular 的前端我想简单地添加数据,如何处理反应形式 ? 我遵循了几个教程,但我尽力了
谢谢你。
index.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
const parkings = require('../parkings.json');
app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
next();
});
app.use(express.json());
// Get all parkings details
app.get('/parkings', (req, res) => {
res.status(200).json(parkings)
});
// Get parkings by id
app.get('/parkings/:id', (req, res) => {
const id = parseInt(req.params.id)
const parking = parkings.find(parking => parking.id === id)
res.status(200).json(parking)
});
// post
app.post('/parkings', (req, res) => {
parkings.push(req.body)
res.status(200).json(parkings)
})
app.listen(3000, () => {
console.log("Listening to port 3000");
})
服务
url: string = ('http://localhost:3000');
parkingForm = new FormGroup({
name: new FormControl(),
type: new FormControl(),
city: new FormControl()
});
array: any [];
constructor(private http: HttpClient) { }
get(): Observable<any> {
return this.http.get<any>(`${this.url}/parkings`);
}
postMethod() {
let myFormData = new FormData();
myFormData.append('name', this.parkingForm.value.name);
myFormData.append('type', this.parkingForm.value.type);
myFormData.append('city', this.parkingForm.value.city);
return this.http.post(this.url, myFormData,
{ responseType: 'text' }).subscribe(
(response) => this.array.push(response),
(error) => console.log(error)
);
}
ts.文件
export class AppComponent implements OnInit {
getTab: any = [];
constructor(private parkingsService: ParkingsService) {}
ngOnInit() {
this.parkingsService.get().subscribe(data => {
this.getTab = data;
})
};
add() {
this.parkingsService.postMethod();
}
}
html
<table>
<tr>
<th>name</th>
<th>type</th>
<th>ville</th>
</tr>
<tr *ngFor="let parking of getTab">
<td>{{parking.name}}</td>
<td>{{parking.type}}</td>
<td>{{parking.city}}</td>
</tr>
</table>
<form [formGroup]="parkingForm">
<div class="form-group">
<input type="text" placeholder="enter name" name="name" formControlName="name"><br>
<input type="text" placeholder="enter type" name="type" formControlName="type"><br>
<input type="text" placeholder="enter city" name="city" formControlName="city"><br>
<button (click)="add()">Ajouter</button>
</div>
</form>
解决方案
parkingForm: FormGroup;
this.parkingForm = this.formBuilder.group({
name: ['', [Validators.required]],
type: ['', [Validators.required]],
city: ['', [Validators.required]]
});
constructor(private formBuilder: FormBuilder) { }
ngOnInit(){
}
add() {
let bodyJSON={
name:this.parkingForm.get('name').value,
type:this.parkingForm.get('type').value,
city:this.parkingForm.get('city').value
}
this.parkingsService.postMethod(bodyJSON);
}
postMethod(data) {
let myFormData = new FormData();
myFormData.append('name', data.name);
myFormData.append('type', data.type);
myFormData.append('city', data.city);
return this.http.post(this.url, myFormData,
{ responseType: 'text' }).subscribe(
(response) => this.array.push(response),
(error) => console.log(error)
);
}
推荐阅读
- android - 使用 MVVM 重用组件的最佳实践
- json - 在 Spring Boot 中未验证 JSON 数据类型
- c++ - 为什么我们不能重新分配参考
- python - 具有多个索引的 Pandas 数据框重塑
- rabbitmq - 如何将 Red Hat 中间件中的 jms 设置为 RabbitMQ
- c - 在文件中保存带有指针成员的结构
- r - R中有没有办法从cv.glmnet确定AIC?
- python-3.x - sqlite3.OperationalError:3 列的 1 个值
- excel - PDF 被保存两次而不是一次
- vb.net - VB writeline 将损坏的行写入文本文件