使用 Angular 作为客户端（前端），使用 Flask 服务器作为后端

Question

我需要创建一个系统，其中包括：

• 客户端 - Angular 应用程序
• 服务器 - Flask 服务器作为后端，使用一些 python 脚本形成本地系统

我真的不知道如何让客户端向服务器请求东西。我尝试过这样的事情：

在烧瓶中

app.py

：

@app.route('/getconcepts', methods=['GET'])
  def get_concepts():
    [...]
    return jsonify(concepts)
if __name__ == '__main__':
    app.run(port=5000, debug=True)

然后，在 Angular 客户端中：

export class LeftNavigationComponent implements OnInit {
  archiveLinkList: Archivelink[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit(): void {

    this.http.get<string[]>('http://localhost:5000/getconcepts').subscribe(
      (concepts: string[]) => {

        this.archiveLinkList = conceptos.map((concept, index) => ({
          // Archivelink parameters
          id: index,
          concept: encodeURIComponent(concept),
          url: `/display?concept=${encodeURIComponent(concepto)}`
        }));
      },

      error => {
        console.error('Error fetching concepts:', error);
      }
    );
  }
}

可以通过 localhost:4200 访问 Angular 客户端

它不起作用，我找不到任何可以解决我的问题的东西。

Answer 1

我回来了，我解决了这个问题。我想我可能会提供一个答案，以防有人遇到同样的问题。

---

说实话，这花了我一段令人尴尬的时间，但我正在从一种已弃用的解释转向另一种解释。

好的，首先，https://angular.io/guide/build（“代理到后端”部分）方法已被弃用，特别是步骤 3：将以下代码添加到 angular.json。

"options": {
    "browserTarget": "your-application-name:build",
    "proxyConfig": "src/proxy.conf.json"
}

现在，我之前正在学习本教程：构建您的第一个 Angular 应用程序

我没有完成，因为我认为（错误）我不需要我的项目的一些结束步骤。嗯，我做到了。

这是我解决所有问题的方法，可能还有另一种方法，但这最终对我有用：

在 Angular 应用程序中创建服务。

Angular 服务为您提供了一种分离 Angular 应用程序数据的方法 以及可由应用程序中的多个组件使用的函数。

这是可选的，但我还是这么做了，只是为了学会如何做。

2. 使用注射剂。

import { Injectable } from '@angular/core';: 导入 Injectable 来自 Angular 的函数，用于将类标记为服务 可以注入到其他类中。

3. 按照教程的这一步添加 HTTP 通信

这就是连接数据的方式，数据必须在路由中发布，我的是 localhost:5000/getconcepts

所以，这是我创建来测试它的服务：

import { Injectable } from '@angular/core';
import { Archivelink } from './archivelink'; // my data class

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor() { }
  url = 'http://localhost:5000/getconcepts';
  async getAllArchiveLink(): Promise<Archivelink[]> { // uses asynchronous code to make a GET request
    const data = await fetch(this.url);
    return await data.json() ?? [];
  }
}

4. 我们在我们想要的组件中使用该服务
   从 '../myservice.service' 导入 {MyService}； 导出类 LeftNavigationComponent{ archiveLinkList: Archivelink[] = []; myService: MyService = 注入(MyService); 构造函数（）{ this.myService.getAllArchiveLink().then((archiveLinkList: Archivelink[]) => { this.archiveLinkList = archiveLinkList; }); } }

5. 修改app.py文件，使一切正常工作

我遇到的一个错误是我做了GET请求但没有显示数据。在查看导航器终端中的日志时，我发现这是一个 CORS 错误。

from flask import Flask, request
from flask_cors import CORS

app = Flask("api test", static_url_path='/static')
CORS(app) # VERY IMPORTANT
@app.route('/getconcepts', methods=['GET'])
def get_concepts():    
    [... get the concepts (in my code, as a json file) ...]
    return concepts
if __name__ == '__main__':
    app.run(port=5000, debug=True)

就是这样，幸运的是，它对我来说效果很好。

希望这对某人有帮助！祝你度过美好的一天（对我来说是夜晚，jeje）：D