mongodb图集如何提交表单数据

Question

我希望用户以我创建的表格输入数据，我希望将数据发送到 mongodb atlas。

所以我在本地托管表单，它给了我一个错误“require is not defined”。

我的问题是我是否必须捆绑 mongodb 模块，或者有没有办法在不捆绑的情况下进行捆绑。

这是代码。

我使用 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();
            });
        });
    }
}

这是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

数据库（远程或本地）是服务器端服务。 您需要一个后端应用程序来处理来自位于前端部分的表单的发布请求，然后从后端触发对 Mongo Atlas 的任何操作。

使用 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