如何手动将文档添加到 Firestore 数据库中的集合?

2024-01-10

I have a quite simple database in Firestore (geographic name, lat and Lon). The database is very static and I only need to add or remove a record (document) once a while. How can I add a record manually to the collection, with the same fields as the other documents? When I press "Add document" the console asks me to input each field (see screenshot). enter image description here


下面的 HTML 页面将允许您写信给您的spotsFirestore 集合。

当然,您需要调整这些字段以及 Firebase 配置。

如果您想进行身份验证,只需添加两个额外的字段,例如用户名和密码并使用signInWithEmailAndPassword() https://firebase.google.com/docs/reference/js/firebase.auth.Auth?authuser=0#signinwithemailandpassword方法。 (如果您愿意,我可以调整页面)。

例如,您可以利用 SSL 证书在 Firebase 托管中托管此页面。或者您可以简单地将其保存在计算机上并使用浏览器打开它(在本例中不是 HTTPS,但这是一种很好的测试方法)。

<!DOCTYPE html>
<html>
  <head>
    <title>Firebase Form</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-app.js"></script>

    <!-- Add Firebase products that you want to use -->
    <script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-auth.js"></script>
  </head>

  <body>
    <div>
      <p>Name:</p>

      <input type="text" placeholder="Name" id="name" />

      <p>City:</p>

      <input type="text" placeholder="City" id="city" />

      <br /><br />
      <input type="submit" value="submit" class="submit" id="submit" />
    </div>

    <script>
      $(document).ready(function() {
        // Initialize Firebase
        var config = {
          apiKey: 'xxxxxxxxxxxxx',
          authDomain: 'xxxxxxxxxxxxx',
          databaseURL: 'xxxxxxxxxxxxx',
          projectId: 'xxxxxxxxxxxxx'
        };

        firebase.initializeApp(config);

        var database = firebase.firestore();

        $('#submit').on('click', function() {
          var nameValue = $('#name').val();
          var cityValue = $('#city').val();

          var dataObject = {
            name: nameValue,
            city: cityValue
          };

          database.collection('spots').add(dataObject);
        });
      });
    </script>
  </body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何手动将文档添加到 Firestore 数据库中的集合? 的相关文章

