javascript - 如何从 nodejs 中的多步骤表单发布数据并表达到 MongoDB？-6ren

javascript - 如何从 nodejs 中的多步骤表单发布数据并表达到 MongoDB？

转载作者：行者123 更新时间：2023-12-05 06:06:21

我是 node.js 和 express 的新手。

我正在尝试使用 nodejs、express 和 MongoDB 创建名片生成器应用程序。

我在 ejs 中创建了一个多步骤表单，我想将输入的数据存储在 MongoDB 中。任何人都可以让我知道我该怎么做吗？以下是我尝试使用的 ejs 和 js 代码片段。

还提供了 MongoDB 模式。

提前致谢。

<section class="multi_step_form">
    <form action="/blogs" method="POST" enctype="multipart/form-data" id="msform">
        <!-- Tittle -->
        <div class="tittle">
            <h2>New Card</h2>
        </div>
        <!-- progressbar -->
        <ul id="progressbar">
            <li class="active">Personal details</li>
            <li>About Section</li>
            <li>Product Section</li>
        </ul>
        <!-- fieldsets -->
        <fieldset>
            <div class="form-row align-items-center">
                <div class=" col-md-3 ">
                    <h5>Name</h5>
                </div>
                <div class="form-group col-md-9 ">
                    <input type="text " class="form-control " placeholder="Name of the Card Holder" name="name " required>
                </div>
            </div>

            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Company</h5>
                </div>
                <div class="form-group col-md-9 ">
                    <input type="text " class="form-control" placeholder="Name of the Company" name="company">
                </div>
            </div>

            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Designation</h5>
                </div>
                <div class="form-group col-md-9 ">
                    <input type="text " class="form-control" placeholder="Designation at the Company" name="designation">
                </div>
            </div>

            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Phone Number</h5>
                </div>
                <div class="form-group col-md-9 ">
                    <input type="text " class="form-control" placeholder="Phone Number" name="phone_no">
                </div>
            </div>

            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Email</h5>
                </div>
                <div class="form-group col-md-9 ">
                    <input type="text " class="form-control" placeholder="Email ID" name="email">
                </div>
            </div>
            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Address</h5>
                </div>
                <div class="form-group col-md-9 ">
                    <input type="text " class="form-control" placeholder="Address" name="address">
                </div>
            </div>
            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Profile Photo</h5>
                </div>

                <div class="form-group col-md-9 ">
                    <input type="file" name="image" id="image" class="form-control-file">
                </div>
            </div>
            <div class="form-group">
            </div>

            <button type="button " class="action-button previous_button ">Back</button>
            <button type="button " class="next action-button ">Continue</button>
        </fieldset>

        <fieldset>
            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Year of Establishment</h5>
                </div>
                <div class="form-group col-md-9 ">
                    <input type="text " class="form-control" placeholder="Year of Establishment of the Company" name="year_of_establishment">
                </div>
            </div>
            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Description</h5>
                </div>
                <div class="form-group col-md-9 ">
                    <input type="text " class="form-control" placeholder="Description about the Company" name="description">
                </div>
            </div>
            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Profile Photo</h5>
                </div>

                <div class="form-group col-md-9 ">
                    <input type="file" name="image" id="image" class="form-control-file">
                </div>
            </div>
            <button type="button " class="action-button previous previous_button ">Back</button>
            <button type="button " class="next action-button ">Continue</button>
        </fieldset>
        <fieldset>
            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Product 1</h5>
                </div>
                <div class="form-group col-md-9 ">
                    <input type="text " class="form-control" placeholder="Name of product" name="product">
                </div>
            </div>
            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Description</h5>
                </div>
                <div class="form-group col-md-9 ">
                    <input type="text " class="form-control" placeholder="Description about the product" name="product_desc">
                </div>
            </div>
            <div class="form-row align-items-center">
                <div class="col-md-3 ">
                    <h5>Product Images</h5>
                </div>

                <div class="form-group col-md-9 ">
                    <input type="file" name="product_img" id="image" class="form-control-file">
                </div>
            </div>

            <button type="button " class="action-button previous previous_button ">Back</button>
            <button type="submit" class="action-button ">Save</a></button>
        </fieldset>
    </form>
</section>
<!-- End Multi step form -->


