Question

我为用户创建了一个注册页面，我希望在用户单击注册按钮时将输入的注册详细信息存储到FireStore。它没有显示任何错误，但数据未存储在firestore中。我的javascript文件是：

var config = {
    apiKey: "AIzaSyAJsAstiMsrB2QGJyoqiTELw0vsWFVVahw",
    authDomain: "websignin-79fec.firebaseapp.com",
    databaseURL: "https://websignin-79fec.firebaseio.com",
    projectId: "websignin-79fec",
    storageBucket: "",
    messagingSenderId: "480214472501"
  };
   firebase.initializeApp(config);
   var db=firebase.firestore();
  const inputTextfield = document.querySelector("#firstname").value;// it takes the values from signup page.
  const lastname = document.querySelector("#lastname").value;
  const email = document.querySelector("#email").value;
  const phonenumber = document.querySelector("#phone").value;
  //const savebutton=document.querySelector("#submit");
  console.log(inputTextfield);
  const save=document.querySelector("#submit");
  save.addEventListener("click",function() {
      db.collection("deyaPayusers").add({
                Name:inputTextfield,
                Email:email,
                PhoneNo:phonenumber,
                laseName:lastname,


      }).then(function() {

      console.log("Document successfully wriiten!");

})
.catch(function(error) {
    // The document probably doesn't exist.
    console.error("Error writing document: ", error);
});
});

我的注册页面是：

<!doctype html>
<html lang="en">
    <head>
        <title> deyaPay</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase-app.js"></script>
         <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
        <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
        <script src="https://www.gstatic.com/firebasejs/4.8.1/firebase-database.js"></script>
        <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase-firestore.js"></script>
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
        <link rel="stylesheet" href="main.css">

    </head>
    <body>
       <h1 style="text-align:center;"> Welcome to Signup page</h1>
    <form  action="home.html"method ="post" style="text-align:center" onsubmit="return myValidation();">
       <div class="form-group">
           <label> FirstName</label>
           <input type="text" id="firstname"></br>
           <label> Lastname</label>
           <input type="text" id="lastname"></br>
           <label> Email </label>
           <input type="email" id="email"></br>
           <label> Password </label>
           <input type="password" id="pass"></br> 
           <label>Phonenumber</label>
           <input type="text" id="phone"></br>
             <div class="form-check">
                   <label class="form-check-label">
                      <input class="form-check-input" type="checkbox"> Remember me
                   </label> 
            </div>
           <input type="submit" value="Register" id="submit",>
           <a href="login.html">already registered?</a>
        </div>
      </form>  
      <script type ="text/javascript">
           function myValidation() {
           var firestname=document.getElementById("firstname").value;
           var lastname=document.getElementById("lastname").value;
           var email=document.getElementById("email").value;
           var pswd=document.getElementById("pass").value;
           var phone=document.getElementById("phone").value;
           if((firestname=='')&&(lastname=='')){
            alert("enter firstname and lastname"); 
           }
           if(email==''){
           alert("enter email");
           }
           if((pswd=='')||(pswd.length<9)){
           alert("enter password and password must contain 9 characters");
           }
           if((phone=='')||(phone.length>10)||(phone.length<10)){
           alert("phonenumber must contain 10 numbers."); 
           }

           } 
        </script>
        <script type ="text/javascript" src = "./app.js"></script>
    </body>
 </html>

用户单击注册按钮时如何存储数据。

Answer 1

确保正确初始化Firestore

var app = firebase.initializeApp(config);

// Initialize Cloud Firestore through Firebase
const db = firebase.firestore(app);

这对我有用。除了Firestore初始化外，您的代码是完美的。

Answer 2

您需要在Firestore上创建一个集合，然后使用一个函数将收集到的数据添加到该集合中。这就是对我有用的方法，否则它仅存储在身份验证页面中。

z.B：

const profileCreation = (_profileInfo) => {
    dataSource.collection("user").doc(_profileInfo.email).set(_profileInfo).then(function() 
    });
}

Answer 3

const itemId = document.getElementById('itemid');
const itemname = document.getElementById('itemname');
// Your web app's Firebase configuration
var  database = firebase.firestore();
var menuCollection = database.collection('Menu1');
// ------------ Add Data to FireStore ---------------------------------------------//
    additem.addEventListener('click' , e => {
      e.preventDefault();  
          menuCollection.doc(itemId.value).set({ 
Code: itemid.value,
Name: itemname.value,
Price: itemprice.value,  
})
.then(()=> {console.log('Data Successfully Written ');})
.catch(error => {console.error(error)});
  });

USER此代码或从该代码获取帮助，这将帮助您确定是否仍然遇到问题，然后回复我，我会尽力帮助您

如何从Web存储数据到firestore

3 个答案: