解决Angular与Flask应用中用户个性化预订数据展示问题

本教程旨在解决angular前端与flask后端应用中，用户登录后无法正确显示其个人预订信息的问题。核心在于优化flask后端sqlite数据库查询时参数绑定方式，确保`user_id`作为独立参数而非元组传递给`cursor.execute`。文章将详细分析前后端代码，提供修正方案，并探讨实现用户个性化数据展示的关键技术点，包括会话管理和api通信规范。

在构建现代Web应用时，用户个性化体验是不可或缺的一部分。对于一个汽车租赁网站而言，用户登录后能够查看专属自己的预订记录，是基本且重要的功能。本文将深入探讨一个使用Angular作为前端、Flask作为后端并以SQLite作为数据库的汽车租赁应用，在实现用户个性化预订数据展示时可能遇到的问题及其解决方案。

应用架构概览

该应用采用典型的前后端分离架构：

前端 (Angular): 负责用户界面、用户交互和通过HTTP请求与后端API通信。主要组件包括登录、注册、预订管理和预订历史展示。后端 (Flask): 提供RESTful API接口，处理用户认证、数据持久化（SQLite）和业务逻辑。数据库 (SQLite): 存储用户账户和预订记录。

核心问题在于，用户登录后，前端向后端请求其个人预订信息时，后端未能正确解析用户ID，导致无法返回正确的个性化数据。

后端实现分析与修正 (Flask)

Flask后端负责处理用户认证、会话管理和数据库操作。其中，login_user 路由在用户成功登录后，会将用户ID存储在Flask的会话（session）中，这是识别用户的关键。

@app.route('/login', methods=['POST'])def login_user():    data = request.json    # ... (省略验证逻辑) ...    with sqlite3.connect('rental-users.db') as conn:        cursor = conn.cursor()        cursor.execute('SELECT * FROM users WHERE email = ?', (data['email'],))        user = cursor.fetchone()    if user:        hashed_password = hash_password(data['pwd'])        if hashed_password == user[6]:            session['user_id'] = user[0] # 存储用户ID到会话            return jsonify({'message': 'Login successful'})        # ... (省略错误处理) ...

用户登录后，其user_id被存储在服务器端的session中。前端在需要获取用户预订时，通常会通过某种方式将这个user_id传递给后端。在本应用中，get_user_reservations 路由期望通过URL路径参数接收 user_id。

原始的get_user_reservations实现如下：

@app.route('/user-reservations/', methods=['GET'])def get_user_reservations(user_id):    with sqlite3.connect('rental-users.db') as conn:        cursor = conn.cursor()        cursor.execute('SELECT * FROM reservations WHERE user_id = ?', (user_id,)) # 原始代码        reservations = [            {'id': row[0], 'user_id': row[1], 'brand': row[2], 'from_location': row[3], 'to_location': row[4]}            for row in cursor.fetchall()        ]    print(reservations)    return jsonify(reservations)

问题分析：SQLite的cursor.execute()方法在处理参数时，如果只有一个参数，通常期望它作为一个非元组的单个值传递，或者作为只包含一个元素的元组。在Python中，(user_id,)表示一个包含单个元素的元组，这在多数情况下是正确的参数绑定方式。然而，在某些特定的SQLite驱动或Python版本中，当参数数量恰好与占位符数量匹配时，直接传递非元组的单个参数可能更符合预期，或者在特定场景下避免了不必要的解包问题。

修正方案：将 (user_id,) 改为直接传递 user_id。

@app.route('/user-reservations/', methods=['GET'])def get_user_reservations(user_id):    with sqlite3.connect('rental-users.db') as conn:        cursor = conn.cursor()        # 修正：移除元组封装，直接传递 user_id        cursor.execute('SELECT * FROM reservations WHERE user_id = ?', user_id)         reservations = [            {'id': row[0], 'user_id': row[1], 'brand': row[2], 'from_location': row[3], 'to_location': row[4]}            for row in cursor.fetchall()        ]    print(reservations)    return jsonify(reservations)