router.post('/', upload.single('image'), async(request, response) => {
    console.log(request.file);
    console.log(request.body);
    let blog = new Blog({
        name: request.body.name,
        company: request.body.company,
        designation: request.body.designation,
        phone_no: request.body.phone_no,
        address: request.body.address,
        img: request.file.filename,
        year_of_establishment: request.body.year_of_establishment,
        description: request.body.description,
        product_name: request.body.product_name,
        product_desc: request.body.product_desc,
        product_img: request.file.filename,
    });

    try {
        blog = await blog.save();
        response.redirect('blogs/editAbout');
        //response.redirect(`blogs/${blog.slug}`);
    } catch (error) {
        console.log(error);
    }
});

const blogSchema = new mongoose.Schema({名称: {类型:字符串，

},
img: {
    type: String,

},
company: {
    type: String,
    //required: true,
},
designation: {
    type: String,
},
phone_no: {
    type: String,
},
address: {
    type: String,
},
year_of_establishment: {
    type: String,
},
description: {
    type: String,
},
product_name: {
    type: String,
},
product_desc: {
    type: String,
},
product_img: {
    type: String,
},


timeCreated: {
    type: Date,
    default: () => Date.now(),
},
/*snippet: {
    type: String,
},*/

slug: { type: String, slug: 'name', unique: true, slug_padding_size: 2 },

});

最佳答案

<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <section class="multi_step_form">
      <form action="/blogs" method="POST"  enctype="multipart/form-data" id="msform">
          <!-- Tittle -->
          <div class="tittle">
              <h2>New Card</h2>
          </div>
          <!-- progressbar -->
          <ul id="progressbar">
              <li class="active">Personal details</li>
              <li>About Section</li>
              <li>Product Section</li>
          </ul>
          <!-- fieldsets -->
          <fieldset>
              <div class="form-row align-items-center">
                  <div class=" col-md-3 ">
                      <h5>Name</h5>
                  </div>
                  <div class="form-group col-md-9 ">
                      <input type="text " class="form-control " placeholder="Name of the Card Holder" name="name " required>
                  </div>
              </div>
  
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Company</h5>
                  </div>
                  <div class="form-group col-md-9 ">
                      <input type="text " class="form-control" placeholder="Name of the Company" name="company">
                  </div>
              </div>
  
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Designation</h5>
                  </div>
                  <div class="form-group col-md-9 ">
                      <input type="text " class="form-control" placeholder="Designation at the Company" name="designation">
                  </div>
              </div>
  
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Phone Number</h5>
                  </div>
                  <div class="form-group col-md-9 ">
                      <input type="text " class="form-control" placeholder="Phone Number" name="phone_no">
                  </div>
              </div>
  
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Email</h5>
                  </div>
                  <div class="form-group col-md-9 ">
                      <input type="text " class="form-control" placeholder="Email ID" name="email">
                  </div>
              </div>
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Address</h5>
                  </div>
                  <div class="form-group col-md-9 ">
                      <input type="text " class="form-control" placeholder="Address" name="address">
                  </div>
              </div>
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Profile Photo</h5>
                  </div>
  
                  <div class="form-group col-md-9 ">
                      <input type="file" name="image" id="image"   class="form-control-file">
                  </div>
              </div>
              <div class="form-group">
              </div>
  
              <button type="button " class="action-button previous_button ">Back</button>
              <button type="button " class="next action-button ">Continue</button>
          </fieldset>
  
          <fieldset>
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Year of Establishment</h5>
                  </div>
                  <div class="form-group col-md-9 ">
                      <input type="text " class="form-control" placeholder="Year of Establishment of the Company" name="year_of_establishment">
                  </div>
              </div>
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Description</h5>
                  </div>
                  <div class="form-group col-md-9 ">
                      <input type="text " class="form-control" placeholder="Description about the Company" name="description">
                  </div>
              </div>
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Profile Photo</h5>
                  </div>
  
                  <div class="form-group col-md-9 ">
                      <input type="file" name="image" id="image" multiple class="form-control-file">
                  </div>
              </div>
              <button type="button " class="action-button previous previous_button ">Back</button>
              <button type="button " class="next action-button ">Continue</button>
          </fieldset>
          <fieldset>
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Product 1</h5>
                  </div>
                  <div class="form-group col-md-9 ">
                      <input type="text " class="form-control" placeholder="Name of product" name="product">
                  </div>
              </div>
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Description</h5>
                  </div>
                  <div class="form-group col-md-9 ">
                      <input type="text " class="form-control" placeholder="Description about the product" name="product_desc">
                  </div>
              </div>
              <div class="form-row align-items-center">
                  <div class="col-md-3 ">
                      <h5>Product Images</h5>
                  </div>
  
                  <div class="form-group col-md-9 ">
                      <input type="file" name="image" id="image" multiple class="form-control-file">
                  </div>
              </div>
  
              <button type="button " class="action-button previous previous_button ">Back</button>
              <button type="submit" class="action-button ">Save</a></button>
          </fieldset>
      </form>
  </section>
  </body>
