Question

我想使用Firebase数据库存储来自单个网页网站的联系表单提交。该数据将与最终可能需要身份验证的后端技术集成，但此表单是一个简单的联系请求。

我正在使用下面的模块运行gulp / webpack设置以提交表单数据。一旦我存储数据，我计划使用示例Firebase功能与Nodemailer通过电子邮件将联系人的详细信息发送到Gmail帐户。

到目前为止，我一直无法进入表格！难道我做错了什么？我之前用React成功完成了这个，所以我有点困惑我的Babel / ES6设置无法正常工作。（仅供参考我在主JS文件中调用此函数）

任何帮助表示赞赏！看看下面：

import * as firebase from 'firebase';

// Initialize Firebase
try {
   var config = {
    apiKey: "<HIDDEN FOR SECURITY>",
    authDomain: "<HIDDEN FOR SECURITY>",
    databaseURL: "<HIDDEN FOR SECURITY>",
    projectId: "<HIDDEN FOR SECURITY>",
    storageBucket: "<HIDDEN FOR SECURITY>",
    messagingSenderId: "<HIDDEN FOR SECURITY>"
  };
  firebase.initializeApp(config);
} catch (e) {

}

function ContactForm() {
// Shortcuts to DOM Elements.
this.contactForm = document.getElementById('contact-form');
this.contactName = document.getElementById('contact-name');
this.contactEmail = document.getElementById('contact-email');
this.contactPhone = document.getElementById('contact-phone');
this.contactZipcode = document.getElementById('contact-zipcode');
this.contactMessage = document.getElementById('contact-message');
this.contactSubmit = document.getElementById('contact-submit');
}

/**
 * Saves a new contact to the Firebase DB.
 */

ContactForm.prototype.ContactSubmit = function(name, email, phone, zipcode, 
message) {
  var firebaseRef = firebase.database().ref('contacts');
  firebaseRef.child("contact").set({
    name,
    email,
    phone,
    zipcode,
    message
  }).then(() => {
    console.log('stored to firebase');
  }, (e) => {
    console.log('failed to store to firebase');
  });

  var contactRef = firebaseRef.child().push(contact);
  return contactRef;
}

  // Saves message on form submit.
ContactForm.prototype.onsubmit = function(e) {
  e.preventDefault();
    var name = contactName.value;
    var email = contactEmail.value;
    var phone = contactPhone.value;
    var zipcode = contactZipcode.value;
    var message = contactMessage.value;
    if (name && email && phone && zipcode && message) {
      return ContactSubmit(name, email, phone, zipcode, 
message).then(function() {
        contactSubmit.click();
      });
      contactName.value = '';
      contactEmail.value = '';
      contactPhone.value = '';
      contactZipcode.value = '';
      contactMessage.value = '';
    }
  };

 export default ContactForm;

Answer 1

首先，你没有提到这一行的孩子：

var contactRef = firebaseRef.child().push(contact);

除此之外，没有变量（我可以看到......）被称为contact所以这个（.push(contact)）不起作用。此外，您的用户将其联系人数据保存在一个对象属性中（“联系人”对象中的“联系人”子项）。如下图所示：

firebaseRef.child("contact").set({ ... });
// You need to distinguish them by either using the user's uid or using the push()

您要做的是有一种区分不同用户联系信息的方法（如上面代码的注释中所述。我选择使用后者）。例如：

var contactRef = firebaseRef.push({ ... }, error => { /* Do stuff when done */ })

在ContactForm.prototype.onsubmit {p>}中，如果没有ContactSubmit关键字，请致电this。在同一个函数调用中，您忘记在这里再次使用this：

.then(function() {
    contactSubmit.click();
  })

现在我再次查看了您的代码，我注意到您也忘了使用this

// here
var name = contactName.value;
// ... till here...
var message = contactMessage.value;

我不知道为什么，但你在做什么感觉有点矫枉过正。给我一点时间来尝试快速编写代码。

/**
 * Saves a new contact to the Firebase DB.
 */

// When the contactForm's been submitted, stop it from doing the normal thing of redirecting and do all this stuff below
contactForm.addEventlistener('submit', function(_eve) {
  _eve.preventDefault();

  // Get references to DOM Elements
  var name = document.getElementById('contact-name'),
    email = document.getElementById('contact-email'),
    phone = document.getElementById('contact-phone'),
    zipcode = document.getElementById('contact-zipcode'),
    message = document.getElementById('contact-message');

  var firebaseRef = firebase.database().ref('contacts');
  firebaseRef.push({
      name,
      email,
      phone,
      zipcode,
      message,
      id: uuid.v4() // or uuid() if you used the gist, or uuid.v1() if you are using the time based uuid generator.
    })
    .then(() => {
      console.log('stored to firebase');
      name.value = '';
      email.value = '';
      phone.value = '';
      zipcode.value = '';
      message.value = '';
    })
    .catch((e) => {
      console.log('Error:', e);
    });
}, false);

有。这应该工作。当用户提交表单时，我们将其停在其轨道中，获取您需要的值，然后进入Firebase，瞧！你已经完成了。

顺便说一下，您可能希望保存在Firebase中的属性可以帮助您识别用户，无论是通过uid还是您选择的任何方法。

在后台系统的Firebase数据库中存储联系人

1 个答案: