原本开发这个项目的初衷是因为看到了别人的情侣空间项目UxxHans/Rainbow-Cats-Personal-WeChat-MiniProgram: 给女朋友做的微信小程序!情侣自己的任务和商城系统! (github.com)
但是实际部署过程中因为微信云开发需要收费,秉持着白嫖的精神,于是自己从零到一自学React和Next.Js,开发出了这么一个可以完全免费使用的项目并且进行了开源,感谢vercel和sqlpub!!!
欢迎掘友们体验,也希望能点个star,目前一个star都没┭┮﹏┭┮。
love-trick项目简介:
情侣之间发布任务,接受任务
实现功能
- 用户注册登录、发布任务 (注册点击登录页圆形大图)
- 类商品交易系统,获取积分后可以直接兑换礼物(商品),也可以上架自己的礼物给对方兑换
- 上传图片完全不占用服务器空间,使用第三方图床,让家庭自建服务器也能实现高清大图
- 积分系统,发布完成任务都能加减积分
- 拥有留言功能,可以给对方留言
- 发布接受完成任务以及使用礼物都会有微信企业机器人通知
项目图片(部分)
部署前的准备工作
首先打开项目love-trick。
先点个star,再Fork到自己的GitHub仓库。
新建一个txt文本
MYSQL_HOST= mysql.sqlpub.com
MYSQL_PORT= 3306
MYSQL_DATABASE=
MYSQL_USER=
MYSQL_PASSWORD=
WX_ROBOT_URL= https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=
JWT_SECRET_KEY= lovetrick
DRAWING_BED = IMGBB
IMGBB_API =
WEB_URL =
获取免费数据库,SQLPub - 免费的MySQL数据库
填完基本信息,会出现一个页面,截图保存,并且把里面的值复制到txt文本中对应的地方。
MYSQL_HOST= mysql.sqlpub.com
MYSQL_PORT= 3306
MYSQL_DATABASE= 数据库名称
MYSQL_USER= 数据库用户
MYSQL_PASSWORD= 数据库密码
连接数据库 (sqlpub.com)
复制以下的sql语句到输入框中并执行。
sql
-- 创建表 userinfo
CREATE TABLE userinfo (
userEmail varchar(100) NOT NULL,
username varchar(20) NOT NULL,
password varchar(20) NOT NULL,
avatar varchar(256) NOT NULL,
userId int NOT NULL AUTO_INCREMENT,
describeBySelf varchar(500) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NOT NULL,
registrationTime varchar(20) NOT NULL,
lover varchar(100) NOT NULL,
score int DEFAULT '1000' COMMENT '积分',
PRIMARY KEY (userId)
);
-- 创建表 tasklist
CREATE TABLE tasklist (
taskId int NOT NULL AUTO_INCREMENT COMMENT '任务ID',
taskName varchar(100) NOT NULL COMMENT '任务名',
taskDetail varchar(1000) NOT NULL COMMENT '任务详情',
taskImage varchar(5000) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NOT NULL COMMENT '发布任务图片',
taskReward varchar(1000) NOT NULL COMMENT '任务奖励',
taskScore int NOT NULL DEFAULT '0' COMMENT '任务分数',
creationTime varchar(20) NOT NULL COMMENT '任务创建时间',
publisherName varchar(100) NOT NULL,
publisherEmail varchar(100) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NOT NULL COMMENT '任务发布人邮箱',
receiverEmail varchar(100) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT '' COMMENT '任务接收人邮箱',
acceptanceTime varchar(20) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT '' COMMENT '任务接受时间',
completionTime varchar(20) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT '' COMMENT '任务完成时间',
completeRemarks varchar(1000) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT '' COMMENT '任务完成备注',
taskStatus char(10) NOT NULL DEFAULT '未开始',
PRIMARY KEY (taskId)
);
-- 创建表 whisper_list
CREATE TABLE whisper_list (
whisperId int NOT NULL AUTO_INCREMENT COMMENT '留言ID',
title varchar(100) NOT NULL COMMENT '留言标题',
content varchar(10000) NOT NULL COMMENT '留言内容',
creationTime varchar(20) NOT NULL COMMENT '创建时间',
publisherEmail varchar(50) NOT NULL COMMENT '发布者邮箱',
PRIMARY KEY (whisperId)
);
-- 创建表 gift_list
CREATE TABLE gift_list (
publisherEmail varchar(100) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NOT NULL,
giftImg varchar(500) NOT NULL COMMENT '图片地址',
giftName varchar(100) NOT NULL COMMENT 'gift名称',
giftId int NOT NULL AUTO_INCREMENT COMMENT 'id',
giftDetail varchar(100) NOT NULL COMMENT 'gift详情',
needScore int NOT NULL DEFAULT '0' COMMENT '兑换需要的分数',
remained int NOT NULL DEFAULT '0' COMMENT '还留有的数量',
redeemed int DEFAULT '0' COMMENT '被兑换的数量',
used int DEFAULT '0' COMMENT '被使用的数量',
isShow tinyint(1) DEFAULT '0' COMMENT '货架是否展示',
PRIMARY KEY (giftId)
);
-- 创建表 favourite_list
CREATE TABLE favourite_list (
favId int NOT NULL AUTO_INCREMENT COMMENT '收藏记录ID',
userEmail varchar(20) NOT NULL COMMENT '收藏者',
collectionId int NOT NULL COMMENT '收藏目标字段id',
collectionType varchar(10) NOT NULL COMMENT '收藏类型',
creationTime varchar(20) NOT NULL,
PRIMARY KEY (favId)
);
执行成功后刷新页面左边会出现如下数据表。
获取企业微信机器人的地址,如果不需要微信通知可省略
下面是几个教程,自己可以选一个看。
企业微信机器人webhook推送接口地址获取教程 - 知乎 (zhihu.com)
获取到地址后,填入txt文本WX_ROBOT_URL那一行。
获取免费图床的key
先注册个账号:ImgBB — 免费图片存取/上传图片
注册之后获取你的key,并且填入txt文本中IMGBB_API那一行。
获取key的网址:API — ImgBB
关于WEB_URL
这个是微信通知里快捷跳转的网站地址,如果你有想要设置的网站地址直接填进去就行,反之不用填。
打开Vercel,如果没有注册,直接用GitHub账号登录即可。
新建一个项目,选择love-trick项目导入。
填入环境变量,一定要填对应的值。前面获取到的值。
这里我以IMGBB作为图床,其他的图床获取也大同小异,记得修改成对应的环境变量即可。
填写完成之后点击下面的Deploy,即可开始部署。稍等一会即可部署完成。
打开网址验收成果
先去Vercel的控制台,点击我打马赛克的地方就可以查看部署成果了。
注册账号,开始使用
- 点击登录页中间的圆形图片开始注册
- 项目中所有的图片不传都可以,会使用随机动漫图片。
国内访问优化
请注意,默认分配的vercel.com地址国内是不可访问的,所以需要我们自己添加一个域名。
教程可以参考:如何用vercel部署自己的网站 - 掘金 (juejin.cn)
按图示进入页面后,会有提示指引你添加二级域名。
我的成品项目在线访问地址:love-trick