Automatically Create New Pages in Firebase Hosting on user events(JAVASCRIPT)

后端未结

关注

 1  769

轻奢々

I\'m creating a blog Website project using Firebase.

What I want is - Create an entirely new Page for the Blog Posts once a USER creates it.

FOR EXAMPLE -

相关标签:

1条回答

执念已碎

2020-12-12 07:21

The following HTML page shows how you can query the Firestore database when the HTML page is opened, based on a value passed as a query string parameter.

So, you should do as follows:

Create a collection named blogPosts in your Firestore database
Add a document with, for example, the id best-watches-in-2019 and a field named field1 where you enter any string value
Copy the HTML code below and create an HTML page that you save on your computer.
Open the page in your brower and add best-watches-in-2019 as query string parameter as folllows: http://yourdirectory/yourpagename.html?contentId=best-watches-in-2019.

<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>

0 讨论(0)