ThinkPHP5+jQuery+MySql實作投票功能的方法-ThinkPHP-PHP中文網

ThinkPHP5+jQuery+MySql实现红蓝投票功能" >ThinkPHP5+jQuery+MySql实现红蓝投票功能

首頁

php框架

ThinkPHP

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

藏色散人

Jan 21, 2020 pm 05:45 PM

jquery mysql thinkphp5

以下由ThinkPHP教學欄位來介紹ThinkPHP5 jQuery MySql給大家投票功能的方法，希望對需要的朋友也是幫忙！

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

首先效果圖如下：

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

#然後分享程式碼如下：

前端程式碼：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>基于THINKPHP5实现红蓝投票功能</title>
<style type="text/css">
    .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 type="text/javascript" src="/static/index/js/jquery.js"></script>
<script type="text/javascript">
$(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>
</head>
<body>
<div id="main">
   <h2 id="a-nbsp-href-http-www-jb-net-article-htm-ThinkPHP-jQuery-MySql实现红蓝投票功能-a"><a href="http://www.jb51.net/article/71504.htm">ThinkPHP5+jQuery+MySql实现红蓝投票功能</a></h2>
   <div class="vote">
        <div class="votetitle">您对Thinkphp5的看法？</div>
        <div class="red" id="red">
            <p>非常实用</p>
            <div class="redhand"></div>
            <div class="redbar" id="red_bar">
                <span></span>
                <p id="red_num"></p>
            </div>
        </div>
        <div class="blue" id="blue">
            <p style="text-align:right">完全不懂</p>
            <div class="bluehand"></div>
            <div class="bluebar" id="blue_bar">
                <span></span>
                <p id="blue_num"></p>
            </div>
        </div>
   </div>
</div>
</body>
</html>

登入後複製

控制器：

<?php
namespace app\index\controller;
use think\Controller;
/**
 * 投票
 */
class Vote extends Controller
{
    /**
     * 首页
     */
    public function index()
    {
        return $this->fetch();
    }
    /**
     * 投票
     * @param vid type ip
     */
    public function Vote()
    {
        $data = input(&#39;post.&#39;);
        if (!empty($data)) {
            $data[&#39;ip&#39;] = get_ip();    //获取Ip
            // 先检测当前ip是否已经投过票
            $count = model(&#39;Vote&#39;)->checkIp($data);
            // 检测是否提交了type,提交了即代表点击了按钮,没提交即代表页面初次渲染
            if (!empty($data[&#39;type&#39;])) {
                if ($count == &#39;0&#39;) {    //当前还未投过票 
                    // 更新票数  添加用户ip表
                    $res = model(&#39;Vote&#39;)->postVote($data);
                    if ($res) {
                        
                        // 投票成功  获取当前各自的票数
                        $info = $this->getPercent($data);
                        return return_succ($info);
                    }else{
                        return return_error(&#39;投票失败&#39;);
                    }
                }else{
                    // 已经投过票
                    return return_error(&#39;您已经投过票了&#39;);
                }
            }else{
                // 初次渲染,获取初始数据
                $info = $this->getPercent($data);
                return return_succ($info);
            }
        }else{
            return return_error(&#39;数据不能为空&#39;);
        }
    }
    // 计算比例
    public function getPercent($data)
    {
        // 投票成功  获取当前各自的票数
        $info = model(&#39;Vote&#39;)->getInfo($data);
        // 计算比例 保留3位小数
        $info[&#39;red_percent&#39;] = round($info[&#39;rednum&#39;] / ($info[&#39;rednum&#39;] + $info[&#39;bluenum&#39;]),3);
        $info[&#39;blue_percent&#39;] = 1 - $info[&#39;red_percent&#39;];
        return $info;
    }
}

登入後複製

##模型：

<?php
namespace app\index\model;
use think\Model;
use think\Db;
class Vote extends Model
{
    // 检测当前ip是否已经投过票
    public function checkIp($data)
    {
        $res = Db::table(&#39;votes_ip&#39;)->where([&#39;vid&#39;=>$data[&#39;vid&#39;],&#39;ip&#39;=>$data[&#39;ip&#39;]])->count();
        return $res;
    }
    // 投票
    public function postVote($data)
    {
        $info = $this->getInfo($data);
        if ($info) {
            Db::startTrans();
            try {
                
                if ($data[&#39;type&#39;] == "red") {
                    // 更新票数表  
                    Db::table(&#39;votes&#39;)->where([&#39;id&#39;=>$data[&#39;vid&#39;]])->update([&#39;rednum&#39;=>$info[&#39;rednum&#39;]+1]);
                }elseif ($data[&#39;type&#39;] == "blue") {
                    Db::table(&#39;votes&#39;)->where([&#39;id&#39;=>$data[&#39;vid&#39;]])->update([&#39;bluenum&#39;=>$info[&#39;bluenum&#39;]+1]);
                }
                // 添加用户投票ip
                Db::table(&#39;votes_ip&#39;)->insert([&#39;vid&#39;=>$data[&#39;vid&#39;],&#39;ip&#39;=>$data[&#39;ip&#39;]]);
                Db::commit();
                return true;
            } catch (Exception $e) {
                Db::rollback();
                return false;
            }
        }
    }
    // 获取当前各自的票数
    public function getInfo($data)
    {
        // 获取各自的票数
        $info = Db::table(&#39;votes&#39;)->where([&#39;id&#39;=>$data[&#39;vid&#39;]])->find();
        return $info;
    }
}

登入後複製

以上是ThinkPHP5+jQuery+MySql實作投票功能的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7807

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1236

Related knowledge

MySQL：世界上最受歡迎的數據庫的簡介 Apr 12, 2025 am 12:18 AM

MySQL是一種開源的關係型數據庫管理系統，主要用於快速、可靠地存儲和檢索數據。其工作原理包括客戶端請求、查詢解析、執行查詢和返回結果。使用示例包括創建表、插入和查詢數據，以及高級功能如JOIN操作。常見錯誤涉及SQL語法、數據類型和權限問題，優化建議包括使用索引、優化查詢和分錶分區。

apache怎麼連接數據庫 Apr 13, 2025 pm 01:03 PM

Apache 連接數據庫需要以下步驟：安裝數據庫驅動程序。配置 web.xml 文件以創建連接池。創建 JDBC 數據源，指定連接設置。從 Java 代碼中使用 JDBC API 訪問數據庫，包括獲取連接、創建語句、綁定參數、執行查詢或更新以及處理結果。

MySQL的位置：數據庫和編程 Apr 13, 2025 am 12:18 AM

MySQL在數據庫和編程中的地位非常重要，它是一個開源的關係型數據庫管理系統，廣泛應用於各種應用場景。 1）MySQL提供高效的數據存儲、組織和檢索功能，支持Web、移動和企業級系統。 2）它使用客戶端-服務器架構，支持多種存儲引擎和索引優化。 3）基本用法包括創建表和插入數據，高級用法涉及多表JOIN和復雜查詢。 4）常見問題如SQL語法錯誤和性能問題可以通過EXPLAIN命令和慢查詢日誌調試。 5）性能優化方法包括合理使用索引、優化查詢和使用緩存，最佳實踐包括使用事務和PreparedStatemen

為什麼要使用mysql？利益和優勢 Apr 12, 2025 am 12:17 AM

選擇MySQL的原因是其性能、可靠性、易用性和社區支持。 1.MySQL提供高效的數據存儲和檢索功能，支持多種數據類型和高級查詢操作。 2.採用客戶端-服務器架構和多種存儲引擎，支持事務和查詢優化。 3.易於使用，支持多種操作系統和編程語言。 4.擁有強大的社區支持，提供豐富的資源和解決方案。

MySQL的角色：Web應用程序中的數據庫 Apr 17, 2025 am 12:23 AM

MySQL在Web應用中的主要作用是存儲和管理數據。 1.MySQL高效處理用戶信息、產品目錄和交易記錄等數據。 2.通過SQL查詢，開發者能從數據庫提取信息生成動態內容。 3.MySQL基於客戶端-服務器模型工作，確保查詢速度可接受。

docker怎麼啟動mysql Apr 15, 2025 pm 12:09 PM

在 Docker 中啟動 MySQL 的過程包含以下步驟：拉取 MySQL 鏡像創建並啟動容器，設置根用戶密碼並映射端口驗證連接創建數據庫和用戶授予對數據庫的所有權限

laravel入門實例 Apr 18, 2025 pm 12:45 PM

Laravel 是一款 PHP 框架，用於輕鬆構建 Web 應用程序。它提供一系列強大的功能，包括：安裝：使用 Composer 全局安裝 Laravel CLI，並在項目目錄中創建應用程序。路由：在 routes/web.php 中定義 URL 和處理函數之間的關係。視圖：在 resources/views 中創建視圖以呈現應用程序的界面。數據庫集成：提供與 MySQL 等數據庫的開箱即用集成，並使用遷移來創建和修改表。模型和控制器：模型表示數據庫實體，控制器處理 HTTP 請求。