Базовая динамическая страница с Firebase
Я новичок в этом, поэтому пожалуйста проявите немного милосердия. Я очень стараюсь.
У меня есть развернутый Firebase веб-сайт. Тип пользователя: domain.com/1
он откроет файл index.html в папке с именем 1. Прекрасно работает.
Теперь я хотел бы поделиться со своим другом другим контентом из БД для той же страницы.
Этот контент имеет ID и его размер 456`.
В базе данных Firebase у меня есть строка, соответствующая этому идентификатору с содержимым.
Я хочу поделиться с моим другом domain.com/1 + the ID 456 на URL-адрес, поэтому, когда он загрузит страницу, он получит контент, соответствующий 456. (взято из БД)
- Как должен выглядеть этот URL-путь, чтобы включить папку 1 и идентификатор 456? есть только один способ?
- Как будет выглядеть архитектура? пользователь загружает
htmlэтой страницы (без контента) с этим параметром 456,JSна стороне клиента возвращается в Firebase, чтобы получить контент и загрузить его на страницу? (Я сделал это, что работает (с использованием функций), но очень медленно.) - Может ли пользователь задать что-то вроде
domain.com/1?456и перенаправить на функцияна наg>Firebase, который уже извлечет данные (456) и вернет страницу *с включенными данными*? (один звонок на сервер) если да КАК?
Как это сделано ? 2 или 3?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Существуют разные способы реализовать ваше требование... Одна из "классических" архитектур - иметь фиксированную страницу (index.html в вашем случае), которая запрашивает базу данных Firebase Realtime при ее открытии.
Один из способов передать значение узла базы данных, который вы хотите запросить, — использовать строку запроса URL следующим образом: domain.com/1?id=456 (см. Как я могу получить значения строки запроса в JavaScript?)
Следующий HTML-код сделает свое дело:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<title>Title</title>
<script src = "https://www.gstatic.com/firebasejs/5.9.3/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: 'xxxxxxx',
authDomain: 'xxxxxxx',
databaseURL: 'xxxxxxx',
projectId: 'xxxxxxx'
};
firebase.initializeApp(config);
var rootRef = firebase
.database()
.ref()
.child('data');
var urlParams = new URLSearchParams(window.location.search);
var dbNodeID = urlParams.get('id');
rootRef
.child(dbNodeID)
.once('value')
.then(function(snapshot) {
var dataItem1 = snapshot.val().dataItem1;
document.getElementById('content').innerHTML = dataItem1;
});
</script>
</head>
<body>
<div id = "content"></div>
</body>
</html>
с моделью базы данных следующим образом:
DBRoot
- data
- 456
- dataItem1: "value-of-456"
- 789
- dataItem1: "value-of-789"
Это можно улучшить разными способами, но это слишком широко для одного ТАКОГО вопроса и ответа! Просто пример: поскольку запрос к базе данных является асинхронным, может потребоваться время для отображения значений на веб-странице. Вы можете по умолчанию отображать счетчик и скрывать его, когда получаете результат запроса (например, в методе then()). Другим примером улучшения может быть использование библиотек или фреймворков, таких как JQuery или, что еще лучше, Vue.js, Angular или React.
Что ж, ваш первый вопрос касается преимуществ и недостатков так называемых одностраничных приложений (SPA) и, в частности, по сравнению с «трехуровневыми» приложениями, которые отправляют обратно HTML-страницы, содержащие разметку и данные. Вы найдете много «литературы» в Интернете, см., например, medium.com/@goldybenedict/….
Что точно, так это то, что с Firebase вы не сможете сделать второй подход (или, может быть, «настроив» систему с помощью некоторых облачных функций, но это было бы безумием! :)). Многие известные сайты следуют модели SPA, например Gmail (туда и обратно отправляются только данные).
У вас вполне может быть такой URL-адрес, как domain.com/1/345, разобрать его (см. stackoverflow.com/questions/736513/…), а затем извлечь последнюю часть.
Спасибо, вы очень помогли. Я не мог найти правильный термин для этих двух подходов. Что касается чистого URL-адреса, когда я пытаюсь получить доступ к domain.com/1/345, он будет просматривать html-файл с именем 345 внутри папки1, не найдет и вернет ошибку. Если я напишу серверную функцию, которая перенаправляется, и извлеку 345, она тоже не будет работать (он все еще настаивает на поиске файла 345)
Что касается domain.com/1/345, вы правы, я не знал, что это вызовет эту проблему. Это то, что можно очень легко сделать с помощью современных фреймворков JavaScript, таких как Vue.js, с помощью маршрутизатора (см. router.vuejs.org). Однако освоение такого рода фреймворков требует времени...
Есть более простые решения: например, sammyjs.org — это довольно простая структура маршрутизатора. Он очень хорошо сочетается с knoutjs.com, еще одним фреймворком, который дает много преимуществ и намного проще в освоении, чем обычные подозреваемые (Vue.js, Angular или React), но предлагает меньший функциональный объем.
Спасибо ! Так я и сделал, но мне кажется немного глупым, что нельзя запросить URL-адрес с сервера, который вернет html, уже загруженный данными. Как это не единственный путь в 2019 году? (Один вызов сервера, а не 2). Другое дело, могу ли я сделать URL-адрес более чистым, позволив пользователю задать что-то вроде domain.com/1/345, а затем функция вернет URL-адрес, как вы показываете (1?id=345), так что общая ссылка будет быть чище?