</html>

        
        /* Schema */
        
        var mongoose=require('mongoose');
        mongoose.connect('mongodb://localhost:27017/mydb',
        {
        useNewUrlParser: true,
        useUnifiedTopology: true,
        useCreateIndex: true,
        useFindAndModify: false
        }
        );
        
        var conn=mongoose.connection;
        
        const blogSchema = new mongoose.Schema({ 
            
            name: { type: String },
        
            company: {type: String },
        
            designation: { type: String },
        
            phone_no: { type: String },
        
            email: { type: String },
        
            address: { type: String },
        
            year_of_establishment: { type: String },
            
            description: { type: String },
        
            product_name: { type: String},
        
            product_desc: { type: String},
            
            avtar: [String],
        
            timeCreated: { type: Date, default: () => Date.now()},
            
        });
        
        var BlogSchema = mongoose.model('BlogSchema',blogSchema);
        
        module.exports=BlogSchema;
        
        /* Use Routes */
        var express = require('express');
        var router = express.Router();
        const multer = require('multer');
        const path = require('path');
        const userModal = require("../modals/userSchema")
        //router.use(express.static(__dirname+'./public/'));
        
        
        var Storage=multer.diskStorage({
          destination:"./public/images",
          filename:(req,file,cb)=>{
            cb(null,file.fieldname+"_"+Date.now()+path.extname(file.originalname));
          }
        });
        
        var upload=multer({
        storage:Storage
        }).array('image');
        
        
        /* GET users listing. */
        router.post('/blogs', upload,  async(request, response) => {
           let arr=[];
          for(let i=0;i<request.files.length;i++){
             arr[i]=request.files[i].filename;
          }
          let user = new userModal({
              name: request.body.name,
              company: request.body.company,
              designation: request.body.designation,
              phone_no: request.body.phone_no,
              email:request.body.email,
              address: request.body.address,
              year_of_establishment: request.body.year_of_establishment,
              description: request.body.description,
              product_name: request.body.product_name,
              product_desc: request.body.product_desc,
              avtar: arr,
          });
        
          try {
              blog = await user.save();
          } catch (error) {
              console.log(error);
          }
        });[![enter image description here][1]][1]
        
    /image/XHGzn.png
            enter code here
        
        module.exports = router;
    [1]: /image/XHGzn.png

关于javascript - 如何从 nodejs 中的多步骤表单发布数据并表达到 MongoDB？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65753628/

文章推荐： python - 使用 Selenium Webdriver 检测是否发送了 WhatsApp 消息

文章推荐： python - 为什么 os.fdopen() 忽略 "mode"参数？

文章推荐： Flutter - 如何动态PageView？

文章推荐： javascript - RXJS + Axios 错开网络请求

