实现Angular-Flask应用中的用户数据个性化功能

import sqlite3import hashlibfrom flask import Flask, request, jsonify, sessionfrom flask_cors import CORSapp = Flask(__name__)CORS(app)app.config['SECRET_KEY'] = 'your_secret_key_here' # 生产环境请使用更复杂的密钥def hash_password(password):    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():    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()

# ... (previous code) ...@app.route('/register', methods=['POST'])def register_user():    data = request.json    required_fields = ['firstname', 'lastname', 'email', 'mobile', 'gender', 'pwd']    for field in required_fields:        if field not in data:            return jsonify({'error': f'Missing required field: {field}'}), 400    with sqlite3.connect('rental-users.db') as conn:        cursor = conn.cursor()        cursor.execute('SELECT * FROM users WHERE email = ?', (data['email'],))        existing_user = cursor.fetchone()    if existing_user:        return jsonify({'error': 'Email is already registered'}), 400    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    required_fields = ['email', 'pwd']    for field in required_fields:        if field not in data:            return jsonify({'error': f'Missing required field: {field}'}), 400    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]:  # Assuming hashed_password is at index 6            session['user_id'] = user[0] # Store user ID in session            # 关键修正：返回用户ID给前端            return jsonify({'message': 'Login successful', 'user_id': user[0], 'firstname': user[1], 'lastname': user[2], 'email': user[3]})        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'})

# ... (previous code) ...@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()        # 注意：sqlite3.Cursor.execute 期望参数为元组或列表，即使只有一个参数        # 原始代码 (user_id,) 是正确的。如果将其改为 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()        ]    return jsonify(reservations)if __name__ == '__main__':    app.run(debug=True)

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';  // 存储用户ID和基本信息  private user: { id: number | null; firstname: string; lastname: string; email: string } = { id: null, firstname: '', lastname: '', email: '' };   private logged = false;  private signedUp = false;  get isLoggedIn(): boolean {    return this.logged;  }  hasSignedUp(): boolean {    return this.signedUp;  }  loginUser(loginData: any): Observable {    const url = `${this.apiUrl}/login`;    return this.http.post(url, loginData).pipe(      tap((response: any) => { // 修正：接收后端返回的完整响应        if (response && response.user_id) { // 检查后端是否返回了user_id          this.user.id = response.user_id;          this.user.firstname = response.firstname; // 根据后端返回的数据更新          this.user.lastname = response.lastname;          this.user.email = response.email;          this.logged = true;          // 可以在这里添加导航到首页的逻辑          this.router.navigate(['/home']);        } else {          // 如果后端没有返回user_id，则视为登录失败或不完整          this.logged = false;          console.error('Login successful, but user ID not received from backend.');        }      }),      catchError((error) => {        this.logged = false;        this.user = { id: null, firstname: '', lastname: '', email: '' }; // 清空用户信息        return throwError(error);      })    );  }  logout(): Observable {    const url = `${this.apiUrl}/logout`;    return this.http.post(url, {}).pipe(      tap(() => {        this.user = { id: null, firstname: '', lastname: '', email: '' };         this.logged = false;        this.router.navigate(['/login']);      }),      catchError((error) => {        console.error('Logout error:', error);        return throwError(error);      })    );  }  registerUser(formData: any): Observable {    const url = `${this.apiUrl}/register`;    return this.http.post(url, formData).pipe(      tap((response: any) => {        // 注册成功通常不需要立即获取user_id，除非是自动登录        this.signedUp = true;      }),      catchError((error) => {        this.signedUp = false;        return throwError(error);      })    );  }  getUserId(): number | null {    return this.user.id;  }  constructor(private router: Router, private http: HttpClient) {}}

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);  }}

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;    }    console.log('Reservation Payload:', {      userId: userId,      brand: this.reservationData.brand,      from_location: this.reservationData.from_location,      to_location: this.reservationData.to_location,    });    this.reservationService      .makeReservation(        userId, // 确保传递的是有效的用户ID        this.reservationData.brand,        this.reservationData.from_location,        this.reservationData.to_location      )      .subscribe(        (res) => {          console.log(res);          this.toastr.success('Reservation successful!', 'Success');          this.loadReservationHistory(); // 重新加载预订历史          // 清空表单          this.reservationData = { brand: '', from_location: '', to_location: '' };        },        (err) => {          console.error(err);          this.toastr.error('Error making reservation', 'Error');        }      );  }  loadReservationHistory() {    const userId = this.authService.getUserId();    if (userId === null) {      this.reservations = []; // 未登录则清空预订列表      // this.toastr.info('Please log in to view your reservations.', 'Info'); // 可选提示      return;    }    this.reservationService.getUserReservations(userId).subscribe(      (res) => {        console.log('User Reservations:', res);        this.reservations = res;      },      (err) => {        console.error('Error loading reservations:', err);        this.toastr.error('Failed to load reservations.', 'Error');      }    );  }}

import { Component, OnInit } from '@angular/core';import { AuthorizationService } from '../authorization.service';import { FormControl, FormGroup, Validators } from '@angular/forms';import { Router } from '@angular/router';import { ToastrService } from 'ngx-toastr'@Component({  selector: 'app-login',  templateUrl: './login.component.html',  styleUrls: ['./login.component.css']})export class LoginComponent implements OnInit { // 实现OnInit接口 constructor(private authService: AuthorizationService, private router: Router, private toastr: ToastrService) {}  loginForm = new FormGroup({    email: new FormControl("", [Validators.required, Validators.email]),    pwd: new FormControl("", [Validators.required, Validators.minLength(6), Validators.maxLength(15)])  });  loginSubmitted() {    if (this.loginForm.invalid) {      this.toastr.error('Please enter valid email and password.', 'Validation Error');      return;    }    this.authService.loginUser(this.loginForm.value).subscribe(      res => {        console.log(res);        this.showToasterSuccess(); // 登录成功提示        // 导航逻辑已在AuthorizationService中处理，这里可以省略或添加其他逻辑      },      err => {        console.error(err);        const errorMessage = err.error && err.error.error ? err.error.error : 'Login failed. Please check your credentials.';        this.toastr.error(errorMessage, 'Login Error');      }    );  }  get Email(): FormControl {    return this.loginForm.get('email') as FormControl;  }  get PWD(): FormControl {    return this.loginForm.get('pwd') as FormControl;  }  ngOnInit(): void {    // 可以在这里添加检查是否已登录的逻辑，如果已登录则重定向    if (this.authService.isLoggedIn) {      this.router.navigate(['/home']);    }  }  showToasterSuccess(){    this.toastr.success("Logged in successfully !!", "Enjoy!!",{    easing:"ease-in",    easeTime: 1000    });  }}