說明：
我計(jì)劃用fastapi+angular做一款停車管理系統(tǒng)，支持跨域
1.設(shè)計(jì)mysql數(shù)據(jù)庫表，
2.建表，添加測(cè)試數(shù)據(jù)，多表查詢，
3.在fastapi寫接口查詢數(shù)據(jù)，
4.用postman測(cè)試，
5.在angular前端展示

效果圖：

用fastapi寫4個(gè)查詢接口
1.查詢具體用戶的所有停車記錄
2.查詢當(dāng)前正在停車的記錄，顯示車牌，車主姓名，進(jìn)入時(shí)間，車位位置
3.查詢所有已結(jié)束停車的費(fèi)用明細(xì)表，詳細(xì)列舉車型和費(fèi)率
4.統(tǒng)計(jì)停車場(chǎng)車位的利用率和空閑率

step1:sql

-- 1. 建表語句（6張表）
-- --------------------------------------------------------
-- 用戶表
CREATE TABLE users (user_id INT AUTO_INCREMENT PRIMARY KEY,name VARCHAR(50) NOT NULL,phone VARCHAR(20) UNIQUE,email VARCHAR(100) UNIQUE,reg_date DATETIME DEFAULT CURRENT_TIMESTAMP
);-- 車輛表
CREATE TABLE vehicles (vehicle_id INT AUTO_INCREMENT PRIMARY KEY,user_id INT NOT NULL,license_plate VARCHAR(20) UNIQUE NOT NULL,type ENUM('轎車','SUV','卡車','電動(dòng)車','摩托車'),FOREIGN KEY (user_id) REFERENCES users(user_id)
);-- 車位表
CREATE TABLE parking_spaces (space_id INT AUTO_INCREMENT PRIMARY KEY,zone VARCHAR(10) NOT NULL,  -- 區(qū)域（A區(qū)/B區(qū)等）number VARCHAR(10) NOT NULL, -- 車位編號(hào)status ENUM('AVAILABLE','OCCUPIED','MAINTENANCE') DEFAULT 'AVAILABLE',UNIQUE(zone, number)
);-- 收費(fèi)規(guī)則表
CREATE TABLE fee_rules (rule_id INT AUTO_INCREMENT PRIMARY KEY,vehicle_type ENUM('轎車','SUV','卡車','電動(dòng)車','摩托車'),hourly_rate DECIMAL(8,2) NOT NULL,effective_date DATE NOT NULL
);-- 停車記錄表
CREATE TABLE parking_records (record_id INT AUTO_INCREMENT PRIMARY KEY,vehicle_id INT NOT NULL,space_id INT NOT NULL,entry_time DATETIME NOT NULL,exit_time DATETIME,fee DECIMAL(10,2),FOREIGN KEY (vehicle_id) REFERENCES vehicles(vehicle_id),FOREIGN KEY (space_id) REFERENCES parking_spaces(space_id)
);-- 支付記錄表（新增）
CREATE TABLE payment_records (payment_id INT AUTO_INCREMENT PRIMARY KEY,record_id INT NOT NULL,amount DECIMAL(10,2) NOT NULL,payment_time DATETIME DEFAULT CURRENT_TIMESTAMP,payment_method ENUM('支付寶','微信','現(xiàn)金','信用卡'),status ENUM('PAID','UNPAID'),FOREIGN KEY (record_id) REFERENCES parking_records(record_id)
);-- 2. 模擬數(shù)據(jù)（每表至少10條）
-- --------------------------------------------------------
-- 用戶表數(shù)據(jù)
INSERT INTO users (name, phone, email) VALUES('張三', '13800010001', 'zhangsan@park.com'),('李四', '13800010002', 'lisi@park.com'),('王五', '13800010003', 'wangwu@park.com'),('趙六', '13800010004', 'zhaoliu@park.com'),('陳七', '13800010005', 'chenqi@park.com'),('劉八', '13800010006', 'liuba@park.com'),('周九', '13800010007', 'zhoujiu@park.com'),('吳十', '13800010008', 'wushi@park.com'),('鄭十一', '13800010009', 'zheng11@park.com'),('孫十二', '13800010010', 'sun12@park.com');-- 車輛表數(shù)據(jù)
INSERT INTO vehicles (user_id, license_plate, type) VALUES(1, '川A12345', '轎車'),(1, '川A67890', 'SUV'),(2, '贛B12345', '卡車'),(3, '贛C12345', '電動(dòng)車'),(4, '浙D12345', '摩托車'),(5, '蘇E12345', '轎車'),(6, '川F12345', 'SUV'),(7, '湘G12345', '卡車'),(8, '鄂H12345', '電動(dòng)車'),(9, '魯J12345', '摩托車'),(10, '晉K12345', '轎車');-- 車位表數(shù)據(jù)
INSERT INTO parking_spaces (zone, number, status) VALUES('A', '001', 'AVAILABLE'),('A', '002', 'OCCUPIED'),('A', '003', 'MAINTENANCE'),('B', '101', 'AVAILABLE'),('B', '102', 'OCCUPIED'),('C', '201', 'AVAILABLE'),('C', '202', 'OCCUPIED'),('D', '301', 'AVAILABLE'),('D', '302', 'OCCUPIED'),('E', '401', 'MAINTENANCE');INSERT INTO parking_spaces (zone, number, status) VALUES    ('F', '402', 'AVAILABLE');-- 收費(fèi)規(guī)則表數(shù)據(jù)
INSERT INTO fee_rules (vehicle_type, hourly_rate, effective_date) VALUES('轎車', 5.00, '2024-01-01'),('SUV', 7.50, '2024-01-01'),('卡車', 10.00, '2024-01-01'),('電動(dòng)車', 3.00, '2024-01-01'),('摩托車', 2.50, '2024-01-01'),('轎車', 6.00, '2024-06-01'),  -- 費(fèi)率調(diào)整('SUV', 8.50, '2024-06-01'),('卡車', 12.00, '2024-06-01'),('電動(dòng)車', 3.50, '2024-06-01'),('摩托車', 3.00, '2024-06-01');-- 停車記錄表數(shù)據(jù)
INSERT INTO parking_records (vehicle_id, space_id, entry_time, exit_time, fee) VALUES(1, 2, '2024-03-01 08:00:00', '2024-03-01 10:00:00', 10.00),(2, 4, '2024-03-01 09:00:00', '2024-03-01 12:00:00', 22.50),(3, 5, '2024-03-01 10:00:00', '2024-03-01 15:00:00', 50.00),(4, 6, NOW() - INTERVAL 2 HOUR, NULL, NULL),(5, 7, '2024-03-01 11:00:00', '2024-03-01 13:00:00', 5.00),(6, 8, NOW() - INTERVAL 1 HOUR, NULL, NULL),(7, 9, '2024-03-01 14:00:00', '2024-03-01 17:00:00', 25.50),(8, 10, '2024-03-01 15:00:00', '2024-03-01 18:00:00', 36.00),(9, 1, NOW() - INTERVAL 3 HOUR, NULL, NULL),(10, 3, '2024-03-01 16:00:00', '2024-03-01 19:00:00', 18.00);-- 支付記錄表數(shù)據(jù)
INSERT INTO payment_records (record_id, amount, payment_method, status) VALUES(1, 10.00, '支付寶', 'PAID'),(2, 22.50, '微信', 'PAID'),(3, 50.00, '現(xiàn)金', 'PAID'),(5, 5.00, '信用卡', 'PAID'),(7, 25.50, '支付寶', 'PAID'),(8, 36.00, '微信', 'PAID'),(10, 18.00, '信用卡', 'PAID');-- 3. 查詢語句（4個(gè)核心查詢）
-- --------------------------------------------------------
-- 1. 查詢具體用戶的所有停車記錄（例如：張三）
SELECTu.name AS 車主,v.license_plate AS 車牌,CONCAT(p.zone, '-', p.number) AS 車位,pr.entry_time AS 入場(chǎng)時(shí)間,pr.exit_time AS 離場(chǎng)時(shí)間,pr.fee AS 費(fèi)用
FROM users uJOIN vehicles v ON u.user_id = v.user_idJOIN parking_records pr ON v.vehicle_id = pr.vehicle_idJOIN parking_spaces p ON pr.space_id = p.space_id
WHERE u.name = '張三';-- 2. 查詢當(dāng)前正在停車的記錄
SELECTv.license_plate AS 車牌,u.name AS 車主姓名,pr.entry_time AS 進(jìn)入時(shí)間,CONCAT(p.zone, '-', p.number) AS 車位位置
FROM parking_records prJOIN vehicles v ON pr.vehicle_id = v.vehicle_idJOIN users u ON v.user_id = u.user_idJOIN parking_spaces p ON pr.space_id = p.space_id
WHERE pr.exit_time IS NULL;-- 3. 已結(jié)束停車的費(fèi)用明細(xì)表
SELECTv.type AS 車型,fr.hourly_rate AS 費(fèi)率,TIMESTAMPDIFF(HOUR, pr.entry_time, pr.exit_time) AS 停車小時(shí),pr.fee AS 總費(fèi)用,py.payment_method AS 支付方式
FROM parking_records prJOIN vehicles v ON pr.vehicle_id = v.vehicle_idJOIN fee_rules fr ON v.type = fr.vehicle_typeAND pr.entry_time >= fr.effective_dateJOIN payment_records py ON pr.record_id = py.record_id
WHERE pr.exit_time IS NOT NULL;-- 4. 統(tǒng)計(jì)車位利用率（每日動(dòng)態(tài)計(jì)算）
SELECTCOUNT(*) AS 總車位數(shù),SUM(CASE WHEN status = 'OCCUPIED' THEN 1 ELSE 0 END) AS 已用車位,SUM(CASE WHEN status = 'AVAILABLE' THEN 1 ELSE 0 END) AS 空閑車位,CONCAT(ROUND(SUM(CASE WHEN status = 'OCCUPIED' THEN 1 ELSE 0 END)/COUNT(*)*100,2), '%') AS 利用率,CONCAT(ROUND(SUM(CASE WHEN status = 'AVAILABLE' THEN 1 ELSE 0 END)/COUNT(*)*100,2), '%') AS 空閑率
FROM parking_spaces;

