wedding card

電子喜帖

無需服務器，使用騰訊雲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中看到