在Firebase中根据用户事件（JAVASCRIPT）自动创建新页面_Javascript_Firebase_Google Cloud Firestore_Firebase Hosting

在Firebase中根据用户事件（JAVASCRIPT）自动创建新页面

javascript firebase google-cloud-firestore

在Firebase中根据用户事件（JAVASCRIPT）自动创建新页面,javascript,firebase,google-cloud-firestore,firebase-hosting,Javascript,Firebase,Google Cloud Firestore,Firebase Hosting,我正在使用Firebase创建一个博客网站项目我想要的是——一旦用户创建了博客文章，就为它创建一个全新的页面比如说- 如果用户提交的帖子标题为：“2019年最佳手表” 然后它应该创建一个新页面，如：“blog.com/best-watchs-in-2019.html” 关于这一点，我在网上搜索了很多，但我仍然是Firebase的初学者。请帮助我找到解决方案，如果无法直接解决，请提供解决方案。以下HTML页面显示了如何在打开HTML页面时，根据作为查询字符串参数传递的值查询Firestor

我正在使用Firebase创建一个博客网站项目

我想要的是——一旦用户创建了博客文章，就为它创建一个全新的页面

比如说-

如果用户提交的帖子标题为：“2019年最佳手表”
然后它应该创建一个新页面，如：“blog.com/best-watchs-in-2019.html”

关于这一点，我在网上搜索了很多，但我仍然是Firebase的初学者。请帮助我找到解决方案，如果无法直接解决，请提供解决方案。

以下HTML页面显示了如何在打开HTML页面时，根据作为查询字符串参数传递的值查询Firestore数据库

因此，您应该按照以下步骤操作：

在Firestore数据库中创建名为
```
blogPosts
```
的集合
添加一个文档，例如id
```
best-watches-in-2019
```
和一个名为
```
field1
```
的字段，您可以在其中输入任何字符串值
复制下面的HTML代码并创建一个保存在计算机上的HTML页面

在浏览器中打开页面，添加

best-watchs-in-2019

作为查询字符串参数，如下所示：

http://yourdirectory/yourpagename.html?contentId=best-手表-2019年版


变量配置={
apiKey:'xxxx'，
authDomain:'xxxx'，
projectId:'xxxx'
};
firebase.initializeApp（配置）；
$扩展({
getUrlVars:函数（）{
var vars=[]，
搞砸
var hashes=window.location.href
.slice（window.location.href.indexOf（“？”）+1）
.split（“&”）；
for（var i=0；i

它需要是HTML页面吗？它难道不是数据库中的一条记录吗，例如Firestore，打开时可以通过特定页面获取，例如

blog.com/page？contentId=AZERTYUIOP

（

AZERTYUIOP

是数据库记录/Firebase文档的id）。@RenaudTarnec你能告诉我怎么做吗？非常感谢，伙计！问题是，我不知道如何使用jQuery。我还是个初学者。我知道这是一段很长的代码，我也知道你一定花了很长时间才为我写这段代码。你能帮我看看这个JavaScript版本吗。我真的很感激。你应该通过应用中详细介绍的技术来适应它，非常感谢，雷拉德，我真的很感激。还有一个问题——谷歌这样的搜索引擎会把这些URL看作不同的页面吗？你好，Raghav，不，搜索引擎不会认为它们是不同的页面，因为内容是动态加载的。如果这是一个重要的需求，你应该采用另一个平台或方法，比如Wordpress或服务器端渲染（例如Nuxt.js），等等。。。。

<html>
  <head>
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
      crossorigin="anonymous"
    ></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-firestore.js"></script>
  </head>

  <body>
    <span id="field1"></span>

    <script>
      var config = {
        apiKey: 'xxxx',
        authDomain: 'xxxx',
        projectId: 'xxxx'
      };
      firebase.initializeApp(config);

      $.extend({
        getUrlVars: function () {
          var vars = [],
            hash;
          var hashes = window.location.href
            .slice(window.location.href.indexOf('?') + 1)
            .split('&');
          for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
          }
          return vars;
        },
        getUrlVar: function (name) {
          return $.getUrlVars()[name];
        },
      });

      $(document).ready(function () {
        var documentID = $.getUrlVar('contentId');

        firebase
          .firestore()
          .collection('blogPosts')
          .doc(documentID)
          .get()
          .then(function (doc) {
            if (doc.exists) {
              $('#field1').text(doc.data().field1);
            } else {
              // doc.data() will be undefined in this case
              console.log('No such document!');
            }
          })
          .catch(function (error) {
            console.log('Error getting document:', error);
          });
      });
    </script>
  </body>
</html>