step2: 寫路由接口，支持跨域

from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
import pymysql.cursorsapp = FastAPI()# 添加CORS配置
app.add_middleware(CORSMiddleware,allow_origins=["http://localhost:4200"],  # 允許訪問的前端域名allow_credentials=True,allow_methods=["*"],  # 允許所有HTTP方法allow_headers=["*"],  # 允許所有請(qǐng)求頭
)
# 數(shù)據(jù)庫連接配置（請(qǐng)根據(jù)實(shí)際情況修改）
DB_CONFIG = {'host': 'localhost','user': 'root','password': '123456','db': 'school_db',  # 修改為實(shí)際的數(shù)據(jù)庫名稱'charset': 'utf8mb4','cursorclass': pymysql.cursors.DictCursor
}def query_database(query: str, params=None):try:connection = pymysql.connect(**DB_CONFIG)with connection.cursor() as cursor:cursor.execute(query, params)result = cursor.fetchall()connection.close()return resultexcept Exception as e:raise HTTPException(status_code=500, detail=str(e))# 1. 查詢具體用戶的所有停車記錄
@app.get("/user_parking_records/{user_id}")
async def get_user_parking_records(user_id: int):"""獲取指定用戶的所有停車記錄- user_id: 用戶ID"""query = """SELECT u.name AS owner,v.license_plate AS license_plate,CONCAT(p.zone, '-', p.number) AS space_location,pr.entry_time AS entry_time,pr.exit_time AS exit_time,pr.fee AS feeFROM users uJOIN vehicles v ON u.user_id = v.user_idJOIN parking_records pr ON v.vehicle_id = pr.vehicle_idJOIN parking_spaces p ON pr.space_id = p.space_idWHERE u.user_id = %s"""data = query_database(query, (user_id,))return {"data": data}# 2. 查詢當(dāng)前正在停車的記錄
@app.get("/active_parking_records")
async def get_active_parking_records():"""獲取所有正在進(jìn)行的停車記錄"""query = """SELECT v.license_plate AS license_plate,u.name AS owner_name,pr.entry_time AS entry_time,CONCAT(p.zone, '-', p.number) AS space_locationFROM parking_records prJOIN vehicles v ON pr.vehicle_id = v.vehicle_idJOIN users u ON v.user_id = u.user_idJOIN parking_spaces p ON pr.space_id = p.space_idWHERE pr.exit_time IS NULL"""data = query_database(query)return {"data": data}# 3. 查詢已結(jié)束停車的費(fèi)用明細(xì)
@app.get("/completed_parking_records")
async def get_completed_payments():"""獲取所有已完成停車的費(fèi)用明細(xì)"""query = """SELECT v.type AS vehicle_type,fr.hourly_rate AS rate,TIMESTAMPDIFF(HOUR, pr.entry_time, pr.exit_time) AS hours,pr.fee AS total_fee,py.payment_method AS payment_methodFROM parking_records prJOIN vehicles v ON pr.vehicle_id = v.vehicle_idJOIN fee_rules fr ON v.type = fr.vehicle_type AND pr.entry_time >= fr.effective_dateJOIN payment_records py ON pr.record_id = py.record_idWHERE pr.exit_time IS NOT NULL"""data = query_database(query)return {"data": data}# 4. 統(tǒng)計(jì)車位利用率
@app.get("/parking_space_utilization")
async def get_parking_space_stats():"""獲取車位利用率統(tǒng)計(jì)"""query = """SELECT COUNT(*) AS total_spaces,SUM(CASE WHEN status = 'OCCUPIED' THEN 1 ELSE 0 END) AS occupied,SUM(CASE WHEN status = 'AVAILABLE' THEN 1 ELSE 0 END) AS available,ROUND(SUM(CASE WHEN status = 'OCCUPIED' THEN 1 ELSE 0 END)/COUNT(*)*100, 2) AS usage_rate,ROUND(SUM(CASE WHEN status = 'AVAILABLE' THEN 1 ELSE 0 END)/COUNT(*)*100, 2) AS free_rateFROM parking_spaces"""data = query_database(query)return {"data": data[0] if data else {}}if __name__ == "__main__":import uvicornuvicorn.run(app, host="0.0.0.0", port=8000)

