使用 Firebase 创建简单的博客答案

【问题标题】：Creating simple blog with Firebase使用 Firebase 创建简单的博客
【发布时间】：2014-01-04 04:52:58
【问题描述】：

因此，对于学校，我必须创建一个简单的博客，其中包含两个页面，一个用于创建新帖子，一个用于显示帖子，使用 firebase 在线存储来存储帖子。麻烦是我对此很陌生，并且发现知道该做什么以及如何做非常令人困惑。到目前为止，这是我创建新帖子的第一页：

    <html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type='text/javascript' src='https://cdn.firebase.com/v0/firebase.js'></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <title>Create New Post.</title>
</head>
<body>
    <div class="blog"><h1>My Blog</h1></div>
    <hr>
    <div class="title"><h2>Create New Post</h2></div>
    <form>
        <div class="post-title">
            <input type="text" placeholder="Post Title">
        </div>
        <div class="post-content">
            <textarea type="text" placeholder="Post Content"></textarea>
        </div>
        <button type="submit" class="submit">Submit</button>
    </form>
    <a href="posts.html">View Posts.</a>
</body>

这里是查看帖子的页面：

    <html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type='text/javascript' src='https://cdn.firebase.com/v0/firebase.js'></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <title>Posts.</title>
</head>
<body>
    <div class="blog"><h1>My Blog</h1></div>
    <hr>
    <div class="title"><h1>Welcome to my blog!</h1></div>

    <div class="result">
        <h4 class="post-title">Paragraph 1</h4>
            <p class="post-content">Welcome to my test blog. This is a paragraph.</p>
    </div>

        <a href="create.html">Create new post!</a>
</body>

我创建了一个 Firebase，目前有两个结构“内容”，其值为空，“标题”，其值为空。我需要完成的是，当我在创建帖子页面上的文本框上单击提交按钮时，该框的标题和内容将替换 firebase 中的“null”值。然后，我需要在阅读帖子页面上阅读和显示“标题”和“内容”的新值。

我还制作了一个名为 writeTo.js 的 JS 文件（只是开始帮助我思考），其内容为：

    var url = "https://blog-posts.firebaseio.com/";
    var firebaseRef = new Firebase(url);

    firebaseRef.child('Title').set(title);
    firebaseRef.child('Content').set(content);

这可能是一件很简单的事情，但我对此很陌生，想到它就让我头疼！我不希望你简单地为我做所有的工作，但我确实需要一些帮助。您能否就您建议按顺序执行的操作、要使用/研究的代码片段以及您认为会有所帮助的任何其他内容给出明确的准确答案。问候。

【问题讨论】：

标签： javascript html blogs firebase

【解决方案1】：

要完成这项工作，您需要做两件事：

a) 为和字段分配 ID，以便您以后可以检索它们的值。 b) 将 firebase set() 调用包装成一个函数，当用户单击“创建新帖子”时，您需要连接该函数以调用该函数。

要做 (a)，只需将 id='foo' 添加到标签。

要执行 (b)，请使用 jQuery 之类的库 - 特别是 .click() 方法，该方法可让您将提交按钮绑定到您选择的函数，在这种情况下，该函数将包含 set 函数调用。

【讨论】：