咔叽网单游戏基地

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 90|回复: 0

[PHP编程] ThinkPHP5+jQuery+MySql实现投票功能

[复制链接]
  • TA的每日心情
    无聊
    2019-6-2 14:11
  • 签到天数: 4 天

    [LV.2]圆转纯熟

    2万

    主题

    2万

    帖子

    9万

    积分

    帖子管理员

    Rank: 9Rank: 9Rank: 9

    积分
    99179
    发表于 2020-4-15 20:41:28 | 显示全部楼层 |阅读模式
    本帖最后由 那爱 于 2020-4-15 21:40 编辑

    ThinkPHP5+jQuery+MySql实现投票功能,先给大家展示下效果图,如果大家感觉效果不错,请参考实例代码。
    效果图:
    ThinkPHP5+jQuery+MySql实现投票功能-1.jpg
    前端代码:
    1. <!DOCTYPE HTML>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>基于THINKPHP5实现红蓝投票功能</title>
    6. <style type="text/css">
    7.   .vote{width:288px; height:300px; margin:40px auto;position:relative}
    8.   .votetitle{width:100%;height:62px; background:url(/static/index/images/icon.png) no-repeat 0 30px; font-size:15px}
    9.   .red{position:absolute; left:0; top:64px; height:80px;}
    10.   .blue{position:absolute; right:0; top:64px; height:80px;}
    11.   .red p,.blue p{line-height:22px}
    12.   .redhand{position:absolute; left:0;width:36px; height:36px; background:url(/static/index/images/icon.png) no-repeat -1px -38px;cursor:pointer}
    13.   .bluehand{position:absolute; right:0;width:36px; height:36px; background:url(/static/index/images/icon.png) no-repeat -41px -38px;cursor:pointer}
    14.   .grayhand{width:34px; height:34px; background:url(/static/index/images/icon.png) no-repeat -83px -38px;cursor:pointer}
    15.   .redbar{position:absolute; left:42px; margin-top:8px;}
    16.   .bluebar{position:absolute; right:42px; margin-top:8px; }
    17.   .redbar span{display:block; height:6px; background:red; width:100%;border-radius:4px;}
    18.   .bluebar span{display:block; height:6px; background:#09f; width:100%;border-radius:4px; position:absolute; right:0}
    19.   .redbar p{line-height:20px; color:red;}
    20.   .bluebar p{line-height:20px; color:#09f; text-align:right; margin-top:6px}
    21. </style>
    22. <script type="text/javascript" src="/static/index/js/jquery.js"></script>
    23. <script type="text/javascript">
    24. $(function(){
    25.   // 获取初始数据
    26.   getdata('',1);
    27.   $(".redhand").click(function(){
    28.     getdata("red",1);
    29.   });
    30.   $(".bluehand").click(function(){
    31.     getdata("blue",1);
    32.   });
    33. });
    34. function getdata(type,vid){
    35.   $.ajax({
    36.    url: "{:url('/index/vote/vote')}",
    37.    data: {type:type,vid:vid},
    38.    type:'POST',
    39.    dataType: 'json',
    40.    success: function (res) {
    41.      console.log(res)
    42.      if (res.status == 0) {
    43.        alert('投票成功')
    44.        var w = 208;
    45.       $("#red_num").html(res.msg.rednum);
    46.       $("#red").css("width",res.msg.red_percent*100+"%");
    47.       var red_bar_w = w*res.msg.red_percent-10;
    48.       $("#red_bar").css("width",red_bar_w);
    49.       $("#blue_num").html(res.msg.bluenum);
    50.       $("#blue").css("width",res.msg.blue_percent*100+"%");
    51.       var blue_bar_w = w*res.msg.blue_percent;
    52.       $("#blue_bar").css("width",blue_bar_w);
    53.      }else{
    54.        alert('投票失败');
    55.      }
    56.    }
    57.   });
    58. }
    59. </script>
    60. </head>
    61. <body>
    62. <div id="main">
    63.   <h2 class="top_title"><a href="//www.jb51.net/article/71504.htm">ThinkPHP5+jQuery+MySql实现红蓝投票功能</a></h2>
    64.   <div class="vote">
    65.     <div class="votetitle">您对Thinkphp5的看法?</div>
    66.     <div class="red" id="red">
    67.       <p>非常实用</p>
    68.       <div class="redhand"></div>
    69.       <div class="redbar" id="red_bar">
    70.         <span></span>
    71.         <p id="red_num"></p>
    72.       </div>
    73.     </div>
    74.     <div class="blue" id="blue">
    75.       <p style="text-align:right">完全不懂</p>
    76.       <div class="bluehand"></div>
    77.       <div class="bluebar" id="blue_bar">
    78.         <span></span>
    79.         <p id="blue_num"></p>
    80.       </div>
    81.     </div>
    82.   </div>
    83. </div>
    84. </body>
    85. </html>
    复制代码
    控制器:
    1. <?php
    2. namespace app\index\controller;
    3. use think\Controller;
    4. /**
    5. * 投票
    6. */
    7. class Vote extends Controller
    8. {
    9.   /**
    10.    * 首页
    11.    */
    12.   public function index()
    13.   {
    14.     return $this->fetch();
    15.   }
    16.   /**
    17.    * 投票
    18.    * @param vid type ip
    19.    */
    20.   public function Vote()
    21.   {
    22.     $data = input('post.');
    23.     if (!empty($data)) {
    24.       $data['ip'] = get_ip();  //获取Ip
    25.       // 先检测当前ip是否已经投过票
    26.       $count = model('Vote')->checkIp($data);
    27.       // 检测是否提交了type,提交了即代表点击了按钮,没提交即代表页面初次渲染
    28.       if (!empty($data['type'])) {
    29.         if ($count == '0') {  //当前还未投过票  
    30.           // 更新票数 添加用户ip表
    31.           $res = model('Vote')->postVote($data);
    32.           if ($res) {
    33.             // 投票成功 获取当前各自的票数
    34.             $info = $this->getPercent($data);
    35.             return return_succ($info);
    36.           }else{
    37.             return return_error('投票失败');
    38.           }
    39.         }else{
    40.           // 已经投过票
    41.           return return_error('您已经投过票了');
    42.         }
    43.       }else{
    44.         // 初次渲染,获取初始数据
    45.         $info = $this->getPercent($data);
    46.         return return_succ($info);
    47.       }
    48.     }else{
    49.       return return_error('数据不能为空');
    50.     }
    51.   }
    52.   // 计算比例
    53.   public function getPercent($data)
    54.   {
    55.     // 投票成功 获取当前各自的票数
    56.     $info = model('Vote')->getInfo($data);
    57.     // 计算比例 保留3位小数
    58.     $info['red_percent'] = round($info['rednum'] / ($info['rednum'] + $info['bluenum']),3);
    59.     $info['blue_percent'] = 1 - $info['red_percent'];
    60.     return $info;
    61.   }
    62. }
    复制代码
    模型:
    1. <?php
    2. namespace app\index\model;
    3. use think\Model;
    4. use think\Db;
    5. class Vote extends Model
    6. {
    7.   // 检测当前ip是否已经投过票
    8.   public function checkIp($data)
    9.   {
    10.     $res = Db::table('votes_ip')->where(['vid'=>$data['vid'],'ip'=>$data['ip']])->count();
    11.     return $res;
    12.   }
    13.   // 投票
    14.   public function postVote($data)
    15.   {
    16.     $info = $this->getInfo($data);
    17.     if ($info) {
    18.       Db::startTrans();
    19.       try {
    20.         if ($data['type'] == "red") {
    21.           // 更新票数表  
    22.           Db::table('votes')->where(['id'=>$data['vid']])->update(['rednum'=>$info['rednum']+1]);
    23.         }elseif ($data['type'] == "blue") {
    24.           Db::table('votes')->where(['id'=>$data['vid']])->update(['bluenum'=>$info['bluenum']+1]);
    25.         }
    26.         // 添加用户投票ip
    27.         Db::table('votes_ip')->insert(['vid'=>$data['vid'],'ip'=>$data['ip']]);
    28.         Db::commit();
    29.         return true;
    30.       } catch (Exception $e) {
    31.         Db::rollback();
    32.         return false;
    33.       }
    34.     }
    35.   }
    36.   // 获取当前各自的票数
    37.   public function getInfo($data)
    38.   {
    39.     // 获取各自的票数
    40.     $info = Db::table('votes')->where(['id'=>$data['vid']])->find();
    41.     return $info;
    42.   }
    43. }
    复制代码
    总结
    以上所述是小编给大家介绍的ThinkPHP5+jQuery+MySql实现投票功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对咔叽网单www.2nzz.com网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
    回复

    使用道具 举报

    QQ|免责声明|小黑屋|手机版|咔叽网单

    GMT+8, 2020-12-3 11:43

    Powered by Discuz! X3.4

    Copyright © 2001-2020, Tencent Cloud.

    快速回复 返回顶部 返回列表