Angular与Flask全栈应用中实现用户个性化数据展示教程-Python教程-PHP中文网

angular与flask全栈应用中实现用户个性化数据展示教程

本教程将指导您如何在基于Angular前端和Flask后端的全栈应用中，实现一个核心的个性化功能：确保登录用户只能看到属于自己的预订记录。我们将从后端数据库设计、用户认证机制，到前端服务与组件的实现，全面解析这一过程，并特别关注在数据查询中可能遇到的参数绑定问题。

一、后端架构：Flask与SQLite的数据管理

后端采用Flask框架，结合SQLite数据库，负责用户管理、认证以及预订数据的存储与检索。

1. 数据库初始化与表结构

首先，定义并创建两个核心数据库表：users 用于存储用户信息，reservations 用于存储预订信息，并通过 user_id 建立关联。

import sqlite3
import hashlib
from flask import Flask, request, jsonify, session
from flask_cors import CORS

app = Flask(__name__)
CORS(app)
app.config['SECRET_KEY'] = 'your_secret_password_here' # 生产环境请使用更复杂的密钥

def hash_password(password):
    """对密码进行SHA256哈希处理"""
    return hashlib.sha256(password.encode()).hexdigest()

def create_users_table():
    """创建用户表"""
    with sqlite3.connect('rental-users.db') as conn:
        cursor = conn.cursor()
        cursor.execute('''
            CREATE TABLE IF NOT EXISTS users (
                id INTEGER PRIMARY KEY AUTOINCREMENT,
                firstname TEXT NOT NULL,
                lastname TEXT NOT NULL,
                email TEXT UNIQUE NOT NULL,
                mobile TEXT NOT NULL,
                gender TEXT NOT NULL,
                hashed_password TEXT NOT NULL
            )
        ''')
        conn.commit()

def create_reservations_table():
    """创建预订表，包含外键user_id关联用户表"""
    with sqlite3.connect('rental-users.db') as conn:
        cursor = conn.cursor()
        cursor.execute('''
            CREATE TABLE IF NOT EXISTS reservations (
                id INTEGER PRIMARY KEY AUTOINCREMENT,
                user_id INTEGER,
                brand TEXT NOT NULL,
                from_location TEXT NOT NULL,
                to_location TEXT NOT NULL,
                FOREIGN KEY (user_id) REFERENCES users (id)
            )
        ''')
        conn.commit()

create_users_table()
create_reservations_table()

登录后复制

2. 用户认证与会话管理

注册 (/register): 接收用户数据，哈希密码后存入 users 表。
登录 (/login): 验证用户凭据，成功后将用户ID存储在Flask会话 (session['user_id']) 中。这是实现个性化功能的关键。
登出 (/logout): 清除会话中的用户ID。

@app.route('/register', methods=['POST'])
def register_user():
    data = request.json
    # ... (字段校验逻辑省略，与原代码一致) ...
    hashed_password = hash_password(data['pwd'])
    with sqlite3.connect('rental-users.db') as conn:
        cursor = conn.cursor()
        cursor.execute('''
            INSERT INTO users (firstname, lastname, email, mobile, gender, hashed_password)
            VALUES (?, ?, ?, ?, ?, ?)
        ''', (data['firstname'], data['lastname'], data['email'], data['mobile'], data['gender'], hashed_password))
        conn.commit()
    return jsonify({'message': 'Registration successful'})

@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 id, hashed_password FROM users WHERE email = ?', (data['email'],))
        user_record = cursor.fetchone()

    if user_record:
        user_id, stored_hashed_password = user_record
        if hash_password(data['pwd']) == stored_hashed_password:
            session['user_id'] = user_id # 存储用户ID到会话
            return jsonify({'message': 'Login successful', 'user_id': user_id}) # 可选择返回user_id给前端
        else:
            return jsonify({'error': 'Invalid password'}), 401
    else:
        return jsonify({'error': 'User not found'}), 404

@app.route('/logout', methods=['POST'])
def logout_user():
    session.pop('user_id', None)
    return jsonify({'message': 'Logout successful'})

登录后复制

3. 预订管理

创建预订 (/make-reservation/<int:user_id>): 接收预订数据和用户ID，将其存入 reservations 表。
获取用户预订 (/user-reservations/<int:user_id>): 这是实现个性化功能的核心。根据路径中提供的 user_id 查询对应的预订记录。

@app.route('/make-reservation/<int:user_id>', methods=['POST'])
def make_reservation(user_id):
    data = request.json
    with sqlite3.connect('rental-users.db') as conn:
        cursor = conn.cursor()
        cursor.execute('''
            INSERT INTO reservations (user_id, brand, from_location, to_location)
            VALUES (?, ?, ?, ?)
        ''', (user_id, data.get('brand'), data.get('from_location'), data.get('to_location')))
        conn.commit()
    return jsonify({'message': 'Reservation successful'})

@app.route('/user-reservations/<int:user_id>', methods=['GET'])
def get_user_reservations(user_id):
    with sqlite3.connect('rental-users.db') as conn:
        cursor = conn.cursor()
        # 标准且推荐的SQLite参数绑定方式：使用单元素元组
        cursor.execute('SELECT id, user_id, brand, from_location, to_location 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()
        ]
    return jsonify(reservations)

