如何 post 从客户端动态列出项目 - MERN

Question

我正在尝试构建一个以食谱书为主题的 MERN 堆栈应用程序，但我无法最终确定食谱架构的逻辑。该应用程序是关于食谱的，人们将在其中 post 公开他们的食谱，因此必须动态构建食谱。我需要一些关于如何映射事物的意见或建议。这是我的应用程序的详细信息。

配方架构

const mongoose = require("mongoose");
const { ObjectId } = mongoose.Schema;

const recipeSchema = new mongoose.Schema(
    {
        nameOfRecipe:{ // Title 
            type: String,
            trim: true,
            required: true,
            maxlength: 32
        },
        description: { // Short description
            type: String,
            trim: true,
            required: true,
            maxlength: 32
        },
        category: { // This will populate from another schema
            type: ObjectId,
            ref: "Category",
            required: true
        },
        ingredientName: { // Ingredient title
            type: String, 
            maxlength: 25 
        },
        quantity: {
            type: Number, // Ingredient Quantity
            default: 0,
            min: 0,
            max: 9999
        },
        type:{
            type: String, // Ingredient type example: lb/kg/cups/tbsp
            trim: true,
            required: true,
            maxlength: 10
        },
        photo: { // image
            data: Buffer,
            contentType: String
        },
        method: { // Steps to cook
            type: String,
            required: true,
            maxlength: 2000
        },
        people: { // Number of people suggested to be served
            type: Number
        }
    },
    { timestamps: true }
);

module.exports = mongoose.model("Recipe", recipeSchema);

我对我的架构也不满意，因为我希望将成分显示为示例“80grm 全麦面粉”，但是我在上面创建的架构具有所有三个不同的属性和键值，而它必须显示为一根弦。这怎么可能？

我想要一个类似这样的UI...

就像 "Ingredient" 在项目符号中和 "Instructions" 在有序列表中的方式一样。但问题是从客户端这怎么可能。请指教....!!!

Answer 1

成分和说明必须是数组。

因此您需要为配料和说明创建嵌入式模式，如下所示：（请注意，为了简单起见，我删除了一些字段，并将方法字段重命名为更有意义的指令）

const ingredientSchema = new mongoose.Schema({
  ingredientName: {
    type: String,
    maxlength: 25
  },
  quantity: {
    type: Number,
    default: 0,
    min: 0,
    max: 9999
  },
  type: {
    type: String, // Ingredient type example: lb/kg/cups/tbsp
    trim: true,
    required: true,
    maxlength: 10
  }
});

const instructionSchema = new mongoose.Schema({
  order: Number,
  step: {
    type: String,
    required: true,
    maxlength: 2000
  }
});

const recipeSchema = new mongoose.Schema(
  {
    nameOfRecipe: {
      type: String,
      trim: true,
      required: true,
      maxlength: 32
    },
    description: {
      type: String,
      trim: true,
      required: true,
      maxlength: 32
    },
    ingredients: [ingredientSchema],
    instructions: [instructionSchema]
  },
  { timestamps: true }
);

如何 post 从客户端动态列出项目 - MERN

How to post list item dynamically from client side - MERN

user-interface

mongodb

reactjs

mongoose-schema

mern