在开发网站或应用时，收集用户访问数据对于分析用户行为、优化网站性能和改进用户体验至关重要。通过收集访问数据，我们可以了解用户来自哪里、使用哪些设备以及访问的页面等信息。本文将介绍如何利用 JavaScript 和 PHP 实现一个简单的用户访问数据收集系统，帮助你更好地分析和理解网站流量。

1. 系统概述

我们将创建一个系统，通过以下步骤来收集用户的访问数据：

1. 前端 (JavaScript)：通过 JavaScript 获取用户的 IP 地址、访问时间、来源页面、访问页面、浏览器信息和操作系统信息。
2. 后端 (PHP)：将收集到的数据发送到 PHP 服务器，服务器将这些数据插入到 MySQL 数据库中进行存储。

2. 前端：收集用户访问数据

2.1 获取用户信息

在前端，我们通过 JavaScript 获取以下数据：

• IP 地址：通过调用第三方 API (如 ipify) 获取用户的公网 IP 地址。
• 访问时间：获取当前时间并转换为北京时间。
• 来源页面：通过 document.referrer 获取用户从哪个页面跳转过来，若是直接访问，则为 'Direct'。
• 当前页面 URL：通过 window.location.href 获取用户正在访问的页面 URL。
• 用户代理：通过 navigator.userAgent 获取浏览器的用户代理信息。
• 操作系统平台：通过 navigator.platform 获取用户的操作系统信息。

const utcDate = new Date().toISOString();
const utcDateObj = new Date(utcDate);
const offset = 8 * 60 * 60 * 1000;  // 北京时间偏移量
const beijingTime = new Date(utcDateObj.getTime() + offset);
const formattedBeijingTime = beijingTime.toISOString().replace('T', ' ').slice(0, 19);

// 设置访问数据
const visitTime = formattedBeijingTime,
      referrer = document.referrer || 'Direct',
      pageUrl = window.location.href,
      userAgent = navigator.userAgent,
      platform = navigator.platform;

async function getUserIP() {
    try {
        // 通过 ipify API 获取用户 IP 地址
        const response = await fetch('https://api.ipify.org?format=json');
        const data = await response.json();
        return data.ip;
    } catch (e) {
        console.error('无法获取 IP 地址', e);
        return '未知';  // 如果获取失败，返回 '未知'
    }
}

2.2 发送访问数据到后端

获取到用户数据后，我们将通过 fetch API 将这些数据发送到 PHP 服务器端进行存储。

async function sendVisitData() {
    const ip = await getUserIP();  // 获取用户 IP 地址
    const visitData = { ip, visitTime, referrer, pageUrl, userAgent, platform };  // 构建访问数据对象

    try {
        const response = await fetch('/api.php', {  // 替换为你的实际 API 地址
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(visitData)
        });

        // 检查响应状态是否为 2xx 成功状态
        if (!response.ok) {
            throw new Error(`请求失败，状态码：${response.status}`);
        }

        const data = await response.json();  // 解析服务器返回的 JSON 数据
        console.log('数据成功发送至服务器:', data);  // 打印服务器响应

    } catch (error) {
        console.error('发送数据失败:', error);  // 捕获并打印错误信息
    }
}

// 页面加载时发送数据
window.onload = sendVisitData;

3. 后端：接收并存储访问数据

在后端，我们使用 PHP 来接收和处理来自前端的访问数据。具体流程如下：

1. 接收数据：使用 file_get_contents('php://input') 从 POST 请求中获取 JSON 数据。
2. 解析数据：通过 json_decode() 将 JSON 数据转换为 PHP 数组。
3. 数据验证：检查接收到的数据是否完整（例如，是否包含 IP 地址、访问时间、页面 URL 等）。
4. 存储数据：通过 PDO 将数据插入到 MySQL 数据库中。

<?php
header("Access-Control-Allow-Origin: *");  // 允许所有来源
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");  // 允许的方法
header("Access-Control-Allow-Headers: Content-Type");  // 允许的请求头

// 数据库连接信息
include('config.php');
try {
    // 使用 PDO 连接数据库
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    echo json_encode(['message' => '数据库连接失败: ' . $e->getMessage()]);
    exit;
}

// 获取 POST 请求中的 JSON 数据
$data = json_decode(file_get_contents('php://input'), true);

// 检查必需的字段是否存在
if (isset($data['ip']) && isset($data['visitTime']) && isset($data['referrer']) && isset($data['pageUrl']) && isset($data['userAgent']) && isset($data['platform'])) {
    $ip = $data['ip'];
    $referrer = $data['referrer'];
    $pageUrl = $data['pageUrl'];
    $userAgent = $data['userAgent'];  // 设备信息
    $platform = $data['platform'];    // 操作系统信息

    // 转换 ISO 8601 格式的时间为 MySQL DATETIME 格式
    $visitTime = (new DateTime($data['visitTime']))->format('Y-m-d H:i:s');

    // 准备 SQL 插入语句
    $sql = "INSERT INTO visits (ip, visitTime, referrer, pageUrl, userAgent, platform) 
            VALUES (:ip, :visitTime, :referrer, :pageUrl, :userAgent, :platform)";

    try {
        // 开始事务
        $pdo->beginTransaction();

        // 准备并执行插入语句
        $stmt = $pdo->prepare($sql);
        $stmt->bindParam(':ip', $ip);
        $stmt->bindParam(':visitTime', $visitTime);
        $stmt->bindParam(':referrer', $referrer);
        $stmt->bindParam(':pageUrl', $pageUrl);
        $stmt->bindParam(':userAgent', $userAgent);
        $stmt->bindParam(':platform', $platform);

        // 执行插入
        $stmt->execute();

        // 提交事务
        $pdo->commit();

        // 返回成功消息
        echo json_encode(['message' => '访问数据已记录']);
    } catch (PDOException $e) {
        // 如果插入失败，回滚事务
        $pdo->rollBack();
        echo json_encode(['message' => '记录访问数据失败: ' . $e->getMessage()]);
    }
} else {
    // 如果数据不完整，返回错误消息
    echo json_encode(['message' => '无效的数据']);
}

// 关闭数据库连接
$pdo = null;
?>

3.1 处理 CORS 请求

为了允许跨域请求，PHP 后端使用了 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 来设置允许的请求来源、方法和请求头。这对于前端 JavaScript 代码与 PHP 后端进行通信是必要的。

4. 数据库结构

你需要在 MySQL 中创建一个数据库表，用于存储访问数据。可以使用以下 SQL 语句来创建表：

CREATE TABLE visits (
    id INT AUTO_INCREMENT PRIMARY KEY,
    ip VARCHAR(50),
    visitTime DATETIME,
    referrer TEXT,
    pageUrl TEXT,
    userAgent TEXT,
    platform VARCHAR(255)
);

5. 总结

通过 JavaScript 和 PHP，我们可以轻松地收集和存储用户的访问数据。这些数据可以帮助我们进行流量分析、了解用户行为以及优化网站性能。本文介绍的实现方法仅是一个基础框架，实际应用中可以根据需要进行扩展和优化。例如，可以增加更多的数据分析功能，或者在数据存储时加入数据的去重和清理机制。

希望本教程对你有所帮助，祝你编程愉快！