侧边栏壁纸
  • 累计撰写 4 篇文章
  • 累计收到 0 条评论

自驾游手账记录

2026-8-15 / 0 评论 / 6 阅读


🚗 自驾游手账

一个扁平化、自适应、暖色手账风格的自驾游记录系统。记录每次旅行的每日开销、行驶里程、露营地等信息。

技术栈

  • PHP 7.3+
  • SQLite3(文件型数据库,无需额外安装数据库服务)
  • 原生 HTML / CSS / JavaScript(无框架依赖)

功能特性

  • 🔐 账号密码认证,未登录可预览演示数据
  • 👑 第一个注册的用户自动成为超级管理员,可管理所有用户数据
  • 🗺️ 每次自驾为一张"我的自驾之旅"卡片(含出发地、目的地)
  • 📊 自动统计每次旅行的总里程、总花费、总天数
  • 📝 每日记录卡片默认收起,点击展开查看详情
  • ✏️ 每条每日记录支持编辑、删除
  • 📏 当日里程自动计算(表显止 - 表显起)
  • 💰 分类记录油费、过路费、住宿、餐饮、其他开销
  • ⛺ 记录露营地、天气、备注
  • 📱 响应式设计,手机电脑均可使用
  • 🎨 暖色手账扁平风格

部署方法

环境要求

  • PHP 7.3 或更高版本
  • 需启用 pdo_sqlitesqlite3 扩展(默认通常已启用)
  • Apache / Nginx / 内置 PHP 服务器均可

快速开始(本地测试)

# 进入项目目录
cd road-trip-journal

# 启动 PHP 内置服务器
php -S localhost:8080

然后浏览器访问 http://localhost:8080

部署到 Apache

  1. 将整个 road-trip-journal 目录上传到网站根目录
  2. 确保 data/ 目录有写入权限(用于创建 SQLite 数据库文件)
    chmod 755 data/
    chmod 644 data/.htaccess
  3. 访问网站,第一个注册的账号自动成为超级管理员

部署到 Nginx

在 server 块中添加:

location /data/ {
    deny all;
    return 403;
}

确保 data/ 目录可写:

chown -R www-data:www-data data/
chmod 755 data/

目录结构

road-trip-journal/
├── index.php          # 登录页
├── register.php       # 注册页
├── logout.php         # 退出登录
├── dashboard.php      # 我的自驾之旅列表
├── trip.php           # 旅行详情 + 每日记录管理
├── admin.php          # 超级管理员后台
├── preview.php        # 预览演示页(无需登录)
├── config.php         # 数据库配置与初始化
├── functions.php      # 公共函数库
├── css/
│   └── style.css      # 暖色手账风格样式
├── js/
│   └── app.js         # 交互脚本
├── data/
│   ├── .htaccess      # 保护数据库文件
│   └── roadtrip.db    # SQLite 数据库(自动创建)
└── README.md

使用说明

  1. 注册账号:首次访问点击"立即注册",第一个注册的用户自动成为超级管理员
  2. 创建旅行:登录后点击"新增旅行",填写旅行名称、出发地、目的地、日期
  3. 添加每日记录:进入旅行详情页,点击"添加当日记录"
    • 填写表显起和表显止,当日里程自动计算
    • 分类填写各项开销
    • 记录露营地、天气、备注
  4. 查看/编辑记录:每日记录卡片默认收起,点击展开;展开后可编辑或删除
  5. 管理后台:超级管理员可点击导航栏"管理后台"查看所有用户和旅行数据

数据库说明

数据保存在 data/roadtrip.db(SQLite 格式),包含三张表:

  • users — 用户表(用户名、密码哈希、是否管理员)
  • trips — 旅行表(名称、出发地、目的地、日期、所属用户)
  • daily_records — 每日记录表(日期、里程、各项开销、露营地等)

密码使用 password_hash() 加密存储,数据库文件通过 .htaccess 禁止直接下载。

注意事项

  • 请确保 data/ 目录对 PHP 进程可写
  • 定期备份 data/roadtrip.db 文件
  • 生产环境建议配置 HTTPS
  • 如使用 Nginx,请按上述配置禁止访问 data/ 目录
收藏
🤞 分享

扫描二维码,在手机上阅读

评论一下?

OωO
取消