本教程将指导您如何在基于Angular前端和Flask后端的全栈应用中，实现一个核心的个性化功能：确保登录用户只能看到属于自己的预订记录。我们将从后端数据库设计、用户认证机制，到前端服务与组件的实现，全面解析这一过程，并特别关注在数据查询中可能遇到的参数绑定问题。
一、 后端架构：Flask与SQLite的数据管理
后端采用Flask框架，结合SQLite数据库，负责用户管理、认证以及预订数据的存储与检索。
1. 数据库初始化与表结构
首先，定义并创建两个核心数据库表：users 用于存储用户信息，reservations 用于存储预订信息，并通过 user_id 建立关联。
import sqlite3import hashlibfrom flask import Flask, request, jsonify, sessionfrom flask_cors import CORSapp = 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 或意外行为。为了代码的兼容性和可维护性，强烈建议始终使用序列进行参数绑定。
二、 前端集成：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
以上就是Angular与Flask全栈应用中实现用户个性化数据展示教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1379496.html
微信扫一扫 
支付宝扫一扫 
