单击按钮后将“正方形”转移到另一个页面到网格视图中

Question

我正在开展一个项目，学生或学校可以添加项目以搜索合作者。 我制作了一个页面，用户可以在其中填写详细信息，并且在字段旁边有一个预览方块，用户可以在其中看到它的外观。
用户点击上传后，应该会在主页（提要）上看到方块。所有这些方格都应采用网格布局，每行 3 或 4 个方格。

有没有办法可以将这些填充了细节的正方形转移到网格布局中？
这些方块也需要发送到数据库，但现在没有必要。

用户填写详情的页面

gridlayout(?) 应该在哪里以及可以看到正方形的主页

预览方块的代码

<div class="preview">
        <div class="content">
            <h1 id="previewDate"></h1>
            <h1 id="previewTitle"></h1>
            <p id="previewDescription"></p>
        </div>
        <div class="bottom">
            <button>See more</button>
            <p>Quick look</p>
        </div>
        <div class="aside">
            <div class="status">
                <img src="img/green.png" alt="status">
                <p>Open</p>
            </div>
            <div class="persons">
                <img src="img/Icon ionic-md-person.png" alt="persons">
                <p id="previewPersons"></p>
                <p>/</p>
                <p id="previewPersons2"></p>
            </div>
            <div class="hours">
                <img src="img/Icon awesome-clock.png" alt="time">
                <p id="previewHours"></p>
            </div>
        </div>
    </div>

Answer 1

你说“这些方块也需要发送到数据库，但现在没有必要。”但确实是这样。

正常流程是：

• 用户做某事来创建“事物”
• “东西”上传到服务器
• 在不同的页面上，从服务器中提取“事物”并显示

现在，如果您正在创建一个 SPA（单页应用程序），您可以将“事物”保留在内存中，并在切换时将其显示在另一个页面上。您列出的标签并不表明您正在使用 SPA（常见的 SPA 框架可能是 React、Vue、Angular 或 Lit/Polymer，尽管这些不是严格意义上的 SPA，您不需要框架SPA）。

同样，您也可以将“事物”存储在 LocalStorage、IndexedDB 或 cookie 中。

虽然所有这些都只能在用户的计算机上查看，并且可能不是您真正想要的，而且可能比仅将其上传到服务器更复杂。

您很可能在这个问题上本末倒置，先将其上传到服务器会让您的生活变得不那么复杂。