如何设计动态座位规划器？基于数据库座位数据的开发问询

嘿，结合你给出的seat和seat_reserved实体类，我来帮你梳理一套实用的动态座位规划器设计方案，从数据层到前端渲染都给你捋清楚：

1. 核心需求梳理 #

首先明确咱们要实现的核心功能：

• 针对指定影厅（authorium_id）和场次（screening_id），加载所有座位信息
• 标记出该场次下已预订的座位
• 支持用户选择/取消可选座位，并完成预订流程

2. 数据查询逻辑：关联座位与预订状态 #

要生成座位表，第一步是把座位基础信息和对应场次的预订状态关联起来。这里推荐用左连接的方式，确保能拿到所有座位，哪怕是未被预订的。

SQL 查询示例 #

SELECT 
    s.id AS seat_id,
    s.row,
    s.number,
    CASE WHEN sr.id IS NOT NULL THEN 1 ELSE 0 END AS is_reserved
FROM seat s
LEFT JOIN seat_reserved sr 
    ON s.id = sr.seat_id 
    AND sr.screening_id = @targetScreeningId
WHERE s.authorium_id = @targetAuditoriumId
ORDER BY s.row, s.number;

C# EF Core 查询示例 #

如果用Entity Framework Core，可以这样写：

// 先定义一个DTO来承载座位状态信息
public class SeatStatus
{
    public int Id { get; set; }
    public int Row { get; set; }
    public int Number { get; set; }
    public bool IsReserved { get; set; }
}

// 查询逻辑
public async Task<List<SeatStatus>> GetSeatStatuses(int targetAuditoriumId, int targetScreeningId)
{
    return await _context.Seats
        .Where(s => s.authorium_id == targetAuditoriumId)
        .Select(s => new SeatStatus
        {
            Id = s.id,
            Row = s.row,
            Number = s.number,
            IsReserved = _context.SeatReserved
                .Any(sr => sr.seat_id == s.id && sr.screening_id == targetScreeningId)
        })
        .OrderBy(s => s.Row)
        .ThenBy(s => s.Number)
        .ToListAsync();
}

3. 前端动态渲染座位表 #

拿到带状态的座位数据后，就可以按行分组渲染了。这里给个React的示例，其他框架思路类似：

前端组件示例 #

import { groupBy } from 'lodash'; // 可以用lodash分组，或者自己实现分组逻辑

function SeatPlan({ seats, onSeatSelect, selectedSeats }) {
    // 按行分组座位
    const seatsByRow = groupBy(seats, 'row');

    return (
        <div className="seat-plan-container">
            {/* 可以加影厅名称、场次信息等头部 */}
            <h3>影厅 {seats[0]?.authorium_id} - 场次 {seats[0]?.screening_id}</h3>
            
            {/* 渲染每一行座位 */}
            {Object.entries(seatsByRow).map(([rowNum, seatsInRow]) => (
                <div key={rowNum} className="seat-row">
                    <span className="row-number">Row {rowNum}</span>
                    {seatsInRow.map(seat => {
                        const isSelected = selectedSeats.some(s => s.id === seat.id);
                        return (
                            <button
                                key={seat.id}
                                className={`seat ${seat.IsReserved ? 'reserved' : ''} ${isSelected ? 'selected' : ''}`}
                                disabled={seat.IsReserved}
                                onClick={() => onSeatSelect(seat)}
                            >
                                {seat.number}
                            </button>
                        );
                    })}
                </div>
            ))}
        </div>
    );
}

CSS 样式参考 #

.seat-plan-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.seat-row {
    display: flex;
    align-items: center;
    margin: 10px 0;
    gap: 8px;
}

.row-number {
    width: 60px;
    text-align: right;
}

.seat {
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
}

.seat.reserved {
    background-color: #ccc;
    cursor: not-allowed;
}

.seat.selected {
    background-color: #4285F4;
    color: white;
}

4. 关键交互与并发处理 #

动态座位规划器最容易踩坑的是并发选座冲突，比如两个用户同时选同一个座位。这里给你两个解决方案：

方案1：临时锁定机制 #

新增一个seat_temp_lock表，结构可以是：

public class SeatTempLock
{
    public int id { get; set; }
    public int seat_id { get; set; }
    public int screening_id { get; set; }
    public string user_session_id { get; set; }
    public DateTime expires_at { get; set; }
}

• 用户选座时，后端创建临时锁定记录，设置5-10分钟过期时间
• 提交预订时，将临时锁定转为正式的seat_reserved记录，并删除临时锁定
• 定时清理过期的临时锁定记录（可以用后台任务）

方案2：乐观锁 #

在seat_reserved或seat表中加一个版本号字段，提交预订时检查版本号，确保座位未被其他用户修改。不过这种方式对用户体验不太友好，适合低并发场景。

5. 数据库优化建议 #

为了让查询更高效，建议给以下字段加索引：

• seat表的authorium_id字段（单索引）
• seat_reserved表的seat_id + screening_id复合索引（因为查询时会同时用这两个条件过滤）

内容的提问来源于stack exchange，提问作者Umut Gür