step3:后端+mysql部分弄完了，接下來寫angular前端部分，下面是postman測(cè)試

 查詢具體用戶的所有停車記錄 
查詢當(dāng)前正在停車的記錄，顯示車牌，車主姓名，進(jìn)入時(shí)間，車位位置
查詢所有已結(jié)束停車的費(fèi)用明細(xì)表，詳細(xì)列舉車型和費(fèi)率
統(tǒng)計(jì)停車場(chǎng)車位的利用率和空閑率http://localhost:8000/user_parking_records/1{"data": [{"owner": "張三","license_plate": "A12345","space_location": "A-002","entry_time": "2024-03-01T08:00:00","exit_time": "2024-03-01T10:00:00","fee": 10.0},{"owner": "張三","license_plate": "A67890","space_location": "B-101","entry_time": "2024-03-01T09:00:00","exit_time": "2024-03-01T12:00:00","fee": 22.5}]
}http://localhost:8000/active_parking_records{"data": [{"license_plate": "粵C12345","owner_name": "王五","entry_time": "2025-03-07T13:15:43","space_location": "C-201"},{"license_plate": "蘇E12345","owner_name": "陳七","entry_time": "2025-03-07T14:15:43","space_location": "D-301"},{"license_plate": "鄂H12345","owner_name": "吳十","entry_time": "2025-03-07T12:15:43","space_location": "A-001"}]
}http://localhost:8000/completed_parking_records
{"data": [{"vehicle_type": "轎車","rate": 5.0,"hours": 2,"total_fee": 10.0,"payment_method": "支付寶"},{"vehicle_type": "SUV","rate": 7.5,"hours": 3,"total_fee": 25.5,"payment_method": "支付寶"},{"vehicle_type": "SUV","rate": 7.5,"hours": 3,"total_fee": 22.5,"payment_method": "微信"},{"vehicle_type": "卡車","rate": 10.0,"hours": 3,"total_fee": 36.0,"payment_method": "微信"},{"vehicle_type": "卡車","rate": 10.0,"hours": 5,"total_fee": 50.0,"payment_method": "現(xiàn)金"},{"vehicle_type": "摩托車","rate": 2.5,"hours": 3,"total_fee": 18.0,"payment_method": "信用卡"},{"vehicle_type": "摩托車","rate": 2.5,"hours": 2,"total_fee": 5.0,"payment_method": "信用卡"}]
}http://localhost:8000/parking_space_utilization{"data": {"total_spaces": 11,"occupied": 4,"available": 5,"usage_rate": 36.36,"free_rate": 45.45}
}

