星之空,一个梦幻二次元主题个人网站,支持自定义内容与后台管理,多设备实时同步,打造专属的动漫风格展示空间。
核心架构特点
- 前后端分离:纯静态 HTML + PHP API
- 双缓存策略:服务器 JSON 文件 + 浏览器 localStorage 双重缓存
- 定时轮询同步:前端每 10 秒自动拉取服务器数据,实现多设备实时同步
- 离线降级:服务器不可用时自动切换到本地 localStorage 缓存
- 频率限制:后端基于 IP + JSON 文件的请求频率控制
- 图片处理:Canvas 压缩上传图片为 Base64,降低存储压力
- CORS 跨域支持:后端配置了灵活的跨域白名单
其他特性
- 粒子动画:CSS + JS 实现的樱花飘落效果
- IntersectionObserver:滚动触发动画(元素淡入效果)
- 全屏轮播:原生 JS 实现的 Hero 区图片轮播(支持触摸滑动和键盘导航)
- 响应式设计:适配桌面端和移动端
伪静态配置
location /api/ {
rewrite ^/api/(.*)$ /api.php/api/$1 last;
}
location ~ /(site-data\.json|rate-limit\.json|locks/) {
deny all;
}
初始化数据文件 & 设置权限
cd /www/wwwroot/您的域名
# 1. 创建数据文件
touch site-data.json rate-limit.json
# 2. 改权限(宝塔上传的文件所有者是 root,PHP 以 www 用户运行)
chown -R www:www /www/wwwroot/您的域名/
chmod 666 site-data.json rate-limit.json
# 3. 初始化默认数据
php -r "require 'api.php'; readData();"
# 4. 确认文件已创建
ls -la site-data.json
看到文件信息就说明成功了。
验证
浏览器依次打开:
浏览器依次打开:
| 地址 | 预期 |
|------|------|
| `http://您的域名/` | 前台首页正常显示 |
| `http://您的域名/admin.html` | 后台管理页面 |
| `http://您的域名/api/health` | 返回 `{"success":true,"status":"ok"}` |
常见问题
问题1:后台修改后 JSON 文件没有被写入
原因:文件所有者是 root,PHP 以 www 用户运行,没有写入权限。
解决方法
cd /www/wwwroot/您的域名
chown www:www site-data.json rate-limit.json
chmod 666 site-data.json rate-limit.json
问题2:site-data.json 文件不存在
原因:数据文件被误删或首次部署未创建
解决方法
cd /www/wwwroot/您的域名
touch site-data.json rate-limit.json
chown www:www site-data.json rate-limit.json
chmod 666 site-data.json rate-limit.json
php -r "require 'api.php'; readData();"
问题3:其他设备看不到修改后的界面
原因:文件权限问题导致保存未写入服务器。
解决方法
先按问题1修复权限,确认后台能正常保存后,其他设备刷新即可看到(最多10秒自动同步)。
![图片[1]-星之空二次元风格官网源码-茉莉小栈](https://pic.5iml.com/uploads/20260626/19311443ac4949b008c73d31701cc852.png)






© 版权声明
版权声明
1
本站名称:茉莉小栈
2
本站网址:www.5iml.com
3
本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4
本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5
本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报。
6
本站附件资源、教程等内容如因时效原因失效或不可用,请评论区留言或联系站长及时更新。
THE END














请登录后查看评论内容