本文介绍如何根据 ajax 返回数据中的 `bot` 布尔字段，动态为聊天消息容器添加 `right` 或默认类，从而在前端区分用户消息（左对齐）与机器人消息（右对齐），并保持 html 结构简洁、css 可扩展。
在构建实时聊天界面时，仅靠统一的 .chat 类无法体现消息发送方的身份差异。为实现“用户消息靠左、机器人消息靠右”的视觉逻辑，关键在于将后端返回的 model.bot 布尔值映射为前端 CSS 类名，并将其动态注入到消息容器元素中。
核心思路是：在 JavaScript 模板字符串拼接前，用三元表达式判断 model.bot 值，生成对应类名字符串（如 'right' 或空字符串），再将其插入
的 class 属性中。这样既无需重复编写 DOM 操作逻辑，也避免了冗余的条件分支。
以下是优化后的完整 JS 实现（含必要注释）：
$(document).ready(function() {
function imgMarkup(model) {
return model.mediasrc
? `@@##@@`
: '';
}
setInterval(function() {
$.ajax({
type: 'GET',
url: '/checkview',
success: function(response) {
console.log('Received messages:', response.models_to_return);
$('#display').empty();
response.models_to_return.forEach(function(model) {
// ✅ 动态决定额外 CSS 类：bot 为 true → 添加 'right'
const botClass = model.bot ? 'right' : '';
// ✅ 拼接完整 HTML 片段，支持多类共存
const temp = `
<div class="chat ${botClass}">
<span class="time-left">${model.datetime}</span>
<b>${model.user_id}</b>
<p>${model.room}</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10962" title="Java 接口排错助手"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="Java 接口排错助手" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill10962" title="Java 接口排错助手" class="overflowclass">Java 接口排错助手</a>
<p class="overflowclass">在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。</p>
</div>
<a rel="nofollow" href="/xiazai/skill10962" title="Java 接口排错助手" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
${imgMarkup(model)}
</div>
`;
$('#display').append(temp);
});
},
error: function(xhr, status, err) {
console.warn('AJAX request failed:', status, err);
}
});
}, 1000);
});
⚠️ 注意事项与最佳实践：
-
CSS 需补充 .chat.right 样式：仅添加类名无效，必须在 CSS 中定义其布局行为。例如：
.chat { max-width: 80%; margin: 0.5em 0; padding: 0.75em 1em; } .chat.right { margin-left: auto; /* 推向右侧 */ background-color: #007bff; /* 区分色 */ } .chat:not(.right) { background-color: #6c757d; /* 用户消息背景 */ } - 模板字符串安全建议：若 model.user_id 或 model.room 可能含 HTML 特殊字符（如 ），应使用 textContent 或 DOM 方法替代内联插值，防止 XSS；当前示例假设数据已可信。
- 性能优化提示：频繁的 setInterval + 全量重绘（empty() + 逐条 append()）在消息量大时可能卡顿。进阶方案可采用虚拟滚动、增量更新或 DocumentFragment 批量插入。
通过该方法，你无需修改后端结构或增加复杂状态管理，即可用最小代价实现语义清晰、样式可控的双侧消息布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