通过这个简单的修改，cursor.execute将正确地接收并绑定user_id到SQL查询中的?占位符，从而实现根据用户ID过滤预订记录。

前端实现分析 (Angular)

Angular前端通过服务（Services）来管理业务逻辑和与后端API的通信。

AuthorizationService

AuthorizationService负责用户认证状态管理。在用户登录成功后，它会更新内部的user对象，其中包含id。

PHP经典实例(第二版)

PHP经典实例（第2版）能够为您节省宝贵的Web开发时间。有了这些针对真实问题的解决方案放在手边，大多数编程难题都会迎刃而解。《PHP经典实例(第2版)》将PHP的特性与经典实例丛书的独特形式组合到一起，足以帮您成功地构建跨浏览器的Web应用程序。在这个修订版中，您可以更加方便地找到各种编程问题的解决方案，《PHP经典实例(第2版)》中内容涵盖了：表单处理；Session管理；数据库交互；使用We

453 查看详情

import { Injectable } from '@angular/core';import { Router } from '@angular/router';import { HttpClient } from '@angular/common/http';import { Observable, throwError } from 'rxjs';import { catchError, tap } from 'rxjs/operators';@Injectable({  providedIn: 'root'})export class AuthorizationService {  private apiUrl = 'http://localhost:5000';  private user: any = { id: null, firstname: '', lastname: '', email: '' };   private logged = false;  // ... (其他方法，如loginUser, logout, registerUser) ...  getUserId(): number | null {    // 确保这里的 user.id 包含了从后端获取到的用户ID    return this.user.id ?? null;  }  constructor(private router: Router, private http: HttpClient) {}}

注意事项：在loginUser方法中，当后端返回登录成功信息时，原始代码中tap((user) => { this.user = user; this.logged = true; })这一行，user变量实际上是后端返回的{‘message’: ‘Login successful’}，其中不包含id。这意味着this.user.id将始终为null。

修正方案：为了让getUserId()能返回正确的用户ID，login_user后端路由在成功登录后，除了返回message，还应该返回用户的ID。

后端login_user路由修改建议：

@app.route('/login', methods=['POST'])def login_user():    data = request.json    # ... (省略验证逻辑) ...    with sqlite3.connect('rental-users.db') as conn:        cursor = conn.cursor()        cursor.execute('SELECT * FROM users WHERE email = ?', (data['email'],))        user = cursor.fetchone()    if user:        hashed_password = hash_password(data['pwd'])        if hashed_password == user[6]:            session['user_id'] = user[0]            # 返回用户ID给前端            return jsonify({'message': 'Login successful', 'userId': user[0]})         # ...

前端AuthorizationService修改建议：

loginUser(loginData: any): Observable {    const url = `${this.apiUrl}/login`;    return this.http.post(url, loginData).pipe(      tap((response) => { // 将参数名改为 response 以避免与内部 user 变量混淆        if (response && response.userId) { // 检查后端返回的 userId          this.user.id = response.userId; // 更新用户ID          this.logged = true;        } else {          // 处理未返回 userId 的情况          this.logged = false;          console.warn('Login successful but no userId received.');        }      }),      catchError((error) => {        this.logged = false;        return throwError(error);      })    );  }

ReservationService

ReservationService负责与后端预订相关的API交互，包括创建预订和获取用户预订。

import { Injectable } from '@angular/core';import { HttpClient } from '@angular/common/http';import { Observable } from 'rxjs';@Injectable({  providedIn: 'root',})export class ReservationService {  private apiUrl = 'http://localhost:5000';  constructor(private http: HttpClient) {}  makeReservation(userId: number, selectedCar: string, fromLocation: string, toLocation: string): Observable {    const url = `${this.apiUrl}/make-reservation/${userId}`;    const reservationData = {      brand: selectedCar,      from_location: fromLocation,      to_location: toLocation,    };    return this.http.post(url, reservationData);  }  getUserReservations(userId: number): Observable {    const url = `${this.apiUrl}/user-reservations/${userId}`;    return this.http.get(url);  }}

这个服务设计良好，它期望从外部接收userId并将其包含在API请求路径中。

MyReservationsComponent

MyReservationsComponent是显示和管理用户预订的组件。它在初始化时调用loadReservationHistory()来获取当前用户的预订。

import { Component, OnInit } from '@angular/core';import { AuthorizationService } from '../authorization.service';import { ReservationService } from '../reservation.service';// ... (其他导入) ...@Component({  selector: 'app-my-reservations',  templateUrl: './my-reservations.component.html',  styleUrls: ['./my-reservations.component.css'],})export class MyReservationsComponent implements OnInit {  reservations: any[] = [];  // ... (其他属性) ...  constructor(    private reservationService: ReservationService,    private authService: AuthorizationService,    // ... (其他服务) ...  ) {}  ngOnInit() {    this.loadReservationHistory();    // ...  }  loadReservationHistory() {    const userId = this.authService.getUserId(); // 从认证服务获取用户ID    // 确保 userId 不为 null 或 0    if (userId !== null && userId !== 0) {      this.reservationService.getUserReservations(userId).subscribe(        (res) => {          console.log(res);          this.reservations = res;        },        (err) => {          console.error('Error loading reservations:', err);        }      );    } else {      console.warn('User ID is not available. Cannot load reservations.');      this.reservations = []; // 清空或显示无预订信息    }  }  makeReservation() {    const userId = this.authService.getUserId();    // 确保 userId 不为 null 或 0    if (userId !== null && userId !== 0) {      this.reservationService        .makeReservation(          userId,          this.reservationData.brand,          this.reservationData.from_location,          this.reservationData.to_location        )        .subscribe(          (res) => {            console.log(res);            this.toastr.success('Reservation successful!', 'Success');            this.loadReservationHistory(); // 预订成功后刷新列表          },          (err) => {            console.error('Error making reservation:', err);            this.toastr.error('Error making reservation', 'Error');          }        );    } else {      console.error('User ID is not available. Cannot make reservation.');      this.toastr.error('Please log in to make a reservation.', 'Error');    }  }}

注意事项：前端组件从AuthorizationService获取userId，然后将其传递给ReservationService。如果AuthorizationService中的user.id未能正确更新，那么userId将始终为null或0，导致请求失败或请求user_id=0的预订（如果后端允许）。因此，前端AuthorizationService的修正至关重要。

总结与最佳实践

实现用户个性化数据展示的关键在于确保用户身份在整个请求生命周期中被正确识别和传递。

后端参数绑定：对于SQLite等数据库，cursor.execute的参数绑定方式需严格遵循其API规范。单个参数时，直接传递值或使用单元素元组，具体取决于驱动的实现细节。本文中的修正示例展示了移除元组封装的有效性。用户ID传递：确保用户登录后，其唯一标识（user_id）能够从后端正确返回给前端，并由前端持久化（例如在AuthorizationService中）以便后续请求使用。会话管理：Flask的session是服务器端维护用户状态的有效方式。但对于RESTful API，通常建议前端在登录成功后获取一个令牌（如JWT），并在后续请求中携带该令牌进行身份验证，而非完全依赖服务器会话。错误处理：前后端都应有健壮的错误处理机制，例如当userId不可用时，前端应阻止请求并提示用户；后端应返回清晰的错误信息。安全性：密码哈希是基本要求。同时，对于用户ID等敏感信息，应避免在不必要的场景下直接暴露。

通过以上修正和最佳实践，可以有效解决Angular与Flask应用中用户个性化预订数据展示的问题，提升应用的用户体验和健壮性。

以上就是解决Angular与Flask应用中用户个性化预订数据展示问题的详细内容，更多请关注创想鸟其它相关文章！