如何在不使用數據庫的情況下創建像 facebook 這樣的簡單帖子並將其堆疊在一起，僅使用 HTML、CSS 和 JS？

Question

你好，我又需要幫助了。 我正在創建一個簡單的網絡項目，我想與我的朋友分享。

我只想知道，有可能嗎？

---

“在文本框上輸入內容並將其與不同的框（如 facebook）堆疊在一起后，如何發布內容”

使用這些document.getElementById(id) 和 innerHTML以及您在那里提供的其他答案。

我知道如何只用一個來發布它，但我想讓它像這些一樣。

// 例如，我創建了一個帖子，我輸入的文本現在發布了。

// 現在，我想在不使用數據庫的情況下將它與不同的框/分區（如 facebook）堆疊在一起。

// 並且我輸入的新帖子現在位於我之前發布的框的頂部等等。

當然，在我關閉網站后，所有帖子都自動消失了。

' 你也可以創建你自己的不同答案，如果你願意，只是為了制作這種與我問的有關的東西。

---

預先感謝你們所有人，感謝那些回答和幫助我的人，也感謝那些試圖解決它以回答我的問題的人。

解決后，我希望這對任何人（觀眾）也有幫助，也可以用於您的項目。

Answer 1

這是我將如何實現這一目標。

步驟1

首先，我會創建一個json文件作為一種人造數據庫。

這可能看起來像：

[
  {
    "posts": [
      {
        "user": "Some User",
        "date": "dd-mm-yyyy-hh-mm-ss",
        "text": "The content of the post"
      }
    ]
  }
]

在這個“數據庫”中你想要多少信息真的取決於你，但是你擁有的越多，它就越強大。

第2步

導入您的json文件。 我使用此線程中的函數作為示例。

var json = (function() {
  var json = null;
  $.ajax({
    'async': false,
    'global': false,
    'url': "/content.json",
    'dataType': "json",
    'success': function(data) {
      json = data;
    }
  });
  return json;
})();

第 3 步

在 vanilla JS 中創建一個 Angular 風格的系統。 就像是：

let postElem = document.querySelector('.post-box');

for(var i = 0; i < json.length; i ++) {
  let newPost = postElem.cloneNode(true);
  newPost.innerText = json[i];
  document.querySelector('.postlist').appendChild(newPost);
}
postElem.remove();

這個例子只是從 HTML 中獲取一個給定的模板元素，為每個“帖子”復制它，給它內容，把它放到頁面中，然后刪除模板。

第四步

構建您的 HTML 腳手架。 就像是：

<form>
  <input type="text" name="post" placeholder="What's on your mind?">
  <input type="submit">
</form>

<div class="postlist">
  <div class="post-box"><p class="post-text"></p></div>
</div>

第 5 步

最后，編寫一個js函數，在提交時將您的帖子推送到json文件。

希望這有助於或給你一個方向。

這是一個工作原型：

 postList = [] document.querySelector('#add-post').addEventListener('submit', function(e) { //keep the submit button from redirecting the page e.preventDefault(); //check that post is not empty if (e.target.querySelector('.post-content').value != "") { //add post to the post array let newPost = {"text": e.target.querySelector('.post-content').value, "drawn": false} postList.push(newPost); //reset the input field e.target.querySelector('.post-content').value = ""; //run the post redraw script createPosts(); } else { alert("Please enter text to post! 😊"); } }); //create posts function createPosts() { //loop through the whole post array for(var i = 0; i < postList.length; i ++) { //if the 'drawn' attribute of the post object is false (meaning it has not yet been drawn), draw the post at the top of the list if (postList[i].drawn == false) { //create a new post element let newPost = document.createElement('div'); newPost.className = "post"; //set it text from the post array newPost.innerText = postList[i].text; //insert it at the top of the container document.querySelector('#post-list').insertBefore(newPost, document.querySelector('#post-list').firstChild); //set it to drawn so it is not redrawn later postList[i].drawn = true; } } }

 #post-list { width: calc(100vw - 64px); margin: 48px auto; } .post { width: 100%; padding: 8px 24px; border: 1px solid #ABABAB; border-radius: 16px; }

 <form id="add-post"> <input type="text" name="text" class="post-content" autocomplete="off" placeholder="What's on your mind?" required><input type="submit"> </form> <div id="post-list"> <div class="post">Test Post</div> </div>