Автоматически создавать новые страницы в Firebase Hosting на пользовательских событиях (JAVASCRIPT) - PullRequest
Новая
       4

Автоматически создавать новые страницы в Firebase Hosting на пользовательских событиях (JAVASCRIPT)

0 голосов
/ 10 апреля 2020

Я создаю проект блога на сайте с использованием Firebase.

То, что я хочу - создать совершенно новую страницу для сообщений блога, как только пользователь USER создаст ее.

FOR EXAMPLE -

  • Если пользователь отправляет пост с заголовком: «Лучшие часы 2019 года» .

  • тогда он должен создать новую страницу, например: "blog.com/best-watches-in-2019.html"

Я много искал в Интернете об этом, но я все еще новичок в Firebase. Пожалуйста, помогите мне с решением проблемы, ребята, или обходной путь, если это невозможно напрямую.

1 Ответ

1 голос
/ 12 апреля 2020

На следующей странице HTML показано, как выполнить запрос к базе данных Firestore при открытии страницы HTML на основе значения, переданного в качестве параметра строки запроса.

Итак, вы должны сделать следующее :

  • Создайте коллекцию с именем blogPosts в своей базе данных Firestore
  • Добавьте документ, например, с идентификатором best-watches-in-2019 и полем с именем field1, в который вы вводите любое строковое значение
  • Скопируйте приведенный ниже код HTML и создайте страницу HTML, которую вы сохраните на своем компьютере.
  • Откройте страницу в браузере и добавьте best-watches-in-2019 в качестве строки запроса параметр в следующем виде: 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>
...