随机推荐

  • ember Uncaught TypeError:在存储中加载时,未定义不是一个函数

    我正在使用 ember 来显示从我的 golang 服务器收到的数据 数据采用 JSON 形式 所以我打开了一个 websocket 并尝试推送在商店中收到的消息 但我收到了此错误 未捕获的类型错误 未定义不是函数 这是我的 app js
  • “onscroll”在重绘之后或之前触发?

    我在 div 元素上有一个滚动条 在许多浏览器上 我在 MacOS 和 Linux 上的最新版本的 Chrome 和 Firefox 上测试了这一点 浏览器似乎确保在滚动触发重绘之前调用绑定到 onscroll 的代码 换句话说 滚动时以下
  • 另一种 jquery 可排序

    我有不同大小的元素 这些元素按照网格排列 如下图所示 并且我想正确拖放这些元素 有没有一个插件可以做到这一点 可排序不能正确执行 编辑 我所说的 正确 是指它应该表现正常 意味着如果我拖放右侧的大一个 它应该智能地重新排列 也许我只需要看到
  • Azure 辅助角色中通过 HTTP 提供的 WCF 服务?

    据我所知 您可以在 Azure 辅助角色上打开端口 80 并公开运行 WCF 服务 然而 我很难想出一个场景 在这个场景中 这样做比在网络角色中运行更有意义 有任何想法吗 以辅助角色托管的 WCF 服务本质上是自托管的 从 OnStart
  • 如果没有文本区域来发送文件路径,则使用 selenium WebDriver (java) 上传文件

    我试图使用 selenium WebDriver 在 dropbox com 中上传文件 当我单击选择文件时 它会自动弹出一个窗口 它们没有用于发送文件路径的文本区域 遇到这种情况怎么处理 在某些情况下 人们使用 Robot 类 但我不明白
  • 从数组列表中删除元素后java.util.ConcurrentModificationException android

    我的 Android 应用程序中有以下代码 callback executed after fetching the data public void OnPointsFetch ArrayList
  • common lisp,如何屏蔽键盘输入

    这是 Common Lisp 中用于 Hangman 类型游戏的控制台程序 第一个玩家输入一个字符串 让第二个玩家猜测 我的输入函数如下 不幸的是 第一个玩家输入的字符仍然可见 使用 JavaScript 就很简单 只需使用密码文本输入框即
  • 将奇怪的Python日期格式转换为可读日期

    我正在使用 Python 访问某些 Web 服务的移动 API 响应包含以下奇怪的日期表示法 u Date 1409522400000 0200 这应该是 2014 年 9 月 1 日 我不确定这是什么格式 但我想将其转换为可读的格式 即d
  • React Native 属性值在引号和大括号中

    我目前正在学习 React Native 并想知道为什么某些 props 的值包含在引号中 有些值在花括号中 何时应该使用引号和大括号是否有一个标准
  • 如何提前下载所有依赖包?

    我正在编写一个circleci 脚本 我想一次性解决所有依赖关系 因为我计划在这个脚本中多次运行maven 我想让它尽可能快 我注意到 Maven 仍然会下载 poms 即使它具有最新的依赖项 为了避免下载 poms 我将 ran mave
  • 迄今为止的 Postgres 字符串示例 10Apr77 到 10/04/1977

    大家下午好 我对 PostgreSQL 相当陌生 所以如果我的问题低于平均水平 请提前道歉 我收到了一些 csv flay 文件格式的数据 并且很好地插入到临时表中 以便我预览数据 我遇到的问题之一是数据字段存储为字符串值 例如 96 年
  • python内存错误的解决方法

    如何更改此功能以使其更加高效 我不断收到 MemoryError def vectorize sequences sequences dimension 10000 results np zeros len sequences dimens
  • CppRestSDK 如何POST多部分数据

    我正在尝试将多部分数据发布到服务器 我正在从 CPR 切换到 CPPRestSDK 但我似乎找不到任何相关文档 来自心肺复苏术 https github com whoshuu cpr https github com whoshuu cp
  • “start %comspec% /c script.cmd”与“start cmd /C script.cmd”

    以下命令有什么区别 start comspec c script cmd start cmd C script cmd 我需要 script cmd 的 cmd 窗口应在 script cmd 完成时自动关闭 comspec 只是指向cmd
  • Spark:我们如何在其他会话中访问内存表。

    我是 Spark 新手 所以我想知道我们如何在其他 Spark scala shell 会话中访问内存表 提前致谢 所以目前不支持 如果您想在作业之间共享 RDD 您应该查看 IBM 的 Spark Kernel 项目或 Ooyola Sp
  • 企业的 MVC 领域 - 好还是坏? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 当您有很多控制器时 在单个项目解决方案中引入区域确实可以改善分离 并允许轻松地将模块复制到解决方案中或从解决方案中复制出来 然而 在大型企业解决
  • 使用 Fluent API 请求进行代理身份验证?

    我目前正在使用带有代理信息的获取请求 String result1 Request Get http somehost version HttpVersion HTTP 1 1 connectTimeout 1000 socketTimeo
  • 无法使用ofstream将汉字写入文本文件

    我在用着std wofstream在文本文件中写入字符 我的字符可以包含来自不同语言 英语到中文 的字符 我想打印我的vector
  • 如何在 UIPickerView 中添加部分标题?

    这绝不是一个需要的事情 如果可以的话那就太好了 我不确定这是否可以做到 我有一个UIPickerView它将有 41 42 个选项 现在我按字母顺序列出了所有选项 我希望将它们分成几组 并且在每组之前我希望它有一个标题 与 TableVie
  • 如何手动将文档添加到 Firestore 数据库中的集合?

    I have a quite simple database in Firestore geographic name lat and Lon The database is very static and I only need to a