12. 餐桌管理

904 字约 2 分钟读完879 次阅读更新于 2026/5/3

创建数据库表 tables

CREATE TABLE `tables` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `no` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '餐桌号',
  `unit` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '规格',
  `free` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '是否空闲',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='餐桌信息';

完成后台的CRUD

TablesController

TablesMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.mapper.TablesMapper">

    <insert id="insert">
        insert into tables (no, unit, free)
        values (#{no}, #{unit}, #{free})
    </insert>


    <update id="updateById">
        update tables
        <set>
            <if test="no != null">no = #{no},</if>
            <if test="unit != null">unit = #{unit},</if>
            <if test="free != null">free = #{free},</if>
        </set>
        where id = #{id}
    </update>

    <delete id="deleteById">
        delete
        from tables
        where id = #{id}
    </delete>

    <select id="selectAll" resultType="com.example.entity.Tables">
        select * from tables
        <where>
            <if test="no != null">
                no like concat('%', #{no}, '%')
            </if>
        </where>
        order by id desc
    </select>


</mapper>

完成前台页面开发

完成首页餐桌管理

餐饮.png

新增一个接口 用于点餐

@PutMapping("/addOrder")
public Result addOrder(@RequestBody Tables tables) {
    tablesService.addOrder(tables);
    return Result.success();
}

public void addOrder(Tables tables) {
    // 先查询当前的用户有没有占用餐桌
    Tables dbTables = tablesMapper.selectByUserId(tables.getUserId());
    if (dbTables != null && !dbTables.getId().equals(tables.getId())) {
        throw new CustomException("您已经预定了其他餐桌");
    }
    this.updateById(tables);
}

新增一个接口 根据当前的用户ID查询已经订餐的餐桌

@GetMapping("/selectByUserId/{userId}")
public Result selectByUserId(@PathVariable Integer userId) {
    Tables tables = tablesService.selectByUserId(userId);
    return Result.success(tables);
}

新增一个接口，退桌

@PutMapping("/removeOrder")
public Result removeOrder(@RequestBody Tables tables) {
    tablesService.removeOrder(tables);
    return Result.success();
}

public void removeOrder(Tables tables) {
    tablesMapper.removeOrder(tables.getId());
}

@Update("update tables set user_id = null, free = '是' where id = #{id}")
void removeOrder(Integer id);

Order.vue

管理员编辑餐桌的空闲状态

查询用户名称

<select id="selectAll" resultType="com.example.entity.Tables">
    select tables.*, user.name as userName from tables
    left join user
    on tables.user_id = user.id
    <where>
        <if test="no != null">
            tables.no like concat('%', #{no}, '%')
        </if>
    </where>
    order by id desc
</select>

当管理员设置餐桌状态是空闲的时候，我们就设置user_id = null

public void updateById(Tables tables) {
    if ("是".equals(tables.getFree())) {
        tables.setUserId(null);  // 清除占用的顾客信息
    }
    tablesMapper.updateById(tables);
}

image.png