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

花韻仙語

发布时间：2025-11-12 12:00:31

225人浏览过

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

@app.route('/make-reservation/', 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/', 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 或意外行为。为了代码的兼容性和可维护性，强烈建议始终使用序列进行参数绑定。

PHP与MySQL程序设计3

本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。本书内容全面深入，适合各层次PHP和MySQL开发人员阅读，既是优秀的学习教程，也可用作参考手册。

下载

二、前端集成：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 {
    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 {
    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 {
    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 {
    const url = `${this.apiUrl}/user-reservations/${userId}`;
    return this.http.get(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

如何在 Selenium 中精准定位并提取非隐藏的表格行元素

如何使用 Beautiful Soup 正确提取网页中的所有分类链接

Python爬虫解析HTML技巧_xpath与css选择器对比【教程】

Python表单自动填写_web驱动模拟操作技巧【指导】

Python自动化脚本项目中爬取网页数据的操作步骤【教程】