从零到一：我用原生PHP写了一个高颜值儿童成长相册

一言准备中...

【开篇叙事】为什么我要写这个相册系统？
大家好，我是一个普通开发者，也是一个刚当上爸爸的程序员。自从孩子出生后，手机里的照片越来越多，从满月照到第一次翻身、第一次走路……每一个瞬间都想好好保存。市面上的云相册要么收费，要么担心隐私，自己搭又觉得麻烦。于是我决定自己写一个――要简单、要安全、要好看，还要能随时随地访问。不想用数据库，不想装一堆依赖，最好就是一个文件扔到服务器就能用。于是，这个「儿童成长相册 - 单文件版」诞生了。它不仅仅是一个相册，更是一个「时间胶囊」。每次打开，都能按年份、月份自动归类，还能计算孩子的年龄，记录他/她成长的每一步。
<ignore_js_op style="overflow-wrap:break-word;color:#333333;font-family:Tahoma, "font-size:14px;text-wrap-mode:wrap;background-color:#FFFFFF;">

【技术特色】这个相册有什么不一样？

纯单文件，无数据库依赖整个系统就一个 photo.php，扔到支持PHP的服务器就能跑。照片按 YYYY-MM-DD.jpg 格式命名，自动按年份归类，无需数据库，全靠文件系统+智能命名。
响应式高颜值UI用了CSS Grid + Flex布局，搭配柔和的橙色调，支持从手机到PC的全端适配。背景有浮动动画、卡片有悬停效果，兼顾视觉美感与交互体验。
照片旋转功能（支持键盘/触摸）在查看大图时，可左右旋转照片（快捷键 [ ]），支持重置，角度实时显示。移动端还支持双指旋转，体验接近原生相册。
智能时间线与年龄计算自动从文件名提取拍摄时间，按年份分组展示，并计算“拍摄时孩子的年龄”，比如“约1岁3个月”。
安全防护到位

使用 realpath 防目录遍历攻击
文件名格式严格校验（YYYY-MM-DD.扩展名）
路径合法性检查，杜绝非法访问

更多实用功能 - 按年份/关键词搜索
缩略图自动生成（GD库支持）
支持打印样式
键盘导航（左右箭头切换、ESC返回）
响应式图片懒加载

【使用场景】适合哪些人？ - 想为孩子搭建私人成长相册的家长
想学习PHP文件操作与安全编程的初学者
需要一个小型、美观、可定制相册系统的个人用户
希望脱离云服务、自建隐私相册的技术爱好者

【部署教程】三步上手 - 在网站根目录创建 /photo 文件夹
将 photo.php 上传至根目录
将照片按 YYYY-MM-DD.jpg 格式命名，放入 /photo 即可

访问 http://你的域名/photo.php，相册自动呈现。【结尾】写在最后这个项目是我作为程序员父亲的一份礼物，也是我对“简单技术实现优雅需求”的一次尝试。它不完美，但足够用；不复杂，但足够美。如果你也需要一个轻量、私密、好看的成长相册，不妨试试它。如果你有更好的建议或想要二次开发，也欢迎一起交流。
*（代码是AI写的，文案是AI出的*，只有宝宝是真的）
感谢大家的支持，注意到有人不会部署，这个很简单的，
1.解压文件。
2.复制到小皮系统（推荐php8.x版本）或者上传服务器。
3.访问 http://你的域名或者IP地址和端口/photo.php

2026.2.5--修复了图片有可能显示错误的bug
2026.2.6--更改了左右滑动顺序逻辑，现在向左侧滑动是更新的照片，右侧是旧照片
-----------修正了一天不能有多张照的问题，文件命名示例：2026-02-04.jpg、2026-02-04_1.jpg、2026-02-04_2.jpg
下载地址：https://xiaok.lanzoum.com/i6SeX3hyx1ji
最近有好多友友希望增加上传功能，由于上传功能涉及到更多的安全问题，如果在公网部署，请务必注意防护
关于上传功能需要说明以下几点，请务必仔细阅读：
1.压缩包内有4个文件，(photo.php)(upload.php)可部署在公网，(hash.php)(config.php)禁止部署在公网！！！
2.上传功能（upload.php）有密码保护(默认密码是52pojie)，密码采用哈西，bcrypt 是目前最安全、最推荐的密码存储方式之一
3.配置文件(config.php)，这个文件需要放在(photo.php)的上级目录，这个文件要确保公网不能直接访问！！！这个(UPLOAD_PASSWORD_HASH)是用来验证密码的
4.哈希密码生成(hash.php)，这个文件是用来生成上传功能自定义密码的，生成密码后替换(config.php)中的(UPLOAD_PASSWORD_HASH)值。这个文件要确保公网不能直接访问(或者使用后立即删除)！！！这个文件需要修改搜索关键字 ip白名单，将IP 改为自己的IP地址后才能正常使用
<ignore_js_op style="overflow-wrap:break-word;color:#333333;font-family:Tahoma, "font-size:14px;text-wrap-mode:wrap;background-color:#FFFFFF;">

下载地址

蓝奏网盘