SpringBoot 减肥食谱管理系统（中）：食谱与菜单配置实现

餐别信息 定义一日三餐或加餐的类型，支持一对多关联到菜单详情。

package com.yelang.project.extend.earthquake.domain;

import java.io.Serializable;
import java.util.List;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
import lombok.ToString;

/**
 * - 食谱餐别信息表
 */
@TableName(value = "biz_recipe_meal_type")
@NoArgsConstructor
@AllArgsConstructor
@Setter
@Getter
@ToString
public class RecipeMealType implements Serializable {
    private static final long serialVersionUID = 4399855059597304978L;

    @TableId(value = "pk_id")
    private Long pkId; // 主键

    @TableField(value = "recipe_id")
    private Long recipeId; // 食谱 id

    @TableField(value = "meal_type_name")
    private String mealTypeName; // 餐别名称，如早餐、加餐等

    @TableField(value = "order_num")
    private Integer orderNum; // 排序号

    @TableField(exist = false)
    private List<RecipeDetails> recipeDetailsList; // 菜单详情集合
}

菜单详情信息 具体的菜品名称及配方信息。

package com.yelang.project.extend.earthquake.domain;

import java.io.Serializable;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
import lombok.ToString;

/**
 * - 菜单详情信息表
 */
@TableName(value = "biz_recipe_details")
@NoArgsConstructor
@AllArgsConstructor
@Setter
@Getter
@ToString
public class RecipeDetails implements Serializable {
    private static final long serialVersionUID = -4003180539390925788L;

    @TableId(value = "pk_id")
    private Long pkId; // 主键

    @TableField(value = "meal_type_id")
    private Long mealTypeId; // 餐别 id

    private String name; // 名称

    private String formula; // 配方信息

    @TableField(value = "order_num")
    private Integer orderNum; // 排序号
}

Mapper 层遵循标准 MyBatis Plus 规范，此处不再赘述。

2. 业务层实现

业务层负责校验规则与数据关联，以下是几个关键场景的处理逻辑。

关于返回数量限制

在使用 MyBatis Plus 查询时，若需限制返回结果集，可直接追加 SQL 子句：

private FourSeasonsRecipe getFourSeasonsRecipe(FourSeasonsRecipe fourSeasonsRecipe) {
    QueryWrapper<FourSeasonsRecipe> queryWrapper = new QueryWrapper<>();
    queryWrapper.eq("food_id", fourSeasonsRecipe.getFoodId());
    if (StringUtils.isNotBlank(fourSeasonsRecipe.getFoodName())) {
        queryWrapper.like("food_name", fourSeasonsRecipe.getFoodName());
    }
    // 限制返回数量为 1
    queryWrapper.last(" limit 1 ");
    return this.baseMapper.selectOne(queryWrapper);
}

父子表单的新增实现

餐别与菜单详情是一对多关系，适合使用父子表单管理。新增时先保存父表获取主键，再批量插入子表并关联 ID。

@Override
@Transactional(propagation = Propagation.REQUIRED, rollbackFor = Exception.class)
public int insertEntity(RecipeMealType recipeMealType) {
    int result = this.baseMapper.insert(recipeMealType);
    Long pkId = recipeMealType.getPkId();
    List<RecipeDetails> recipeDetailsList = recipeMealType.getRecipeDetailsList();
    
    for (RecipeDetails details : recipeDetailsList) {
        details.setMealTypeId(pkId);
    }
    recipeDetailsService.saveBatch(recipeDetailsList);
    return result;
}

父子表单的编辑实现

编辑逻辑相对灵活，这里采用'先删后增'的策略简化事务处理。即删除原有子表记录，再批量插入新提交的数据。这种方式在实际业务中可根据需求调整为增量更新。

三、Thymeleaf 前端实现

后端完成后，使用 Thymeleaf 构建前端界面。采用单体架构集成，便于快速部署。

1. 食谱管理实现

列表页需支持按地区 Tab 切换，并记住当前选择状态。通过 JavaScript 动态打开标签页：

function recipemealtypeConfig(recipeId, foodName) {
    var url = ctx + "/eq/foodarea/recipemealtype/" + recipeId;
    $.modal.openTab("[" + foodName + "] 餐别配置", url);
}

新增页面需支持四季选择，界面效果直观清晰。

2. 餐别及详情实现

完成四季食谱定义后，进入餐别配置环节，包括早餐、中餐、晚餐及加餐的管理。这是饮食控制的核心部分。

3. 父子表单提交

父子表单与普通表单不同，需特殊处理数据绑定。HTML 中定义表格容器，JS 中初始化表格实例。

<h4>菜单详情</h4>
<div>
    <div>
        <button type="button" onclick="addRow()"><i>增加</i></button>
        <button type="button" onclick="sub.delRow()"><i>删除</i></button>
        <table></table>
    </div>
</div>

核心 JS 脚本负责列定义与交互：

$(function() {
    var data = [{
        pkId: "",
        name: "",
        formula: "",
        orderNum: "1"
    }];
    var options = {
        data: data,
        pagination: false,
        showSearch: false,
        showRefresh: false,
        showToggle: false,
        showColumns: false,
        sidePagination: "client",
        columns: [{
            checkbox: true
        }, {
            field: 'index',
            align: 'center',
            title: "序号",
            formatter: function(value, row, index) {
                var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                return columnIndex + $.table.serialNumber(index);
            }
        }, {
            field: 'name',
            align: 'center',
            title: '菜单名称',
            formatter: function(value, row, index) {
                var html = $.common.sprintf("<input type='text' name='recipeDetailsList[%s].name' value='%s'>", index, value);
                return html;
            }
        }, {
            field: 'formula',
            align: 'center',
            title: '配方信息',
            formatter: function(value, row, index) {
                var html = $.common.sprintf("<input type='text' name='recipeDetailsList[%s].formula' value='%s'>", index, value);
                return html;
            }
        }, {
            field: 'orderNum',
            align: 'center',
            title: '排序号',
            formatter: function(value, row, index) {
                var html = $.common.sprintf("<input type='text' name='recipeDetailsList[%s].orderNum' value='%s'>", index, value);
                return html;
            }
        }, {
            title: '操作',
            align: 'center',
            formatter: function(value, row, index) {
                var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index);
                return '<a href="javascript:void(0)" onclick="sub.delRowByIndex(\'' + value + '\')"><i></i>删除</a>';
            }
        }]
    };
    $.table.init(options);
});

function addRow() {
    var count = $("#" + table.options.id).bootstrapTable('getData').length;
    var row = {
        index: $.table.serialNumber(count),
        name: "",
        formula: "",
        orderNum: ""
    };
    sub.addRow(row);
}

以上配置即可实现父子表单的前端交互，实际效果符合预期。

四、总结

本文详细介绍了基于 SpringBoot 和 PostgreSQL 的减肥食谱管理系统中，食谱与菜单配置的完整实现流程。从数据库模型设计到后端业务逻辑，再到前端父子表单的交互，涵盖了全栈开发的关键环节。特别是针对一对多关系的增删改查，提供了可复用的代码模式，可为类似场景的开发提供参考。