实现功能: 点击“投票” 按钮,未投票前,按钮内容为 “投票”,用户投票后,按钮内容为 “已投”,票数加一。
点击 “投票” 按钮的逻辑实现如下:
前端:
一、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,如果是,则用户仍可继续投票,否则,用户当天投票次数已用完。
领取专属 10元无门槛券
私享最新 技术干货