后端应返回结构化json，含items、has_more、next_offset字段；前端用insertadjacenthtml('beforeend', htmlstring)追加内容，禁用按钮防连点，并配合loading状态与错误提示确保交互稳定。
后端必须返回结构化 JSON，不能返回 HTML 片段；前端用 insertAdjacentHTML 追加，而不是拼接 innerHTML —— 否则会重绘已有 DOM、破坏语义、埋下 XSS 风险。
后端接口该返回什么字段
不是随便塞个数组就行。关键字段必须明确且稳定：
-
items：本次要插入的条目数组，结构需与首屏一致（比如都有id、title、content） -
has_more：布尔值，决定“加载更多”按钮是否继续显示；别只看items.length === 0，那会误判错误空响应 -
next_offset或next_cursor：下一次请求的分页参数；避免前端靠offset + 10硬算，防止跳页、重复拉取 - 不返回
html字段，也不返回带标签的字符串 —— 这是安全红线
前端怎么追加新内容不闪不乱
核心是“不破坏已有 DOM 结构”。用 innerHTML += 看似简单，实则危险：
- 它会强制浏览器重新解析整个容器里的 HTML，已绑定的事件、输入框焦点、滚动位置全丢
- 正确做法是
container.insertAdjacentHTML('beforeend', htmlString)，只把新 HTML 插到末尾 - 如果后端返回的是纯数据（推荐），就用
items.map()拼字符串或document.createElement构建节点再append - 每次插入前，确保容器有明确的
id或class，别用模糊选择器如document.querySelector('button')找错父容器
按钮点击没反应或连点崩溃？检查这三件事
90% 的“点不动”问题都出在这几个地方：
- 按钮是
<button></button>但没写type="button"，或者在<form></form>里，点击默认触发表单提交 —— 必须加event.preventDefault()或改用type="button" - 没做防连点：点击后不立刻禁用按钮，用户手快连点两次，发出两个请求，后返回的覆盖先返回的，列表顺序错乱 —— 请求开始设
button.disabled = true，结束再恢复 - 没处理 loading 状态：按钮点击后没加
is-loading类，用户看不到反馈，以为卡死，又猛点 —— 建议配合 CSS 显示骨架或文字变“加载中…”
fetch 请求乱序覆盖怎么办
用户快速点两次，第二次请求先回来，把第一次的数据给冲掉了。这不是 UI 问题，是请求生命周期没管住：
- 最简方案：每次发请求前，先调
abortController.abort()（需在fetch里传signal） - 次选方案：给每次请求打时间戳
requestId = Date.now()，成功回调里先比对if (requestId !== latestRequestId) return - 更稳妥的做法：禁用按钮 + loading 状态 + 显式错误提示；网络失败时按钮必须可点，不能静默卡住
真正难的不是写几行 fetch，而是让“加载中”“加载失败”“已到底”三种状态，在弱网、连点、接口抖动下都稳得住 —— 这些边界情况，往往上线后才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