step4:C:\Users\Administrator\WebstormProjects\untitled4\src\app\park\parking.service.ts

// parking.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';@Injectable({providedIn: 'root'
})
export class ParkingService {private apiUrl = 'http://localhost:8000';constructor(private http: HttpClient) { }getUserRecords(userId: number): Observable<any> {return this.http.get(`${this.apiUrl}/user_parking_records/${userId}`);}getActiveRecords(): Observable<any> {return this.http.get(`${this.apiUrl}/active_parking_records`);}getCompletedRecords(): Observable<any> {return this.http.get(`${this.apiUrl}/completed_parking_records`);}getParkingStats(): Observable<any> {return this.http.get(`${this.apiUrl}/parking_space_utilization`);}
}

step5:C:\Users\Administrator\WebstormProjects\untitled4\src\app\park\park.component.ts

import { Component ,OnInit} from '@angular/core';
import { ParkingService } from './parking.service';
import {FormsModule} from '@angular/forms';
import {CurrencyPipe, DatePipe, NgForOf, NgIf} from '@angular/common';@Component({selector: 'app-park',imports: [FormsModule,DatePipe,CurrencyPipe,NgForOf,NgIf],templateUrl: './park.component.html',styleUrl: './park.component.css'
})
export class ParkComponent implements OnInit {userRecords: any[] = [];activeRecords: any[] = [];completedRecords: any[] = [];parkingStats: any = {};selectedUserId: number = 1;constructor(private parkingService: ParkingService) {}ngOnInit() {this.loadAllData();}loadAllData() {this.loadUserRecords();this.loadActiveRecords();this.loadCompletedRecords();this.loadParkingStats();}loadUserRecords() {this.parkingService.getUserRecords(this.selectedUserId).subscribe((res: any) => this.userRecords = res.data);}loadActiveRecords() {this.parkingService.getActiveRecords().subscribe((res: any) => this.activeRecords = res.data);}loadCompletedRecords() {this.parkingService.getCompletedRecords().subscribe((res: any) => this.completedRecords = res.data);}loadParkingStats() {this.parkingService.getParkingStats().subscribe((res: any) => this.parkingStats = res.data);}
}

