使用javascript连接联系人表单到firebase-database

Question

我在javascript中有下面的代码，我想使联系人表单存储在firebase

import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.9.0/firebase-app.js'
const firebaseConfig = {
apiKey: '',
authDomain: '',
databaseURL: '',
projectId: '',
storageBucket: '',
messagingSenderId: '',
appId: '',
}
// Initialize Firebase
const app = initializeApp(firebaseConfig)
//reference messages collection
const messageRef = firebase.databaseURL().ref('messages')
//Listen for form submit
document.getElementById('contactForm').addEventListener('submit', submitForm)
function submitForm(e) {
e.preventDefault()
// Get Values
const name = getInputVal('yourName')
const gender = getInputVal('gender')
const message = getInputVal('input-area2')
saveMessage(name, gender, message)
}
// function to get form values
function getInputVal(id) {
return document.getElementById(id).value
}
// save the message to firebase
function saveMessage(name, gender, message) {
const newMessageRef = messageRef.push()
newMessageRef.set({
name: name,
gender: gender,
message: message,
})
}

这是HTML

<section class="row get-in-touch-row" id="contact">
<div
class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 text-center align-self-center get-in-touch-info"
>
<h2>get in touch</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
quisquam, temporibus suscipit totam soluta tenetur beatae ea non eum!
Quisquam!
</p>
<form action="" id="contactForm">
<input
class="input-area1"
id="yourName"
type="text"
placeholder="Your Name"
required
/>
<input
class="input-area1"
id="gender"
type="text"
placeholder="Gender"
required
/>
<textarea
name=""
id="input-area2"
cols="10"
rows="10"
placeholder="Message"
></textarea>
<button type="submit">SEND MESSAGE</button>
</form>
</div>
</section>
<script src="index-script.js"></script>
<script src="index-script2.js" type="module"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>

你可以看到的形式是我的网站上的一个部分，上面的javascript代码在index-script2下，给我的错误是没有定义firebase。我能做些什么来修复它并使它工作吗?

Answer 1

您的错误" firebase not defined "必须来自您调用firebase的唯一地方，即:

//reference messages collection
const messageRef = firebase.databaseURL().ref('messages')

Firebase version 9使用模块化语法，用自由函数someMethod()代替firebase.someMethod()语法

在版本9中，firebase/app包和其他包没有方法中的所有方法返回一个综合导出包中。相反，包导出单独的函数。

文档:https://firebase.google.com/docs/web/modular-upgrade

数据库初始化示例:https://firebase.google.com/docs/database/web/start

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";
// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
// ...
// The value of `databaseURL` depends on the location of the database
databaseURL: "https://DATABASE_NAME.firebaseio.com",
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Initialize Realtime Database and get a reference to the service
const database = getDatabase(app);

试着这样写你的firebase初始化代码和saveMessage()方法:

import { initializeApp } from 'firebase/app';
import { getDatabase } from "firebase/database";
const firebaseConfig = {
// ...
// The value of `databaseURL` depends on the location of the database
databaseURL: "https://DATABASE_NAME.firebaseio.com",
};
const firebaseApp = initializeApp(firebaseConfig);
// Initialize Realtime Database and get a reference to the service
const database = getDatabase(firebaseApp);
function saveMessage(name, gender, message) {
const newMessageRef = ref(database, 'messages'), {
name: name,
gender: gender,
message: message,
}

set(newMessageRef);
}

当然，在尝试写入数据之前，请确保您的HTML和表单提交代码没有错误。