hal-wang / wedding-card

电子喜帖,无服务器,管理员可生成邀请二维码。使用CloudBase 的云函数、静态网站托管、数据库

Home Page:https://wedding.hal.wang

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

电子喜帖

无需服务器,使用腾讯云 CloudBase 的云函数、静态网站托管、数据库,费用极低(普通浏览量免费或一天一分钱)

管理员可生成邀请二维码

结婚时自用,现在用来纪念和记录

线上地址: https://wedding.hal.wang

网页地址为 /admin 则进入管理页,可以添加邀请,并生成邀请二维码。

生成的二维码内容是个网址如 https://wedding.hal.wang/#/?name=%E6%B1%AA%E6%96%87%E8%B1%AA

首页 已相守 ... 天 是动态的,如果当前日期在结婚之前,会显示为婚礼倒计时

改为自己用,你需要做:

  1. 一键部署

  2. 添加环境变量

    • ADMIN:管理员密码
    • GROOM:新郎姓名
    • BRIDE:新娘姓名
    • DATE:结婚时间,格式 yyyy-MM-dd HH:mm:ss
    • ADDR:详细地址
    • PHONE:电话
    • COVER:封面文件名,对应文件上传至云存储根目录
    • ALBUM:相册文件名,可多个,使用逗号分隔,如 1.jpg,2.png,... 对应文件上传至云存储 album 目录中
    • MUSIC:背景音乐文件名,对应文件上传至云存储根目录
    • FAVICON:网页图标文件名,对应文件上传至云存储根目录
    • MHID:草料二维码模板 ID,用于生成喜帖二维码

关于草料二维码模板 ID

访问 https://cli.im/api

调整美化模板,会自动生成连接,其中 mhid 参数即为模板 ID

二次开发

如果现有功能不能满足,你可以进行二次开发

API

wedding-card-api 下创建文件 .env.local,内容如下

SCF_NAMESPACE=cloudbase环境id
SECRET_KEY=腾讯云 secret key
SECRET_ID=腾讯云 secret id
ADMIN=管理员密码
COVER=封面文件名,对应文件上传至云存储根目录
ALBUM=相册文件名,可多个,使用逗号分隔,如 1.jpg,2.png,...。对应文件上传至云 album 目录中
MUSIC=背景音乐文件名,对应文件上传至云存储根目录
FAVICON=网页图标文件名,对应文件上传至云存储根目录

运行 API

先安装依赖,在 wedding-card-api 下执行

npm install

再使用 vscode 打开 wedding-card-api,直接 F5 开始调试

或在 wedding-card-api 目录下执行

npm start

Web

先安装依赖,在 wedding-card-web 下执行

npm install

再执行下面命令运行

npm run dev:test

或使用已发布的接口,需要修改 wedding-card-web/.env.development 文件中的 VITE_GLOB_PROXY_API_URL

然后运行

npm run dev

发布

可以本地使用 @cloudbase/cli 发布,也可以使用 GitHub Actions 持续集成

cli 发布

在项目根目录下创建 .env.local (注意是项目根目录,不是 API 或 Web 下)

内容如下

ENV_ID=cloudbase环境id
ADMIN=管理员密码
GROOM=新郎姓名
BRIDE=新娘姓名
DATE=结婚时间,格式 yyyy-MM-dd HH:mm:ss
ADDR=详细地址
PHONE=电话
COVER=封面文件名,对应文件上传至云存储根目录
ALBUM=相册文件名,可多个,使用逗号分隔,如 1.jpg,2.png,...。对应文件上传至云 album 目录中
MUSIC=背景音乐文件名,对应文件上传至云存储根目录
FAVICON=网页图标文件名,对应文件上传至云存储根目录
MHID=草料二维码 ID,用于生成喜帖二维码

在项目根目录下运行以下命令发布

npm run deploy

GitHub Actions

仓库增加 Secrets,在 Settings -> Secrets -> Actions,点击 New repository secret 按钮

  • TENCENT_SECRET_ID: 腾讯云 secret id
  • TENCENT_SECRET_KEY: 腾讯云 secret key
  • ENV: 与 cli 发布.env.local 文件内容相同

配置完成后,每次 main 分支提交代码就会自动发布到 CloudBase

发布进度可在仓库 Actions 中看到

About

电子喜帖,无服务器,管理员可生成邀请二维码。使用CloudBase 的云函数、静态网站托管、数据库

https://wedding.hal.wang

License:MIT License


Languages

Language:Vue 44.3%Language:TypeScript 44.0%Language:JavaScript 10.3%Language:HTML 0.8%Language:Less 0.6%Language:Shell 0.1%