邀请跟踪器 node.js v13 - Javascript (1)

📌 相关文章

📜 邀请跟踪器 node.js v13 - Javascript (1)

📅 最后修改于: 2023-12-03 15:42:04.847000 🧑 作者: Mango

邀请跟踪器 node.js v13 - Javascript

邀请跟踪器是一种用于追踪邀请链接的工具，它可以帮助你了解你的邀请链接在哪些渠道被点击，并统计每个渠道的点击量。本文将介绍如何用node.js v13实现一个简单的邀请跟踪器。

技术栈

node.js v13
Express.js
MongoDB
Chart.js

功能介绍

记录每个被邀请人的来源（通过哪个渠道点击）
统计每个来源的点击量
使用Chart.js展示数据，便于查看

准备工作

在开始编写代码之前，需要安装以下软件：

node.js v13或以上版本
MongoDB

也可以选择在线使用MongoDB的服务，如MongoDB Atlas。

创建项目

创建一个新的目录，然后在命令行中运行以下命令以初始化项目：

npm init -y

这将生成package.json文件，用于管理项目依赖。

接下来，我们需要安装一些依赖：

npm install express mongodb chart.js

编写代码

连接MongoDB

const MongoClient = require('mongodb').MongoClient;

const url = 'mongodb://localhost:27017';
const dbName = 'tracker';

MongoClient.connect(url, { useNewUrlParser: true }, (err, client) => {
  if (err) {
    console.error('MongoDB connection failed: ', err);
    return;
  }

  console.log('MongoDB connected successfully');

  // Create collection and initialize app
  const db = client.db(dbName);
  const collection = db.collection('clicks');
  app.listen(port, () => console.log(`Server listening on port ${port}`));
});

在这个示例中，我们使用MongoClient连接本地MongoDB服务器，并且创建了一个名为“tracker”的数据库。如果连接失败，会输出错误信息。

处理路由

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, '/public/index.html'));
});

app.get('/click/:id', (req, res) => {
  const clickId = req.params.id;
  const click = clicks[clickId] || {};

  collection.insertOne({ source: click.source }, (err, result) => {
    if (err) {
      console.error(err);
      return;
    }

    res.redirect(click.target || '/');
  });
});

app.get('/data', (req, res) => {
  collection.aggregate([
    {
      $group: {
        _id: '$source',
        count: { $sum: 1 },
      },
    },
  ]).toArray((err, data) => {
    if (err) {
      console.error(err);
      res.status(500).send([]);
      return;
    }

    res.send(data);
  });
});

我们定义了三个路由：

GET / - 返回首页
GET /click/:id - 处理点击链接操作
GET /data - 返回统计数据

创建首页

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>邀请跟踪器</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  </head>
  <body>
    <h1>邀请跟踪器</h1>
    <p>
      欢迎来到邀请跟踪器。请点击下面的链接，以便我们统计您的来源。
    </p>
    <a href="/click/0">邀请链接 1</a>
    <a href="/click/1">邀请链接 2</a>
    <a href="/click/2">邀请链接 3</a>
    <a href="/click/3">邀请链接 4</a>
    <canvas id="chart" width="400" height="400"></canvas>
    <script src="/script.js"></script>
  </body>
</html>

在首页中，我们提供了四个邀请链接，用于模拟四个不同的渠道。我们使用Chart.js展示统计数据。

编写脚本

fetch('/data')
  .then((res) => res.json())
  .then((data) => {
    const chartData = {
      labels: data.map((d) => d._id),
      datasets: [
        {
          label: '点击量',
          data: data.map((d) => d.count),
          backgroundColor: ['#4dc9f6', '#f67019', '#f53794', '#537bc4'],
        },
      ],
    };

    new Chart(document.getElementById('chart'), {
      type: 'bar',
      data: chartData,
      options: {
        scales: {
          yAxes: [{ ticks: { beginAtZero: true } }],
        },
      },
    });
  });

在脚本中，我们发送GET请求/data以获取数据，并将其转换为JSON格式。然后我们使用Chart.js创建一个柱状图，用于展示数据。

运行程序

在命令行中运行以下命令以启动应用程序：

node app.js

现在您可以访问http://localhost:3000来访问邀请跟踪器。

总结

在本文中，我们介绍了如何使用node.js v13、Express.js、MongoDB和Chart.js实现一个简单的邀请跟踪器。通过使用这个工具，您可以更好地了解您的邀请链接在哪些渠道被点击，并统计每个渠道的点击量。