Angular 通过 Json 将复杂对象发送到 Flask答案

【问题标题】：Angular send complicated object to Flask by JsonAngular 通过 Json 将复杂对象发送到 Flask
【发布时间】：2021-07-21 07:45:02
【问题描述】：

我是使用 Angular 的新手。我必须将一个复杂的对象发送到后端。但我目前只知道如何传递简单的信息，例如数字或字符串，通过使用Observable 和 URL。

我想知道如何在Angular中将对象（id&note）变成一个json对象，然后将其传递到后端。

代码：

(1) Angular：dealing.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';


@Injectable({
    providedIn: 'root'
})
export class PostDealingService {
    private URL_SEND_NOTE = 'http://127.0.0.1:5000/note'

    constructor(
        private http: HttpClient
      ) { }

    sendNote(id: string, note: string): Observable<any> {       
        return this.http.get(`${this.URL_SEND_NOTE}/${id}&${note}`)
    }
}

(2) 角度：table.component.ts

  /** about note */
  sendNote(id: number, event: any) {
    if(event.target.value.length <= 0) {
      return
    }
    // event.target.value = note
    this.pds.sendNote(String(id), event.target.value)
    .subscribe(
      data => {
        console.log("end note normal", data)
      },
      error => {
        console.log('error')
      }
    )
  }

(3) 烧瓶：

@app.route('/note/<id>&<note>', methods=['get', 'post'])
def updateNote(id, note):
    print(id, note)
    c_33.updateNote(conn_33, cur_33, id, note)
    return "1"

版本：

(1) 角度：

Angular CLI: 9.1.15
Node: 10.15.3
OS: win32 x64

Angular: 9.1.13
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.15
@angular-devkit/build-angular     0.901.15
@angular-devkit/build-optimizer   0.901.15
@angular-devkit/build-webpack     0.901.15
@angular-devkit/core              9.1.15
@angular-devkit/schematics        9.1.15
@angular/cli                      9.1.15
@ngtools/webpack                  9.1.15
@schematics/angular               9.1.15
@schematics/update                0.901.15
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

(2) npm

6.14.5

【问题讨论】：

您正在使用获取请求，而不是您可以使用发布请求来更新/创建笔记
@Mar 是的，你是对的！感谢您的回复！ :)

标签： json angular typescript flask

【解决方案1】：

您正在寻找 POST 请求：https://angular.io/guide/http#making-a-post-request

sendNote(id: string, note: string): Observable<any> {       
        return this.http.post(this.URL_SEND_NOTE, {id: id, note: note});
}

然后您可以在后端使用request.get_json() 来检索 POST 正文。

【讨论】：

【解决方案2】：

如果我理解正确，您想更新现有注释。在这种情况下，您应该使用 PUT 请求。 https://angular.io/guide/http#making-a-put-request

updateNote(id: string, note: string): Observable<any> {       
    return this.http.put(this.URL_SEND_NOTE + '/' + id, note);
}

或者如果你想在请求正文中有 id：

updateNote(id: string, note: string): Observable<any> {       
    return this.http.put(this.URL_SEND_NOTE + '/' + id, {id: id, note: note});
}

Flask 端变更请求方法：

@app.route('/note/<id>', methods=['put'])
def updateNote(id):
    ...

【讨论】：