时隔20年重拾HTML开发，如何实现标签系统的数据入库功能？

前端标签输入实现（原生无依赖） #

不用引入额外组件，几十行JS就能实现最多10个标签的输入功能：

• 页面放一个可见的输入框，再加一个隐藏input用来提交最终的标签列表
• 监听输入框的键盘事件，按下逗号/回车时自动把当前输入内容转为标签，最多生成10个，超出时给出提示
• 标签支持点击删除，每次标签更新时同步把所有标签用英文逗号拼接后写入隐藏input的value属性
  示例代码：

<div id="tagInputContainer">
  <div class="tags-list"></div>
  <input type="text" id="tagInput" placeholder="输入标签后按回车确认">
  <input type="hidden" name="tags" id="tagsHidden">
</div>
<script>
const maxTags = 10
const tagsList = document.querySelector('.tags-list')
const tagInput = document.getElementById('tagInput')
const tagsHidden = document.getElementById('tagsHidden')
let currentTags = []
// 监听回车/逗号输入
tagInput.addEventListener('keydown', e => {
  if (e.key === 'Enter' || e.key === ',') {
    e.preventDefault()
    const tag = tagInput.value.trim()
    if (tag && !currentTags.includes(tag) && currentTags.length < maxTags) {
      currentTags.push(tag)
      renderTags()
      tagInput.value = ''
    }
  }
})
// 渲染标签
function renderTags() {
  tagsList.innerHTML = ''
  currentTags.forEach((tag, idx) => {
    const tagEl = document.createElement('span')
    tagEl.className = 'tag-item'
    tagEl.innerText = tag + ' ×'
    tagEl.onclick = () => {
      currentTags.splice(idx, 1)
      renderTags()
    }
    tagsList.appendChild(tagEl)
  })
  tagsHidden.value = currentTags.join(',')
}
</script>

数据库存储方案 #

方案1：兼容原有表结构（无需改表，快速上线） #

如果不想改动现有数据库的10个标签字段结构，后端直接把前端传过来的标签字符串拆分，依次写入原有的Tag1到Tag10字段即可，原有读取逻辑完全不用改：

<?php
// 接收表单提交的标签
$tagsStr = $_POST['tags'];
$tagsArr = explode(',', $tagsStr);
// 最多取10个标签
$tagsArr = array_slice($tagsArr, 0, 10);
// 补全空值，适配10个字段
for ($i = 0; $i < 10; $i++) {
  $tagField = "Tag" . ($i + 1);
  $$tagField = isset($tagsArr[$i]) ? $tagsArr[$i] : '';
}
// 原有插入数据库逻辑，直接用$Tag1到$Tag10变量即可
?>

方案2：重构表结构（长期迭代最优） #

原来的10个列的标签设计扩展性差，建议改成三表关联结构，后续支持调整标签上限、按标签筛选查询的效率也更高：

1. media表：存储媒体资源的基础信息，保留原有除了10个标签字段外的所有字段，主键为media_id
2. tags表：存储所有标签的全局信息，字段为tag_id（主键，自增）、tag_name（唯一索引，避免重复标签）
3. media_tags关联表：存储媒体和标签的对应关系，字段为media_id、tag_id，两者设联合主键
   插入数据逻辑：

<?php
// 开启事务保证数据一致性
$pdo->beginTransaction();
try {
  // 先插入媒体基础信息，拿到新增的media_id
  $stmt = $pdo->prepare("INSERT INTO media (xxx,xxx) VALUES (?,?)");
  $stmt->execute([$xxx, $xxx]);
  $mediaId = $pdo->lastInsertId();
  // 处理标签
  $tagsArr = explode(',', $_POST['tags']);
  $tagsArr = array_slice($tagsArr, 0, 10);
  foreach ($tagsArr as $tagName) {
    // 标签不存在则先插入tags表
    $stmt = $pdo->prepare("INSERT IGNORE INTO tags (tag_name) VALUES (?)");
    $stmt->execute([$tagName]);
    // 拿到tag_id
    $stmt = $pdo->prepare("SELECT tag_id FROM tags WHERE tag_name = ?");
    $stmt->execute([$tagName]);
    $tagId = $stmt->fetchColumn();
    // 插入关联表
    $stmt = $pdo->prepare("INSERT INTO media_tags (media_id, tag_id) VALUES (?,?)");
    $stmt->execute([$mediaId, $tagId]);
  }
  $pdo->commit();
} catch (Exception $e) {
  $pdo->rollBack();
  die("数据插入失败：" . $e->getMessage());
}
?>

内容的提问来源于stack exchange，提问作者TheGasMan