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 分享