NodeJS+MongoDB环境下Discord预警系统如何为每条预警生成对应DIV类

1. 后端查询对应服务器的预警数据 #

首先在Node.js的后台路由中，先从MongoDB查询指定guild的所有预警记录，以mongoose为例：

// 引入预警数据模型
const Warning = require('./models/Warning')

// 对应管理后台的页面路由
app.get('/guild/:guildId/warnings', async (req, res) => {
  const { guildId } = req.params
  // 查询当前服务器下的所有预警记录，lean()将mongoose文档转为普通JS对象方便渲染
  const warningList = await Warning.find({ guildId }).lean()
  // 将数据传递给EJS模板
  res.render('guild-warning-page', { warningList })
})

2. EJS模板循环渲染对应div #

不需要手动克隆div，直接用EJS的循环语法遍历预警数组，有多少条记录就会自动生成多少个对应类的div：

<!-- guild-warning-page.ejs 模板代码 -->
<div class="warning-container">
  <% warningList.forEach(warning => { %>
    <!-- 数组有多少元素就生成多少个warning-item类的div -->
    <div class="warning-item">
      <p>用户ID：<%= warning.userId %></p>
      <p>用户名：<%= warning.username %></p>
      <p>预警原因：<%= warning.reason %></p>
      <p>预警时间：<%= new Date(warning.createTime).toLocaleString() %></p>
      <!-- 其他你需要展示的预警字段 -->
    </div>
  <% }) %>
</div>

如果某服务器下有3条预警记录，以上代码会直接生成3个warning-item类的div，和数据库记录一一对应。

可选：前端动态渲染方案 #

如果需要无刷新更新预警列表，可以前端异步拉取数据后动态生成div：

async function loadGuildWarnings(guildId) {
  const res = await fetch(`/api/guild/${guildId}/warnings`)
  const warningList = await res.json()
  const container = document.querySelector('.warning-container')
  // 清空原有列表
  container.innerHTML = ''
  // 遍历生成div
  warningList.forEach(warning => {
    const warningDiv = document.createElement('div')
    warningDiv.className = 'warning-item'
    warningDiv.innerHTML = `
      <p>用户名：${warning.username}</p>
      <p>预警原因：${warning.reason}</p>
    `
    container.appendChild(warningDiv)
  })
}

注意事项 #

• 你的MongoDB预警模型需要预留guildId字段，用于区分不同服务器的预警记录
• 模板中使用的字段名需要和你数据库中存储的预警字段保持一致

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