ThinkPHP5+jQuery+MySql實現投票功能的方法

下面由thinkphp教程欄目給給大家介紹thinkphp5+jquery+mysql實現投票功能的方法,希望對需要的朋友也是幫助!

ThinkPHP5+jQuery+MySql實現投票功能的方法

首先效果圖如下:

ThinkPHP5+jQuery+MySql實現投票功能的方法

然后分享代碼如下:

前端代碼:

立即學習PHP免費學習筆記(深入)”;

nbsp;HTML&gt;   <meta><title>基于THINKPHP5實現紅藍投票功能</title><style>     .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} </style><script></script><script> $(function(){     // 獲取初始數據     getdata(&#39;&#39;,1);          $(".redhand").click(function(){         getdata("red",1);     });     $(".bluehand").click(function(){         getdata("blue",1);     }); }); function getdata(type,vid){     $.ajax({       url: "{:url(&#39;/index/vote/vote&#39;)}",       data: {type:type,vid:vid},       type:&#39;POST&#39;,       dataType: &#39;json&#39;,       success: function (res) {           console.log(res)           if (res.status == 0) {               alert(&#39;投票成功&#39;)               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(&#39;投票失敗&#39;);           }       }     }); } </script><div> ???<h2><a>ThinkPHP5+jQuery+mysql實現紅藍投票功能</a></h2> ???<div> ????????<div>您對Thinkphp5的看法?</div> ????????<div> ????????????<p>非常實用</p> ????????????<div></div> ????????????<div> ????????????????<span></span> ????????????????<p></p> ????????????</div> ????????</div> ????????<div> ????????????<p>完全不懂</p> ????????????<div></div> ????????????<div> ????????????????<span></span> ????????????????<p></p> ????????????</div> ????????</div> ???</div> </div>  

控制器:

<?php namespace appindexcontroller; use thinkController; /**  * 投票  */ class Vote extends Controller {     /**      * 首頁      */     public function index()     {         return $this->fetch(); ????} ????/** ?????*?投票 ?????*?@param?vid?type?ip ?????*/ ????public?function?Vote() ????{ ????????$data?=?input('post.'); ????????if?(!empty($data))?{ ????????????$data['ip']?=?get_ip();????//獲取Ip ????????????//?先檢測當前ip是否已經投過票 ????????????$count?=?model('Vote')-&gt;checkIp($data); ????????????//?檢測是否提交了type,提交了即代表點擊了按鈕,沒提交即代表頁面初次渲染 ????????????if?(!empty($data['type']))?{ ????????????????if?($count?==?'0')?{????//當前還未投過票? ????????????????????//?更新票數??添加用戶ip表 ????????????????????$res?=?model('Vote')-&gt;postVote($data); ????????????????????if?($res)?{ ???????????????????????? ????????????????????????//?投票成功??獲取當前各自的票數 ????????????????????????$info?=?$this-&gt;getPercent($data); ????????????????????????return?return_succ($info); ????????????????????}else{ ????????????????????????return?return_error('投票失敗'); ????????????????????} ????????????????}else{ ????????????????????//?已經投過票 ????????????????????return?return_error('您已經投過票了'); ????????????????} ????????????}else{ ????????????????//?初次渲染,獲取初始數據 ????????????????$info?=?$this-&gt;getPercent($data); ????????????????return?return_succ($info); ????????????} ????????}else{ ????????????return?return_error('數據不能為空'); ????????} ????} ????//?計算比例 ????public?function?getPercent($data) ????{ ????????//?投票成功??獲取當前各自的票數 ????????$info?=?model('Vote')-&gt;getInfo($data); ????????//?計算比例?保留3位小數 ????????$info['red_percent']?=?round($info['rednum']?/?($info['rednum']?+?$info['bluenum']),3); ????????$info['blue_percent']?=?1?-?$info['red_percent']; ????????return?$info; ????} }

模型:

<?php namespace appindexmodel; use thinkModel; use thinkDb; class Vote extends Model {     // 檢測當前ip是否已經投過票     public function checkIp($data)     {         $res = Db::table(&#39;votes_ip&#39;)->where(['vid'=&gt;$data['vid'],'ip'=&gt;$data['ip']])-&gt;count(); ????????return?$res; ????} ????//?投票 ????public?function?postVote($data) ????{ ????????$info?=?$this-&gt;getInfo($data); ????????if?($info)?{ ????????????Db::startTrans(); ????????????try?{ ???????????????? ????????????????if?($data['type']?==?"red")?{ ????????????????????//?更新票數表?? ????????????????????Db::table('votes')-&gt;where(['id'=&gt;$data['vid']])-&gt;update(['rednum'=&gt;$info['rednum']+1]); ????????????????}elseif?($data['type']?==?"blue")?{ ????????????????????Db::table('votes')-&gt;where(['id'=&gt;$data['vid']])-&gt;update(['bluenum'=&gt;$info['bluenum']+1]); ????????????????} ????????????????//?添加用戶投票ip ????????????????Db::table('votes_ip')-&gt;insert(['vid'=&gt;$data['vid'],'ip'=&gt;$data['ip']]); ????????????????Db::commit(); ????????????????return?true; ????????????}?catch?(Exception?$e)?{ ????????????????Db::rollback(); ????????????????return?false; ????????????} ????????} ????} ????//?獲取當前各自的票數 ????public?function?getInfo($data) ????{ ????????//?獲取各自的票數 ????????$info?=?Db::table('votes')-&gt;where(['id'=&gt;$data['vid']])-&gt;find(); ????????return?$info; ????} }

? 版權聲明
THE END
喜歡就支持一下吧
點贊5 分享