小白投票之投票功能

实现功能: 点击“投票” 按钮,未投票前,按钮内容为 “投票”,用户投票后,按钮内容为 “已投”,票数加一。

点击 “投票” 按钮的逻辑实现如下:

前端:

一、html代码如下:

前端用vue.js加载数据输出显示,判断数据属性voted是否为true:

1、若为true,则显示 “已投” 按钮,用户点击无任何反应;

2、若为false,则显示 “投票” 按钮,用户点击触发函数

toVote($event, member.id);

二、js代码如下:

A、参数allowVote:存放后台返回的用户当天可投票数是否用完的判断值:

1、若为1,则用户当天可继续投票;

2、若为0,否则提示 “您今日投票次数已用完!”;

B、获取该按钮的data-属性vote,判断vote是否为0:

1、若为0,post到后台执行 upBallotFunc 函数处理,传递参数为 “mid”,即该作品的唯一标识,图中的 “store”参数是本项目逻辑需要,可自行忽略;

2、若不为0,则表示该作品用户已投票,点击无任何反应;

此data-属性的作用在于,如果用户已投票后,再点击当前作品投票按钮时,无需进行post请求,可提高反应效率;

C、根据后台返回的参数status值,对前端进行处理:

1、若status为1,则投票成功,将新的用户当天可投票数是否用完的判断值data.allowVote重新赋给参数allowVote,更新该作品目前的最新得票数data.ballot,并把data-属性vote赋值为1,按钮 “投票” 替换为 “已投”;

2、若status为0,则提示 “您今日投票次数已用完!”;

三、php代码如下:

图中的 “store”参数是本项目逻辑需要,可自行忽略

获取前端传过来的作品标识值 “mid”;

新建数组 $data_v,元素包括:用户的唯一标识openid,作品的唯一标识 mid,当前提交的时间 time(),把此数组内容新增到数据库投票表中;

如果投票表信息新增成功,则在作品表中找到该作品的信息,并使该作品投票数加一 setInc('ballot');

返回最新投票数 $ballot;

判断是否投票机会已用完,$allowVote = $this -> checkAllowVote();

把成功状态值 status、新票数 ballot、是否可继续投票值 allowVote 返回给前端。

四、判断是否投票机会已用完

获取当天零点和第二天零点的时间戳;

新建条件数组 $condit,内容包括用户的唯一标识openid,用户所有在当天零点及第二天零点内的ctime值;

在投票表中查找符合条件数组 $condit 内容的数据,并返回数量 $doCount,即为用户当天已投票个数;

获取投票数表中规定的每天一共可投票数 $allCount;

判断$doCount 是否小于 $allCount,如果是,则用户仍可继续投票,否则,用户当天投票次数已用完。

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180714G0T8YI00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券