Как динамически разместить элемент списка со стороны клиента - MERN - PullRequest
Новая
       56

Как динамически разместить элемент списка со стороны клиента - MERN

0 голосов
/ 07 февраля 2020

Я пытаюсь создать приложение стека MERN с темой книг рецептов, я не могу завершить логи c схемы рецептов. Приложение о рецепте, где люди будут публиковать свои рецепты публично, поэтому рецепт должен быть построен динамически. Мне нужен совет или предложение о том, как составить карту. Вот подробности моего приложения.

Схема рецепта 

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);

Я также не удовлетворен своей схемой, так как хочу, чтобы ингредиент отображался в качестве примера "80 г цельнозерновой муки", но в схеме, которую я создал выше, все три имеют разные свойства и значения ключа, тогда как он должен отображаться в виде одной строки. Как это возможно?

Я хочу подобный пользовательский интерфейс ...

Sample Look

Как, например, "Ингредиент" в пуле и "Инструкции" "в упорядоченном списке. Но вопрос в том, как это возможно со стороны клиента. Пожалуйста, совет .... !!!

1 Ответ

1 голос
/ 07 февраля 2020

ингредиенты и инструкции должны быть массивом.

Поэтому вам нужно создать встроенные схемы для ингредиентов и инструкций, например: (обратите внимание, что я удалил некоторые поля для простоты, и переименовал поле метода в инструкции, которые имеют больше смысла ) 

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 }
);
...