html - 对于动态内容生成器来说，将 HTML 保存到 MySQL 数据库是一个好方法吗？

Question

我有一个新项目即将开始，我必须从头开始创建一个自定义内容编辑器(我将使用 Laravel 和 Vue JS)。每个条目都有一个由 blocks 定义的结构。具有富文本内容 fields在他们里面。这是所需布局的示例:

我的问题是:我将如何创建这些 block_types (标题、副标题、三栏行...)和 fields数据库里面？我认为保存 HTML structure字段到 block_types带有占位符的数据库表就可以了。

保存到数据库的 HTML 长文本，进入 block 类型的结构字段

<div class="row">
    <div class="col-4">///// CONTENT</div>
    <div class="col-4">///// CONTENT</div>
    <div class="col-4">///// CONTENT</div>
</div>

然后我会将内容动态添加到 /// CONTENT 中按顺序占位符。它确实看起来很麻烦，所以我想我可能从一开始就陷入了一个棘手的境地，有什么建议吗？

PS:这将是我到目前为止的数据库结构:

Answer 1

将 HTML 保存到数据库几乎从来都不是一个好主意。发生这种情况的一次是在 CMS 中，它们提供了一个富文本界面，用户可以使用简单的标签(粗体、列表等)设置文本样式。

将标记存储在数据库中的根本问题是您会沉迷于其结构，因为它是硬编码在数据库中的。

例如，如果有一天您决定这些存储的 div 标记之一应该具有特定的类，该怎么办？或数据属性。您必须更新每一行，或者更糟糕的是，仍然会通过 JS 影响 DOM 中的更改，这意味着 View 中生成的 HTML 与您存储的内容并不真正匹配。

存储标记还意味着存储比您可能需要的更多的数据，以及所有的间距。

更好的方法是定义一个 block 系统，其中有一个专用的 block 表，该表通过外键引用父 UI 表。所以它可能是这样的:

表 1:UI(界面、标签集合，根据您的示例)

----------------------------
| id | ...other fields ... |
----------------------------

表2:区 block

---------------------------------
| id | ui_id | parent_id | type |
---------------------------------

表 2 是递归的，因为它将存储代表父容器的 block 和其中的子 block :

• 外部 block (容器)将通过 ui_id 与 UI ID 相关
• 子 block 将通过parent_id与父 block 关联

至于type，您可以在此处采用此方法并运行它。也许这是一个字符串，表示它应该是什么类型的 block (例如“全角”、“grid-x3”等)。

当然，您可以通过 PHP 或 JS 等方式在 View 中渲染这些数据，再次递归以确保获得所有嵌套级别。

让我们运行一些示例数据。我们现在只使用一种“类型”的 block ，一个简单的“div”。

用户界面表:

----------------------------
| id | ...other fields ... |
----------------------------
| 1  | ...                 |
----------------------------

block 表:

---------------------------------
| id | ui_id | parent_id | type |
---------------------------------
| 1  | 1     | null      | div  |
---------------------------------
| 2  | 1     | 1         | div  |
---------------------------------
| 3  | 1     | 2         | div  |
---------------------------------

这表示三层嵌套 block ，即渲染时:

---------------------
| ----------------- |
| | ------------- | |
| | |           | | |
| | ------------- | |
| ----------------- |

希望这能为您提供一个起点。