python - 了解fit_generator(steps_per_epoch)、validation_steps、evaluate_generator(步骤)和predict_generator(步骤)
我是在项目中使用 keras 的新手。我一直在我的模型中使用generator。我真的很困惑我应该输入什么值 1) In fit_generator : steps_per_epoch & vali
算法在一个组的成员内完成许多事务至少没有。步骤
假设我们有如下情况: A has to give $10 to B. B has to give $20 to C. C has to give $10 to D. 现在这种情况可以简化为: A lo
excel - 相对引用 - 步骤
我正在尝试对特定列(在工作表“OA”中)进行相对引用，我需要在 110 的步骤中检索新工作表中的单元格内容例如， =OA!$AB217 =OA!$AB327 =OA!$AB437 与其在每个单元格中
修复启动缓慢的 PowerShell 步骤
我的 PowerShell 控制台启动时间很慢(总是等待超过 5 秒)，并且希望获得有关故障排除步骤的建议，以找出瓶颈可能在哪里？我已经阅读了关于运行脚本的内容，-NoProfile防止模块等加载很
NativeScript slider 步骤
我在 NativeScript 应用程序中使用 slider 小部件，我想知道是否有步骤属性。在我的例子中，小部件代表金钱，我希望以 5 美元的增量滑动。我查看了文档，但找不到任何对这种情况有帮助的
NativeScript slider 步骤
我在 NativeScript 应用程序中使用 slider 小部件，我想知道是否有步骤属性。在我的例子中，小部件代表金钱，我希望以 5 美元的增量滑动。我查看了文档，但找不到任何对这种情况有帮助的
jquery - 如何减少 "each"步骤？
这是我的code : &n
java - 重载方法调用的参数匹配期间的详细过程(步骤)
为什么 (2) c.ERR(模棱两可)？第一个方法参数 - char ('a') 被扩展为 float => 匹配。如果找到匹配项，是否无需继续执行第 2 步(装箱/拆箱)或第 3 步(尝试可变参数
C# .net For() 步骤？
我有一个函数，它处理一个包含 6100 个列表项的列表。当列表只有 300 个项目时，该代码可以正常工作。但是立即与 6100 崩溃。有没有一种方法可以遍历这 6100 个项目，一次说 30 个，然后
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
1.制作PHP安装程序的原理其实PHP程序的安装原理无非就是将数据库结构和内容导入到相应的数据库中，从这个过程中重新配置连接数据库的参数和文件，为了保证不被别人恶意使用安装文件，当安装
angular - 动态对话框中的 PrimeNG 步骤
我创建了一个类似于 primeNG page 的步骤组件我想把他放在一个 dynamic dialog 里面但在应用它之后，“第 1 步”和“第 2 步”不会呈现。查看代码，我发现关键部分是我们打开
math - 误解 MixColumns 步骤
我在理解描述的 MixColumns 步骤时遇到问题 here . 我知道扩散，这一切都是有道理的，因为它指出每列都被视为多项式并乘以 GF(2^8) 的模。但是..乘以GF(2 ^ 8)。尽管域仍
build - 在构建失败条件下需要跳过 TeamCity 步骤
根据我对 TeamCity 工作原理的观察，我注意到在所有步骤执行完毕后评估构建失败条件。这很烦人，因为如果满足任何构建失败条件，我不能有一个不会执行的步骤。我不是指常见的构建失败条件，例如“至少一
Jenkins CopyArtifact 步骤 - 无法找到工件复制的项目
基于这篇试图在我的环境中测试管道代码的帖子。但它给出了以下错误消息。如何修复他的管道代码？ ERROR: Unable to find project for artifact copy: test
sql - 用于混淆/清除生产数据的简单工具/步骤
我参与了一个项目，需要向我的一位同事提供生产数据的子集（日期范围），以进行故障排除。我想将经过清理的生产数据子集插入新的数据库表中我的同事可以访问。请提出实现此目标的最佳方法。最佳答案最简单的方法
cucumber - 如何跳过 cucumber 步骤？
我有这样的场景: 鉴于我去这个页面当我输入 cucumber 时然后我点击然后我应该看到文字我不应该看到这条线如果我运行这个场景，它将执行所有 5 个步骤。但是我想跳过第4步(然后我应该看到
matlab - 避免情节/步骤/...输出
是否有任何功能可以避免 m 文件的绘图输出？我的意思是我在文件的开头放置了一个函数(如 clc)，然后所有绘图函数都被阻止。最佳答案您可以使用自己的(嵌套在您的函数内或同一目录中)重载内置绘图函
cucumber - 是否可以在多行上写一个小 cucumber 步骤？
我是小 cucumber 语言的新手，这在我看来是非常基本的问题，但我找不到答案。我知道可以在 Gherking 中编写多行步骤参数，如下所示: Given a blog post named "R
cucumber - 失败后继续运行 cucumber 步骤
即使其中一个步骤失败，有没有办法继续执行 Cucumber Steps。在我当前的设置中，当一个步骤失败时， cucumber 会跳过剩余的步骤......我想知道是否有某种方法可以设置 cucumb
optimization - 如何计算开始-步骤-停止编码方案的最佳参数？
start-step-stop 码是一种数据压缩技术，用于压缩相对较小的数字。该代码的工作原理如下:它具有三个参数，start、step 和 stop。 Start 确定用于计算前几个数字的位数。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何从 nodejs 中的多步骤表单发布数据并表达到 MongoDB？