时间戳

首页 > 解决方案 > 如何创建映射到嵌入式 JSON 数据模型的 HTML 输入表单？

javascript - 如何创建映射到嵌入式 JSON 数据模型的 HTML 输入表单？

问题描述

!. 我想在 NODE JS 中使用以下数据模型 - 但不确定我的 Web 表单在前端是否正确，以便我可以将数据映射到 mongo DB 数据库：我想在数据模型中使用嵌入式 json 数组，而不仅仅是列出数据。我出错的任何想法？

2.这里是数据模型（将通过 mongoose 映射到 mongo db 的 JSON）

const mongoose =require('mongoose');
const Schema = mongoose.Schema;

const plantBlogSchema = new Schema({
  
  name:{
    type:String,
    require: true
  },
  heat:{
    type:Number,
    Require:true
  },
  moisture:{
    type:Number,
    Require:true
  },
  light:{
    green:{type:Number, Require:true},
    red:{type:Number, Require:true},
    blue:{type:Number, Require:true},
    white:{type:Number, Require:true}
  },
  body:{
    type:String,
    require: true
  }
},{timeStamps:true});

const PlantInfo = mongoose.model('PlantInfo', plantBlogSchema);
model.exports= PlantInfo; //change to PlantInfo
  1. 这是我在前端的网络表单（HTML）
<html>
  <%- include('../partials/head.ejs') %>
  <body>
    <%- include('../partials/nav.ejs') %>  /* add partial html element*/
    
    <div class="create-plantblog content">
      <form>
        <lable for="name">Plant Name:</lable>
        <input for="text" id="name" required>
        <lable for="heat">Temperature:</lable>
        <input for="text" id="heat" required>
        <lable for="moisture">Moisture:</lable>
        <input for="text" id="moisture" required>
        
        <lable for="green">Green Light:</lable>
        <input for="text" id="green" required>
        <lable for="red">Red Light:</lable>
        <input for="text" id="red" required>
        <lable for="blue">Blue Light:</lable>
        <input for="text" id="blue" required>
        <lable for="white">White Light:</lable>
        <input for="text" id="white" required>
       
        <lable for="body">Plant Info:</lable>
        <input for="text" id="body" required>
        <textarea id="body" required></textarea>
        <button>Submit</button>
          
      </form>
      
    </div>
    
     <%- include('../partials/footer.ejs') %>
  </body>
</html>
  1. 这是我在前端显示的数据（HTML）
<html>
 <%- include('../partials/head.ejs') %>
  
  <body>
    
    <%- include('../partials/nav.ejs') %>  /* add partial html element*/
    
    <h1> Home</h1>
    <h2> your path to nide js</h2>
    
    <nav>
      <div class="site-title">
        <a href="/"><h1>Blog Ninja</h1></a>
        <p>Anet Ninja Sites</p>
      </div>
      <ul>
        <a href="/">Blogs</a>
        <a href="/about">About</a>
        <a href="blogs/create">New Blog</a>
      </ul>
    </nav>
    
    <div class="blogs Content">
      
      <h2>All Blogs</h2>
      
      
      <% if (plantInfo.length > 0){ %>
      
        <%plantInfo.forEach(plantInfo=>{ %>
          <a class="single" href="/plants/<%=plantInfo.id">
          <h3 class="name"> <%=plantInfo.name%> </h3>
          <p class="body"> <%=plantInfo.body%> </p>
          <p class="heat"> <%=plantInfo.heat%> </p>
          <p class="moisture"> <%=plantInfo.moisture%></p>
          <h3 class="subheading">Ligting</h3>
          <p class="green"> <%=plantInfo.light[0]%> </p>
          <p class="red"> <%=plantInfo.light[1]%> </p>
          <p class="blue"> <%=plantInfo.light[2]%> </p>
          <p class="white"> <%=plantInfo.light[0]+plant.light[1]+plant.light[2]%> </p>
          </a>
        <% }) %>
      <%}else{%>
        <p>there are no blogs to display...</p>
      <%}%>
      
    </div>
    
    <%- include('../partials/footer.ejs') %>
    
  </body>
  
</html>

标签： javascriptinputbackend

解决方案

推荐阅读