📅 最后修改于: 2023-12-03 15:22:11.848000 🧑 作者: Mango
Firebase 是一个强大的实时数据库平台，可以通过 API 将其与 HTML、CSS 和 JavaScript 网站集成。该平台提供了许多功能，包括实时数据同步、身份验证、存储和托管文件等。
在此教程中，我们将创建一个简单的网站，向 Firebase 数据库中添加数据并显示数据列表。我们将使用 HTML 和 CSS 构建网站的外观，并使用 JavaScript 将数据发送到 Firebase 数据库。
首先，您需要创建一个免费的 Firebase 帐户。在 Firebase 网站，单击 "入门" 按钮并按照提示进行操作。
在 Firebase 控制面板中，单击 "添加项目" 按钮创建一个新项目。填写所需的详细信息，例如项目名称和地理位置，然后单击 "创建项目"。
在 Firebase 控制板中，单击 "设置" 按钮，选择 "照片" 并单击 "添加 Firebase 到你的网站"。复制自动生成的代码片段并将其粘贴到您的网站的 HTML 文件中。
<!-- 在 HTML 文件中引入 Firebase 库 -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-database.js"></script>
<!-- 初始化 Firebase -->
<script src="js/firebase.js"></script>
<script>
firebase.initializeApp({
// 粘贴 Firebase 配置信息
});
</script>
在这里，您可以看到我们引入了 Firebase 库及其数据库模块，并在我们的 JavaScript 文件中初始化了 Firebase 应用程序。
现在，我们已经设置 Firebase，我们可以开始构建我们的网站了。我们将使用 HTML 和 CSS 构建网站的外观，然后使用 JavaScript 将数据发送到 Firebase 数据库。
<!DOCTYPE html>
<html>
<head>
<title>存储并显示数据</title>
<!-- 在这里引入 CSS 文件 -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>数据存储在 Firebase</h1>
<form>
<label>名称：</label>
<input type="text" id="name" required>
<label>年龄：</label>
<input type="number" id="age" required>
<button type="submit" id="addBtn">添加</button>
</form>
<ul id="list"></ul>
<!-- 在这里引入 JavaScript 文件 -->
<script src="js/app.js"></script>
</body>
</html>
在此示例代码中，我们添加了一个表单，其中包含要添加到 Firebase 数据库中的名称和年龄字段，以及一个 "添加" 按钮。我们还为数据添加了用于显示列表的 ul 元素。
现在我们的 HTML 源代码已经编写好了，接下来我们要准备一些 CSS 样式来美化网站。
body {
background-color: #f8f8f8;
font-family: Arial, sans-serif;
}
h1 {
margin-bottom: 20px;
text-align: center;
}
form {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-bottom: 20px;
}
form label {
display: block;
margin-bottom: 5px;
}
form input {
padding: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
form button {
padding: 6px 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,.3);
cursor: pointer;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
padding: 10px;
margin-bottom: 5px;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
在这里，我们添加了一些 CSS 样式，以美化我们的网站。
现在我们要使用 JavaScript 将数据添加到 Firebase 数据库。创建一个新的 JavaScript 文件并将其引入到 HTML 中。
在此代码片段中，我们向列表中添加了一些数据，并使用 Firebase API 将这些数据发送到数据库中。
// 获取 Firebase 数据库引用
var database = firebase.database();
// 获取表单元素
var form = document.querySelector('form');
var nameInput = document.getElementById('name');
var ageInput = document.getElementById('age');
var list = document.getElementById('list');
// 添加提交事件监听器
form.addEventListener('submit', function(e) {
// 避免表单提交的默认操作
e.preventDefault();
// 获取输入框的值
var name = nameInput.value;
var age = ageInput.value;
// 创建一个新的数据对象
var newData = {
name: name,
age: age
};
// 将数据发送到 Firebase 数据库
database.ref('data').push(newData);
// 清空输入框的值
nameInput.value = '';
ageInput.value = '';
});
// 监听 Firebase 数据库
database.ref('data').on('value', function(snapshot) {
// 清空列表
list.innerHTML = '';
// 循环遍历数据库中的数据
snapshot.forEach(function(childSnapshot) {
// 获取数据
var data = childSnapshot.val();
// 创建 HTML 元素，将数据添加到列表中
var li = document.createElement('li');
li.innerHTML = '<b>' + data.name + '</b> (' + data.age + ')';
list.appendChild(li);
});
});
这就是我们的 JavaScript 代码。我们使用 Firebase API 将数据发送到数据库中，并使用该 API 监听数据库中的数据更改。
注意：在使用 Firebase API 时，需要使用 Firebase 引用访问数据库和可能的其他服务。在我们的例子中，我们使用 "database" 引用访问数据库中的 "data" 子节点。
现在，您已经学会了如何使用 HTML、CSS 和 JavaScript 创建一个将数据存储在 Firebase 中的网站。在此示例中，我们创建了一个简单的表单来添加数据，使用列表元素来显示该数据。我们还使用 Firebase API 将数据发送到数据库中，并使用该 API 监听数据库中的数据更改。