如何将Discord Bot连接到HTML网站展示加入服务器数及选择合适后端语言

核心逻辑 #

你的需求非常轻量，不需要复杂的控制面板，整体流程三步即可完成：

1. 后端服务使用你Discord Bot的凭证调用Discord官方API，获取Bot加入的服务器总数
2. 后端提供一个简单的API接口，把拿到的服务器数量返回给前端
3. 前端页面请求这个接口，拿到数据后渲染到你现有的HTML页面上即可

后端语言选择 #

不存在所谓「Web开发领域最合适的后端语言」，不同业务场景、不同技术栈背景适合的语言都不一样。针对你这个轻量需求，优先选你自己最熟悉的语言即可，如果你没有掌握的后端语言，推荐两个入门成本最低的选项：

• Node.js：和前端JavaScript语法同源，不需要额外学习新语言，100行以内代码就能搞定全流程
• Python：语法简单易懂，Discord生态的第三方库非常完善，写起来也很快

具体实现步骤（以Node.js为例） #

1. 准备前置信息 #

先到Discord开发者后台拿到你的Bot的Token，注意这个Token绝对不能泄露到前端代码中，所有和Discord API的交互都必须放在后端执行，避免Token被盗导致Bot被恶意操作。

2. 编写后端接口 #

首先新建一个空文件夹作为后端项目，执行以下命令初始化项目、安装依赖：

npm init -y
npm install express cors axios

然后新建index.js文件，写入以下代码：

const express = require('express')
const cors = require('cors')
const axios = require('axios')
const app = express()
const PORT = 3000 // 可自定义端口

// 上线时请把CORS配置改成仅允许你的网站域名访问，避免接口被滥用
app.use(cors())

const DISCORD_BOT_TOKEN = '替换为你自己的Discord Bot Token'

app.get('/api/guild-count', async (req, res) => {
  try {
    // 调用Discord API获取Bot所在的服务器列表，limit最大支持200，服务器超过200需要额外处理分页
    const guildRes = await axios.get('https://discord.com/api/v10/users/@me/guilds?limit=200', {
      headers: {
        Authorization: `Bot ${DISCORD_BOT_TOKEN}`
      }
    })
    res.json({
      count: guildRes.data.length
    })
  } catch (error) {
    console.error('获取Discord数据失败：', error)
    res.status(500).json({
      error: '获取数据失败'
    })
  }
})

app.listen(PORT, () => {
  console.log(`后端服务已启动，访问地址：http://localhost:${PORT}`)
})

执行node index.js即可启动后端服务。

3. 修改现有HTML代码 #

你原来的HTML有个不规范的问题：导航栏的div放在了head标签里，head标签仅能放元信息、样式、标题这类内容，已经帮你修正了，同时加了服务器数量展示和数据请求逻辑：

<!DOCTYPE html>
<html>
   <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Beast Bot</title>
   </head>

   <body>
      <!-- 导航栏移到body里 -->
      <div class="topnav">
         <a class="active" href="#home">Home</a>
         <a href="#news">News</a>
         <a href="#contact">Contact</a>
         <a href="#about">About</a>
       </div>
      <div class="container">
        <div class="title">
           <p>Beast Bot :)</p>
           <!-- 新增服务器数量展示位置 -->
           <p id="guild-count">当前服务器数量：加载中...</p>
           <img class="img" src="images/kisspng-portable-network-graphics-computer-icons-transpare-braingoodgames-5c9d9c5093e378.8617067815538330406058.png" alt="Beast Bot头像">
        </div>
      </div>

      <script>
        // 页面加载完成后请求后端接口获取数据
        window.onload = async () => {
          try {
            // 上线后请替换为你实际部署的后端接口地址
            const res = await fetch('http://localhost:3000/api/guild-count')
            const data = await res.json()
            document.getElementById('guild-count').innerText = `当前服务器数量：${data.count}`
          } catch (err) {
            document.getElementById('guild-count').innerText = '服务器数量加载失败，请稍后重试'
          }
        }
      </script>
   </body>
</html>

上线注意事项 #

• 后端可以部署在任意支持Node.js的平台，普通云服务器、Serverless平台都可以
• 上线后一定要修改CORS配置，仅允许你的网站域名访问接口，避免接口被恶意调用消耗资源
• 绝对不要把Bot Token提交到公共代码仓库、或者写在前端代码里，泄露后会有Bot被盗的风险

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