本项目于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使用🔗爱给网中的免费资源二次加工实现。
原资源地址🔗:点我获取
尊重原作者,支持正版!