简介

关于可视化大屏

本项目于2025年9月11日上线体验版本，制作耗时5天，属于轻量级简单项目。本项目所有后端逻辑均使用API实现，不涉及webhook。所有请求均为主动拉取，不涉及推送。

关于项目的部署

本项目的体验界面部署在国外免费服务器中（快捷链接🔗：点我跳转），因此预览页面并非任何时候都可稳定访问。根据服务器提供商的要求，免费版本页面如果在三个月内无用户访问将会自动终止服务，需手动重启。所以如果长时间无人访问的话服务器提供商会暂时关闭服务。大家可联系我进行重新启动。

关于后端

后端获取数据的逻辑使用简单的API完成，代码框架如下：

x
<?php
// 允许跨域请求
    // 允许所有域名访问（生产环境中应指定具体域名）
    header("Access-Control-Allow-Origin: *");
    // 允许的请求方法
    header("Access-Control-Allow-Methods: POST, OPTIONS");
    // 允许的请求头
    header("Access-Control-Allow-Headers: Content-Type");
    // 允许携带cookie（如果需要）
    header("Access-Control-Allow-Credentials: true");

// 数据库配置 - 请根据实际情况修改
$host = '你的主机地址';
$dbname = '你的数据库名称';
$username = '你的账号';
$password = '你的密码';

try {
    // 连接数据库
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // 执行查询 - 请替换为你的表名
    $stmt = $pdo->query("SELECT * FROM 你的表名");
    $data = $stmt->fetchAll(PDO::FETCH_ASSOC);

    header('Content-Type: application/json; charset=utf-8');
    // 返回JSON数据
    echo json_encode($data, JSON_UNESCAPED_UNICODE);

} catch (PDOException $e) {
    http_response_code(500);
    echo json_encode(['error' => 'SQL ERROR']);
}
?>

关于前端

前端使用vue3+vite技术完成，在前端通过axios调用API获取数据，代码框架如下：

x
const getDateFORDataBase = () => {
    console.log("从后端获取数据");
    axios.post('你的后端地址', {
    })
        .then(response => {
            var str_jsonData = JSON.stringify(response.data);
            //将数据保存在本地存储中
            localStorage.setItem("数据名称", str_jsonData);
            //调用更新数据的方法更新页面数据
            updateData();
        })
        .catch(error => {
            console.error('请求失败:', error); // 错误处理
        });
}

//更新方法
const updateData = () => {
    var getDataTotal = localStorage.getItem('数据名称');
    var jsonObj = JSON.parse(getDataTotal); // 将字符串转换为JSON对象
    for (var i = 0; i < jsonObj.length; i++) {
        updateDateABOUTone(jsonObj[i]);
    }
    console.log("数据更新成功！");
}

//更新页面中的所有数据
const updateDateABOUTone = (d) => {
    switch (d.name) {
        case "yh_1": yh_1.value = d.data; break;
        case "yh_2": yh_2.value = d.data; break;
        case "yh_3": yh_3.value = d.data; break;
        case "yh_4": yh_4.value = d.data; break;
        case "yh_5": yh_5.value = d.data; break;
        case "yh_6": yh_6.value = d.data; break;
        case "rzzj_1": rzzj_1.value = d.data; rzzj_2.value = "入驻作家总数：" + rzzj_1.value + "位"; break;
        case "cent_1": cent_1.value = d.data; break;
        case "cent_2": cent_2.value = d.data; break;
        case "cent_3": cent_3.value = d.data + "稿件"; break;
        case "cent_4": cent_4.value = d.data + "稿件"; break;
        case "jd_1": jd_1.value = d.data; break;
        case "jd_2": jd_2.value = d.data; break;
        case "jd_3": jd_3.value = d.data; break;
        case "jd_4": jd_4.value = d.data; break;
    }
}

关于UI

UI使用🔗爱给网中的免费资源二次加工实现。

原资源地址🔗：点我获取

尊重原作者，支持正版！