在Firebase托管中根据用户事件自动创建新页面(JAVASCRIPT) [英] Automatically Create New Pages in Firebase Hosting on user events(JAVASCRIPT)
问题描述
我正在使用Firebase创建一个博客网站项目.
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.
示例-
-
如果用户提交的帖子标题为:"2019年最佳手表" .
然后应创建一个新页面，例如:"blog.com/best-watches-in-2019.html"
then it should create a new page like: "blog.com/best-watches-in-2019.html"
我在网上搜索了很多相关内容，但是我仍然是Firebase的初学者.请为我提供解决方案的帮助，如果无法直接解决，请提供解决方法.
I searched the web a lot about this, but I'm still a beginner in Firebase. Please help me with a solution guys, or a workaround if it's not directly possible.
推荐答案
以下HTML页面显示了基于HTML作为查询字符串参数传递的值时，如何在打开HTML页面时查询Firestore数据库.
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:
- 在Firestore数据库中创建一个名为
blogPosts的集合 - 添加一个带有ID
best-watches-in-2019和一个名为field1的字段的文档，您可以在其中输入任何字符串值 - 复制下面的HTML代码，并创建一个保存在计算机上的HTML页面.
- 打开浏览器中的页面，并将
best-watches-in-2019作为查询字符串参数添加为以下内容:http://yourdirectory/yourpagename.html?contentId=best-watches-in-2019.
- Create a collection named
blogPostsin your Firestore database - Add a document with, for example, the id
best-watches-in-2019and a field namedfield1where 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-2019as 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>
这篇关于在Firebase托管中根据用户事件自动创建新页面(JAVASCRIPT)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