step6:C:\Users\Administrator\WebstormProjects\untitled4\src\app\park\park.component.html

<!-- app.component.html -->
<div class="container"><!-- 用戶選擇 --><div class="user-select"><label>選擇用戶ID: </label><input type="number" [(ngModel)]="selectedUserId" (change)="loadUserRecords()" min="1" max="10"></div><!-- 用戶停車記錄 --><section><h2>用戶停車記錄 (ID: {{selectedUserId}})</h2><table *ngIf="userRecords.length > 0"><thead><tr><th>車主</th><th>車牌號(hào)</th><th>車位位置</th><th>入場(chǎng)時(shí)間</th><th>離場(chǎng)時(shí)間</th><th>費(fèi)用</th></tr></thead><tbody><tr *ngFor="let record of userRecords"><td>{{ record.owner }}</td><td>{{ record.license_plate }}</td><td>{{ record.space_location }}</td><td>{{ record.entry_time | date:'medium' }}</td><td>{{ record.exit_time | date:'medium' }}</td><td>{{ record.fee | currency:'CNY':'symbol' }}</td></tr></tbody></table><p *ngIf="userRecords.length === 0">暫無停車記錄</p></section><!-- 當(dāng)前停車記錄 --><section><h2>當(dāng)前停車記錄</h2><table *ngIf="activeRecords.length > 0"><thead><tr><th>車牌號(hào)</th><th>車主姓名</th><th>進(jìn)入時(shí)間</th><th>車位位置</th></tr></thead><tbody><tr *ngFor="let record of activeRecords"><td>{{ record.license_plate }}</td><td>{{ record.owner_name }}</td><td>{{ record.entry_time | date: 'yyyy-MM-dd HH:mm' }}</td><td>{{ record.space_location }}</td></tr></tbody></table><p *ngIf="activeRecords.length === 0">當(dāng)前沒有車輛停放</p></section><!-- 完成停車費(fèi)用 --><section><h2>歷史費(fèi)用明細(xì)</h2><table *ngIf="completedRecords.length > 0"><thead><tr><th>車型</th><th>費(fèi)率 (小時(shí))</th><th>停車時(shí)長(zhǎng)</th><th>總費(fèi)用</th><th>支付方式</th></tr></thead><tbody><tr *ngFor="let record of completedRecords"><td>{{ record.vehicle_type }}</td><td>{{ record.rate | currency:'CNY':'symbol' }}</td><td>{{ record.hours }} 小時(shí)</td><td>{{ record.total_fee | currency:'CNY':'symbol' }}</td><td>{{ record.payment_method }}</td></tr></tbody></table><p *ngIf="completedRecords.length === 0">暫無歷史費(fèi)用記錄</p></section><!-- 車位統(tǒng)計(jì) --><section><h2>車位利用率統(tǒng)計(jì)</h2><div class="stats-container" *ngIf="parkingStats.total_spaces"><div class="stat-item"><span class="label">總車位數(shù):</span><span class="value">{{ parkingStats.total_spaces }}</span></div><div class="stat-item"><span class="label">已用車位:</span><span class="value">{{ parkingStats.occupied }}</span></div><div class="stat-item"><span class="label">空閑車位:</span><span class="value">{{ parkingStats.available }}</span></div><div class="stat-item highlight"><span class="label">利用率:</span><span class="value">{{ parkingStats.usage_rate }}%</span></div><div class="stat-item highlight"><span class="label">空閑率:</span><span class="value">{{ parkingStats.free_rate }}%</span></div></div><p *ngIf="!parkingStats.total_spaces">加載統(tǒng)計(jì)數(shù)據(jù)中...</p></section>
</div>

step7:C:\Users\Administrator\WebstormProjects\untitled4\src\app\park\park.component.css

/* app.component.css */
.container {max-width: 1200px;margin: 20px auto;padding: 20px;
}section {margin-bottom: 40px;background: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}h2 {color: #2c3e50;border-bottom: 2px solid #3498db;padding-bottom: 10px;margin-bottom: 20px;
}table {width: 100%;border-collapse: collapse;margin-top: 15px;
}th, td {padding: 12px;text-align: left;border-bottom: 1px solid #ecf0f1;
}th {background-color: #3498db;color: white;
}tr:hover {background-color: #f8f9fa;
}.user-select {margin-bottom: 30px;padding: 15px;background: #f8f9fa;border-radius: 6px;
}.user-select input {padding: 8px;border: 1px solid #ddd;border-radius: 4px;
}.stats-container {display: grid;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));gap: 20px;margin-top: 20px;
}.stat-item {background: #f8f9fa;padding: 15px;border-radius: 6px;text-align: center;
}.stat-item .label {display: block;color: #7f8c8d;margin-bottom: 5px;
}.stat-item .value {font-size: 1.4em;color: #2c3e50;font-weight: 500;
}.highlight .value {color: #3498db;
}

end