在Angular与Flask搭建的前后端分离应用中，用户个性化预订数据展示需要前后端协同配合，从数据接口设计到前端渲染每个环节都可能出现问题，下面将从完整流程出发介绍对应的解决方法。
后端Flask接口设计与实现
首先需要在Flask端设计获取用户个性化预订数据的接口，需要做好用户身份校验和数据筛选逻辑，确保返回的数据是当前登录用户对应的预订记录。
基础接口实现
先实现用户身份验证和预订数据查询的核心逻辑，这里使用JWT进行用户身份校验，假设已经完成了JWT相关的配置。
from flask import Flask, request, jsonify
from flask_sqlalchemy import SQLAlchemy
import jwt
from functools import wraps
app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'
db = SQLAlchemy(app)
# 预订数据模型
class Booking(db.Model):
id = db.Column(db.Integer, primary_key=True)
user_id = db.Column(db.Integer, nullable=False)
booking_time = db.Column(db.DateTime, nullable=False)
service_name = db.Column(db.String(100), nullable=False)
status = db.Column(db.String(20), nullable=False)
# 身份校验装饰器
def token_required(f):
@wraps(f)
def decorated(*args, **kwargs):
token = request.headers.get('Authorization')
if not token:
return jsonify({'message': '缺少身份令牌'}), 401
try:
# 去除Bearer前缀
token = token.split(' ')[1]
data = jwt.decode(token, app.config['SECRET_KEY'], algorithms=['HS256'])
current_user_id = data['user_id']
except:
return jsonify({'message': '令牌无效或已过期'}), 401
return f(current_user_id, *args, **kwargs)
return decorated
# 获取用户个性化预订数据接口
@app.route('/api/bookings', methods=['GET'])
@token_required
def get_user_bookings(current_user_id):
# 查询当前用户的所有预订记录
bookings = Booking.query.filter_by(user_id=current_user_id).order_by(Booking.booking_time.desc()).all()
# 转换为前端需要的格式
booking_list = []
for item in bookings:
booking_list.append({
'id': item.id,
'booking_time': item.booking_time.strftime('%Y-%m-%d %H:%M'),
'service_name': item.service_name,
'status': item.status
})
return jsonify({'code': 200, 'data': booking_list})
跨域配置
由于Angular前端和Flask后端通常运行在不同端口，需要配置跨域允许前端请求，使用flask_cors扩展可以快速实现。
from flask_cors import CORS
# 允许所有来源访问，生产环境可指定具体的前端域名
CORS(app, resources={r"/api/*": {"origins": "*"}})
前端Angular数据请求与处理
Angular端需要封装HTTP请求服务，调用后端接口获取数据，同时处理请求过程中的异常和身份令牌的携带。
预订数据服务封装
创建一个专门处理预订相关请求的服务，统一管理接口调用逻辑。
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class BookingService {
private apiUrl = 'http://127.0.0.1:5000/api/bookings';
constructor(private http: HttpClient) { }
// 获取用户个性化预订数据
getUserBookings(): Observable<any> {
// 从本地存储获取JWT令牌
const token = localStorage.getItem('jwt_token');
const headers = new HttpHeaders({
'Authorization': `Bearer ${token}`
});
return this.http.get(this.apiUrl, { headers }).pipe(
catchError(error => {
console.error('获取预订数据失败', error);
throw error;
})
);
}
}
组件中获取并渲染数据
在对应的组件中调用服务获取数据，然后将数据绑定到页面模板完成渲染。
import { Component, OnInit } from '@angular/core';
import { BookingService } from '../booking.service';
@Component({
selector: 'app-booking-list',
templateUrl: './booking-list.component.html',
styleUrls: ['./booking-list.component.css']
})
export class BookingListComponent implements OnInit {
bookingList: any[] = [];
isLoading = true;
errorMsg = '';
constructor(private bookingService: BookingService) { }
ngOnInit(): void {
this.loadBookings();
}
loadBookings(): void {
this.isLoading = true;
this.bookingService.getUserBookings().subscribe({
next: (res) => {
if (res.code === 200) {
this.bookingList = res.data;
} else {
this.errorMsg = '获取预订数据失败';
}
this.isLoading = false;
},
error: (err) => {
this.errorMsg = '请求出错，请稍后重试';
this.isLoading = false;
}
});
}
}
页面模板渲染
使用Angular的模板语法循环展示预订数据，同时处理加载中和错误状态。
<div class="booking-container">
<h2>我的预订记录</h2>
<div *ngIf="isLoading">数据加载中...</div>
<div *ngIf="errorMsg" class="error-tip">{{ errorMsg }}</div>
<ul *ngIf="!isLoading && !errorMsg">
<li *ngFor="let item of bookingList" class="booking-item">
<p>服务名称：{{ item.service_name }}</p>
<p>预订时间：{{ item.booking_time }}</p>
<p>状态：{{ item.status }}</p>
</li>
</ul>
<div *ngIf="!isLoading && !errorMsg && bookingList.length === 0">暂无预订记录</div>
</div>
常见问题与解决方法
- 接口返回401错误：检查前端是否正确携带JWT令牌，令牌是否过期，后端校验逻辑是否正确，确保令牌格式为
Bearer 令牌内容。 - 跨域请求失败：检查Flask端是否正确配置了CORS，允许前端运行的域名和端口访问接口。
- 数据格式不匹配：后端返回的数据字段需要和前端定义的接口返回类型一致，比如时间格式、字段名称要统一，避免前端渲染时出现undefined。
- 数据更新不及时：如果预订数据有新增或修改，前端可以在操作完成后重新调用
loadBookings方法刷新数据，或者结合WebSocket实现实时更新。
总结
解决Angular与Flask应用中的用户个性化预订数据展示问题，核心是保证前后端数据交互的顺畅和逻辑的一致性。后端需要做好身份校验、数据筛选和跨域配置，前端需要正确封装请求、处理响应和异常，同时做好页面渲染的状态管理。按照上述流程实现，就可以稳定展示对应用户的个性化预订数据，减少开发过程中的常见问题。