mongodb图集如何提交表单数据

Question

i want a user to input data in a form i created and i want the data to be sent to mongodb atlas.我希望用户以我创建的表格输入数据，我希望将数据发送到 mongodb atlas。

so i host the form locally and it gives me an error "require is not defined".所以我在本地托管表单，它给了我一个错误“require is not defined”。

my question is do i have to bundle the mongodb module or is there a way to do it without bundleing.我的问题是我是否必须捆绑 mongodb 模块，或者有没有办法在不捆绑的情况下进行捆绑。

this is the code.这是代码。

I USE THE VSCODE LIVE EXTENSION TO HOST.我使用 VSCODE LIVE 扩展来托管。

document.querySelector(`input[type="submit"]`).onclick = () =>
{
    var x = document.forms["form1"]["username"].value;
    var password = document.forms["form1"]["password"].value;
    var email ={
        name : `${x}`,
        password : `${password}`
    };
    if(document.querySelector(`input[type="checkbox"]`).checked){
        var json = JSON.stringify(email);
        var MC = require('mongodb').MongoClient;
        var url = "mongodb+srv://<username>:<password>@cluster0.xjoqb.mongodb.net/myFirstDatabase?retryWrites=true&w=majority";
        MC.connect(url, (err, db) => {
            if (err) {
                throw err;
            }
            console.log(`Connected`);
            var data = db.db(`mydb`);
            data.createCollection(`first`, (err, res) => {
                if (err) throw err;
                console.log(`collection created`)
            });
            data.collection(`first`).insertOne(email, (err, res) => {
                if(err) throw err;
                console.log(`inserted`);
                db.close();
            });
        });
    }
}

This is the html这是html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="google-signin-client_id" content="707054985283-cirkm54740d0pm838hrgq7etkp3hu3ej.apps.googleusercontent.com">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
        
        <fieldset>
            <h1 id="greeting">Welcome Back</h1>
            <p id="greeting2">Let's Get Signed In</p>
            <form name="form1" class="form" method="POST" autocomplete="off" spellcheck="false"> 
                <div class="g-signin2" data-onsuccess="onSignIn"></div>
                <div class="con1">
                    <input type="text" id="name" name="username" placeholder="Enter Your Email Address">
                    <img src="https://img.icons8.com/windows/50/000000/name.png" class="nameicon">
                </div> 
                <div class="con2">
                    <input type="password" id="pass" name="password" placeholder="Enter Your Password">
                    <img src="https://img.icons8.com/windows/50/000000/password.png" class="passicon">  
                </div>
            </form>
            <a href="href">Forgot Password?</a>
            <div id="alm">
                <input type="checkbox" id="remember" name="remem">
                <label for="remem">Remember Me</label>
            </div>
            <form class="button1">
                <input type="submit" name="submit" id="submit1">
            </form>
        </fieldset>
</body>
<script src="script.js"></script>
</html>

Answer 1

Databases (remote or local) are server side services.数据库（远程或本地）是服务器端服务。 You need a back end app that handles the post request from the form located in the front end part and then from the backend trigger any action into Mongo Atlas.您需要一个后端应用程序来处理来自位于前端部分的表单的发布请求，然后从后端触发对 Mongo Atlas 的任何操作。

Going with a NodeJS & Express stack could be a good option for you (you will also need to work with mongo in the backend, but in this case you will be storing the data in a remote Mongo Database).使用 NodeJS 和 Express 堆栈对您来说可能是一个不错的选择（您还需要在后端使用 mongo，但在这种情况下，您将把数据存储在远程 Mongo 数据库中）。

mongodb图集如何提交表单数据

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-02-26 15:26:25

mongodb图集如何提交表单数据

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-02-26 15:26:25

解决方案1
1 已采纳 2022-02-26 15:26:25