前言:看了博主免费明信片 - 我是军爸的明信片项目后自己用ai写了个一个功能如下:
【如何部署:直接把源码甩到服务器访问index.html即可】
【演示页面】
一款面向个人与小团队的“明信片”创作与寄/取网页应用。零门槛上线、无需服务器即可使用,主打“私密本地 + 多样分享 + 精致仪式感”。
目标用户与场景
个人用户:给恋人、朋友、家人写寄语,节日/纪念日心意表达。
创作者/活动方:活动打卡、品牌祝福墙、毕业寄语墙、门店/景区互动卡片。
团队内部:迎新祝福、年会祝词、项目里程碑纪念。
使用流程(寄/取)
寄
填写收/寄件人、寄语正文,可上传配图(自动转 DataURL)。
一键生成6位取件码(默认保存到本地浏览器),可“预览”。
可选三种分享方式:生成分享链接、导出文件、上传到你的云盘或自有后端。
取
输入取件码:先查本地,若无则自动尝试云端接口。
也可直接打开分享链接(数据在 URL 哈希中)或导入对方的明信片文件。
可一键打印与导出高分辨率海报图片。
特色功能详解
本地私密存储(默认)
数据存 localStorage,图片为 DataURL,不上传任何服务器。
仅限同一设备同一浏览器取回;完全离线可用(PWA)。
三种跨设备分享
链接内嵌:将数据编码进链接 #share= 段,服务器不可见;复制即可分享。
文件导出/导入:导出 .json,对方导入即可查看,适合归档/传播。
云端接口(可选):填写你的服务端地址与 API Key,支持上传与按码取回。
多云盘直传(WebDAV)
内置百度/夸克/123云盘/蓝奏/阿里云盘/诚通的 WebDAV 配置项。
生成后可一键直传到你自己的云盘目录(前提:目标云盘支持 WebDAV 与 CORS)。
精致体验
玻璃拟态视觉 + 浅/深色主题切换(本地持久化)。
视图平滑切换、卡片悬停过渡、页面微动效。
首页“大家的寄语”五行错位、圆角卡片、慢速横向流动(自动汇聚你的寄语 + 内置精选100条,多风格:伤感/励志/温柔/热烈)。
一键打印与海报导出(Canvas 生成高分辨率 PNG)。
隐私与安全
默认“纯本地”模式:数据和图片都仅在浏览器中,不经过服务器。
链接内嵌分享:数据置于 URL 哈希,服务器端不会接收到;可升级为口令加密(可选增强)。
云端与网盘:仅在你主动配置后才会上传;支持 Authorization: Bearer <API Key> 鉴权。
基础安全加固:采用安全的 Base64 编解码、视图切换容错、WebDAV 路径与文件名编码处理。
技术实现
前端栈:纯静态单页应用(SPA),包含 index.html、css/styles.css、js/app.js、sw.js、manifest.webmanifest。
数据与分享:
本地:localStorage 使用 postcard:* 前缀保存明信片对象(含 to/from/message/image/code/createdAt)。
链接:使用 TextEncoder/Decoder + Base64 将 JSON 编入 #share=...。
文件:导出/导入 .json。
云端:约定 POST /postcards 上传,GET /postcards/{code} 获取(地址与 API Key 可配置)。
云盘:标准 WebDAV(目录 MKCOL + PUT 文件),支持多网盘端点保存。
PWA 与离线:Service Worker 缓存静态资源(相对路径兼容子路径与本地),首次加载后可离线运行。
部署与使用
零后端部署:任意静态空间(本地直接双击 index.html 即可;建议用本地服务器体验完整 SW 能力)。
云端接口:如需云端取回/共享,提供一个实现 POST/GET 的极简后端即可(我可以代为提供样例)。
网盘直传:在“云盘配置”里填写对应 WebDAV 端点、用户名、令牌、目录;生成后点击上传按钮即直传到你的网盘。
可扩展方向(用于后续宣传/版本规划)
加密分享:链接或文件以口令 AES-GCM 加密;不泄露口令仍不可读。
模板与贴纸:多种中文手写体、贴纸包、边框主题;一键套用。
二维码卡片:为取件码/链接生成主题化二维码(可下载/打印)。
时间胶囊:设置解锁时间,倒计时结束可取件(支持本地与云端校时)。
留言墙与互动:收件人回执、点赞表情(本地/云端)。
PDF 导出:海报/长图之外的一键 PDF(打印友好)。
统计看板:私有统计(本地或服务端)用于活动数据盘点。
常见问题(FAQ)
为什么链接分享这么方便?安全吗?
数据在 URL 哈希,服务器端看不到。若需更强保护,可加口令加密。
网盘直传失败?
确认目标服务支持 WebDAV 且开启了 CORS;可通过反向代理/自建网关解决跨域。
取件码跨设备不可用?
仅本地模式时,取件码只在同一设备生效;若需跨设备,请使用链接分享/文件导出或启用云端接口/网盘分享。
本站https://ygz.ink文章https://ygz.ink/archives/2705.html中提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则一切后果请用户自负。本站部分信息来自博主网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
邮箱:gouweicaosheji@163.com
宗老师,这执行力,好强大,虽然有点没看明白。话说:在你的博客留言得到回复,是没有邮件通知的
@我是军爸 我检查下我的博客邮件哎
@我是军爸
@我是军爸 测试一下邮件通知
@我是军爸
@David 没收到哦
@David
@我是军爸 现在可以了不
@我是军爸
@David 可以了,收到了
@David
@我是军爸 好的
@我是军爸
@David 这个源码直接甩到服务器访问index.html即可
@David