The Method of Realizing Voting Function with ThinkPHP5+jQuery+MySql

The following column of ThinkPHP tutorial introduces the method of voting function by ThinkPHP5+jQuery+MySql. I hope it will also help friends in need!

First of all, the effect diagram is as follows:

Then share the code as follows:

Front-end code:

Realization of red and blue voting function based on THINKPHP5 .vote{width:288px; height:300px; margin:40px auto; position:relative} .votetitle{width:100%; height:62px; background:url(/static/index/images/icon.png) no-repeat 0 30px; font-size:15px} .red{position:absolute; left:0; top:64px; height:80px; } .blue{position:absolute; right:0; top:64px; height:80px; } .red p,.blue p{line-height:22px} .redhand{position:absolute; left:0; width:36px; height:36px; background:url(/static/index/images/icon.png) no-repeat -1px -38px; cursor:pointer} .bluehand{position:absolute; right:0; width:36px; height:36px; background:url(/static/index/images/icon.png) no-repeat -41px -38px; cursor:pointer} .grayhand{width:34px; height:34px; background:url(/static/index/images/icon.png) no-repeat -83px -38px; cursor:pointer} .redbar{position:absolute; left:42px; margin-top:8px; } .bluebar{position:absolute; right:42px; margin-top:8px; } .redbar span{display:block; height:6px; background:red; width:100%; border-radius:4px; } .bluebar span{display:block; height:6px; background:#09f; width:100%; border-radius:4px; position:absolute; right:0} .redbar p{line-height:20px; color:red; } .bluebar p{line-height:20px; color:#09f; text-align:right; margin-top:6px} $(function(){ //Get initial data getdata('',1); $(".redhand").click(function(){ getdata("red",1); }); $(".bluehand").click(function(){ getdata("blue",1); }); }); function getdata(type,vid){ $.ajax({ url: "{:url('/index/vote/vote')}", data: {type:type,vid:vid}, type:'POST', dataType: 'json', success: function (res) { console.log(res) if (res.status == 0) { Alert ('successful voting') var w = 208; $("#red_num").html(res.msg.rednum); $("#red").css("width",res.msg.red_percent*100+"%"); var red_bar_w = w*res.msg.red_percent-10; $("#red_bar").css("width",red_bar_w); $("#blue_num").html(res.msg.bluenum); $("#blue").css("width",res.msg.blue_percent*100+"%"); var blue_bar_w = w*res.msg.blue_percent; $("#blue_bar").css("width",blue_bar_w); }else{ Alert ('voting failed'); } } }); } ThinkPHP5+jQuery+MySql realizes red and blue voting function. What do you think of Thinkphp5? Very practical

do not understand completely

Controller: