javascript - 如何使用 javascript 将数据上传到 Firebase 数据库并在日期的帮助下检索它
问题描述
无论如何将数据上传到 Firebase 并检索它?使用包含两个文本框和保存和检索/刷新按钮的javascript。保存按钮将数据保存到 Firebase 数据库,检索/刷新按钮从 Firebase 数据库获取数据。
解决方案
是的,有办法。代码中有两个文本框,第一个是输入数据,第二个是选择日期。确保您已创建 Firebase 帐户,然后在测试模式下创建 Firebase 实时数据库。
将 Firebase 实时数据库规则更改为
{
"rules": {
".read": "true",
".write": "true"
}
}
索引.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">
<title>Document</title>
</head>
<body>
<div id="form_container">
<input placeholder="Enter Your Data" type="number" id="number"/>
</div>
<div id="form_container1">
<input placeholder="Enter Todays Date" type="date" id="todaydate"/>
</div>
<div id="button_container">
<button id="savedata" onclick="save()"> Save </button>
</div>
<div id="button_container3">
<button id="read" onclick="get()"> Read </button>
</div>
</body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.3.2/firebase-database.js"></script>
</html>
index.js
// Add here Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
// Initialize Firebase firebase.initializeApp(firebaseConfig);
function save()
{
var data = document.getElementById('number').value
var date = document.getElementById('todaydate').value
database.ref('users/' + date).set({
data : data,
date : date
})
alert('Saved')
}
function get() {
var date = document.getElementById('todaydate').value
var user_ref = database.ref('users/' + date)
user_ref.on('value', function(snapshot) {
var data = snapshot.val()
document.getElementById('number').value = snapshot.val().data;
})
}
推荐阅读
- laravel - 如何在验证电子邮件字段时允许更多字符?
- c# - 为什么字符串常量的 switch-case 语句在 Visual Studio 2019(16.0.3 之前)中需要默认值,但在 Visual Studio 2017 中不需要?
- python - 反转数据框中给定日期的时间
- typescript - 打字稿检查“任何”类型
- c# - 使用控制台应用程序 c# 打开批处理文件时如何停止命令提示符闪烁?
- django - 环境变量,错误:django.core.exceptions.ImproperlyConfigured:INSTALLED_APPS 设置必须是列表或元组
- python - 仅在双引号上分解长段文本引号?
- python - 在 elasticsearch 上使用 python 对所有字段进行搜索
- java - 如何在Android中的用户输入表单上获取选中的单选按钮并将选择存储为字符串
- python-3.x - Matplotlib 函数可视化随着精度的变化而变化