登录后复制

关于 sqlite3.execute 参数绑定的注意事项：

在Python的 sqlite3 模块中，cursor.execute() 方法的第二个参数期望一个序列（如元组或列表）来绑定SQL查询中的占位符 ?。即使只有一个参数，也应该将其包装在一个单元素元组中，例如 (user_id,)。这是标准且最健壮的做法。

虽然在某些特定环境或 sqlite3 版本中，直接传递一个非序列类型（如整数 user_id）可能在特定情况下“奏效”或解决某些问题，但这不符合 sqlite3 API 的通用约定，并且可能在其他环境中导致 TypeError 或意外行为。为了代码的兼容性和可维护性，强烈建议始终使用序列进行参数绑定。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

二、前端集成：Angular的服务与组件

Angular前端负责用户界面、API调用以及用户状态管理。

1. AuthorizationService：用户认证与状态管理

该服务处理用户登录、注册、登出，并维护用户的登录状态和用户ID。

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 currentUser: { id: number | null; firstname: string; lastname: string; email: string } = { id: null, firstname: '', lastname: '', email: '' };
  private _isLoggedIn = false;

  get isLoggedIn(): boolean {
    return this._isLoggedIn;
  }

  constructor(private router: Router, private http: HttpClient) {}

  loginUser(loginData: any): Observable<any> {
    const url = `${this.apiUrl}/login`;
    return this.http.post(url, loginData).pipe(
      tap((response: any) => {
        // 假设后端在登录成功时返回 user_id
        this.currentUser.id = response.user_id;
        this._isLoggedIn = true;
        // 实际应用中，可能还需要存储 token 或其他用户信息
      }),
      catchError((error) => {
        this._isLoggedIn = false;
        this.currentUser.id = null;
        return throwError(error);
      })
    );
  }

  logout(): Observable<any> {
    const url = `${this.apiUrl}/logout`;
    return this.http.post(url, {}).pipe(
      tap(() => {
        this.currentUser = { id: null, firstname: '', lastname: '', email: '' };
        this._isLoggedIn = false;
        this.router.navigate(['/login']);
      })
    );
  }

  // 注册用户逻辑与原代码类似，此处省略

  getUserId(): number | null {
    return this.currentUser.id;
  }
}

登录后复制

重要提示： 在 loginUser 成功后，后端返回的 user_id 应该被前端捕获并存储，以便后续的个性化请求使用。原后端代码中 login_user 仅返回 {'message': 'Login successful'}，建议修改为 return jsonify({'message': 'Login successful', 'user_id': user[0]})，以便前端能获取到用户ID。

2. ReservationService：预订相关的API调用

该服务封装了与后端预订相关的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, brand: string, fromLocation: string, toLocation: string): Observable<any> {
    const url = `${this.apiUrl}/make-reservation/${userId}`;
    const reservationData = {
      brand: brand,
      from_location: fromLocation,
      to_location: toLocation,
    };
    return this.http.post(url, reservationData);
  }

  getUserReservations(userId: number): Observable<any[]> {
    const url = `${this.apiUrl}/user-reservations/${userId}`;
    return this.http.get<any[]>(url);
  }
}

登录后复制

3. MyReservationsComponent：展示用户预订

此组件负责显示用户界面以进行预订，并在页面加载时获取并显示当前用户的预订历史。

import { Component, OnInit } from '@angular/core';
import { AuthorizationService } from '../authorization.service';
import { ReservationService } from '../reservation.service';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-my-reservations',
  templateUrl: './my-reservations.component.html',
  styleUrls: ['./my-reservations.component.css'],
})
export class MyReservationsComponent implements OnInit {
  reservationData = {
    brand:  '',
    from_location: '',
    to_location: '',
  };

  reservations: any[] = [];

  constructor(
    private reservationService: ReservationService,
    private authService: AuthorizationService,
    private toastr: ToastrService
  ) {}

  ngOnInit() {
    this.loadReservationHistory();
  }

  makeReservation() {
    const userId = this.authService.getUserId();
    if (userId === null) {
      this.toastr.error('Please log in to make a reservation.', 'Error');
      return;
    }

    this.reservationService
      .makeReservation(
        userId, // 确保这里传递的是非null的userId
        this.reservationData.brand,
        this.reservationData.from_location,
        this.reservationData.to_location
      )
      .subscribe(
        (res) => {
          this.toastr.success('Reservation successful!', 'Success');
          this.loadReservationHistory(); // 预订成功后刷新列表
          // 清空表单
          this.reservationData = { brand: '', from_location: '', to_location: '' };
        },
        (err) => {
          console.error('Error making reservation:', err);
          this.toastr.error('Error making reservation', 'Error');
        }
      );
  }

  loadReservationHistory() {
    const userId = this.authService.getUserId();
    if (userId === null) {
      this.toastr

登录后复制

以上就是Angular与Flask全栈应用中实现用户个性化数据展示教程的详细内容，更多请关注php中文网其它相关文章！