如何将Flask后端的JSON数据传递至Angular前端并存储

嘿，我来帮你搞定这个问题！你已经把Flask接口调通了，接下来就是在Angular里处理返回数据并存储啦，其实没那么复杂，我一步步给你讲清楚：

第一步：定义数据类型（可选但推荐） #

TypeScript最看重类型约束，我们可以先定义一个接口来对应后端返回的JSON结构，这样写代码的时候会有清晰的类型提示，不容易出错：

// 在你的组件文件里定义这个接口
interface WeatherData {
  location: string;
  condition: string;
  temperature: number;
}

第二步：在组件中声明存储变量 #

在组件类里声明一个变量，用来保存接口返回的天气数据：

// 组件类内的变量
weatherInfo: WeatherData | null = null;

第三步：修改请求函数，订阅并存储数据 #

HttpClient的post请求返回的是Observable对象，必须通过subscribe方法才能拿到实际的接口返回数据。我们修改你的hasclicked函数，在请求成功后把数据存到刚才声明的变量里，甚至还能存到本地存储（localStorage）实现持久化：

hasclicked() {
  // 用<WeatherData>指定返回数据的类型，让TypeScript做类型校验
  this.HttpClient.post<WeatherData>("http://127.0.0.1:5000/weather/loc", { "location":"London" })
    .subscribe({
      next: (responseData) => {
        // 把返回的JSON数据存到组件变量里，方便在组件和模板中使用
        this.weatherInfo = responseData;
        console.log("拿到的天气数据：", this.weatherInfo);
        
        // 如果需要持久化存储（比如刷新页面后还能看到数据），可以存到localStorage
        localStorage.setItem('savedWeather', JSON.stringify(responseData));
      },
      error: (error) => {
        // 处理请求失败的情况，比如打印错误信息排查问题
        console.error("请求接口出错了：", error);
      }
    });
}

第四步：（重要）解决跨域问题 #

因为Flask默认跑在5000端口，Angular默认跑在4200端口，浏览器会阻止跨域请求。你需要在Flask项目里安装并配置flask-cors：

1. 先安装依赖：

pip install flask-cors

2. 修改Flask代码：

from flask import Flask, request, jsonify
from flask_cors import CORS  # 导入CORS模块

app = Flask(__name__)
CORS(app)  # 允许所有跨域请求，开发环境可以这么用

# 你的接口代码...
@app.route('/weather/loc', methods=["POST","GET"])
def say_hi():
    location = request.form.get("location", default="London")
    try:
        location, condition, temp = weatherAtLocation(location)
        return_dic = {
            "location":location,
            "condition":condition.lower(),
            "temperature": temp
        }
        return jsonify(return_dic)
    except:
        return jsonify({})

第五步：在模板中使用存储的数据 #

如果想在页面上展示这些数据，可以在组件的HTML模板里这样写：

<div *ngIf="weatherInfo">
  <h3>当前天气信息</h3>
  <p>地点：{{ weatherInfo.location }}</p>
  <p>状况：{{ weatherInfo.condition }}</p>
  <p>温度：{{ weatherInfo.temperature }}℃</p>
</div>

这样一来，当你点击触发hasclicked函数后，就能顺利拿到并存储Flask返回的JSON数据啦～

内容的提问来源于stack exchange，提问作者Learning is a mess