利用java實現抽獎轉盤(着重安全控制)

本文是針對jquery 實現抽獎轉盤作者的一個補充(主要用java去實現轉盤結果生成及存儲，解決jquery 做法 非法用戶采用模擬器實現改變轉盤值的風險性)，針對jQuery的具體實現，請看案例：http://www.cnblogs.com/mofish/archive/2013/01/24/2875516.html              本文就不一一細說了，那么現在就直入正題。

由於公司產品推廣，最近要求實現一個邀請用戶注冊即可抽獎的轉盤，頁面展示如下：

 

 

java 實現方式如下：

構造實體類

WchatLotteryDomain.java

package com.cy.dcts.domain.activity;

import java.io.Serializable;

/**
* 微信用戶分享中獎基礎數據類
* @author yanst 2016/4/23 9:36
*/
public class WchatLotteryDomain implements Serializable{
private static final long serialVersionUID = -1595371216905016135L;

private Integer id;

//中獎金額
private String prize;

//中獎率
private Integer v;

public WchatLotteryDomain(Integer id, String prize, Integer v){
this.id = id;
this.prize = prize;
this.v = v;
}

public Integer getId() {
return id;
}

public void setId(Integer id) {
this.id = id;
}

public String getPrize() {
return prize;
}

public void setPrize(String prize) {
this.prize = prize;
}

public Integer getV() {
return v;
}

public void setV(Integer v) {
this.v = v;
}
}

 

 

抽獎算法實現類：  

     1.初始數據集合：initDrawList  。

  2.generateAward方法實現根據概率隨機生成中獎對象WchatLotteryDomain 

BigWheelDrawUtil.java

package com.cy.dcts.common.util;

import com.alibaba.fastjson.JSON;
import com.cy.dcts.domain.activity.WchatLotteryDomain;

import java.util.ArrayList;
import java.util.List;

/**
 *
 * wchat大轉盤抽獎活動
 *
 * @author yanst 2016/4/23 9:23
 */
public class BigWheelDrawUtil {


    /**
     * 給轉盤的每個角度賦初始值
     * @return
     */
    private final static List<WchatLotteryDomain> initDrawList = new ArrayList<WchatLotteryDomain>() {{
        add(new WchatLotteryDomain(1, "200", 1));
        add(new WchatLotteryDomain(2, "100", 3));
        add(new WchatLotteryDomain(3, "50", 30));
        add(new WchatLotteryDomain(4, "30", 30));
        add(new WchatLotteryDomain(5, "20", 26));
        add(new WchatLotteryDomain(6, "10", 10));
    }};

    /**
     * 生成獎項
     * @return
     */
    public static WchatLotteryDomain generateAward() {
        List<WchatLotteryDomain> initData = initDrawList;
        long result = randomnum(1, 100);
        int line = 0;
        int temp = 0;
        WchatLotteryDomain returnobj = null;
        int index = 0;
        for (int i = 0; i < initDrawList.size(); i++) {
            WchatLotteryDomain obj2 = initDrawList.get(i);
            int c = obj2.getV();
            temp = temp + c;
            line = 100 - temp;
            if (c != 0) {
                if (result > line && result <= (line + c)) {
                    returnobj = obj2;
                    break;
                }
            }
        }
        return returnobj;
    }

    // 獲取2個值之間的隨機數
    private static long randomnum(int smin, int smax){
            int range = smax - smin;
            double rand = Math.random();
            return (smin + Math.round(rand * range));
    }


    public static void main(String[] args) {
        System.out.println(JSON.toJSONString(generateAward()));
    }

}

 

 

controller 層 實現 顯示抽獎的結果給頁面，頁面啟動轉盤，把對應的中間角度顯示給用戶看，同時把中間金額保存到系統中。

1.調用util類返回中獎項

 //生成中獎金額對象
WchatLotteryDomain wchatLotteryDomain = BigWheelDrawUtil.generateAward();

2.修改抽獎次數 

//修改抽獎次數
Integer result = appShareService.markLuckDraw(id);

3.把中獎信息持久化

//寫入中獎信息
 writeXinRecord(mobile, wchatLotteryDomain);

4.把當前中獎信息及剩余中獎次數返回

//代碼略，參考ActivityAction.java  107、108行

ActivityAction.java

 /**
     * 抽獎
     *
     * @param id id
     * @param mobile    中獎號碼
     * @return
     */
    @RequestMapping("wXinMarkLuckDraw.jspx")
    @ResponseBody
    public JSonRespone markLuckDraw(Long id, String mobile) {
        //參數驗證
        if (id == null || id.longValue() == 0) {
            return JSonRespone.makeHasContentJSonRespone("1", "您沒有抽獎次數！");
        }
        //參數驗證
        if (StringUtils.isEmpty(mobile)) {
            return JSonRespone.makeHasContentJSonRespone("1", "中獎手機號碼為空！");
        }

        //生成中獎金額對象
        WchatLotteryDomain wchatLotteryDomain = BigWheelDrawUtil.generateAward();
        if(wchatLotteryDomain == null){
            return JSonRespone.makeHasContentJSonRespone("3", "生成抽獎數據失敗");
        }
        try {
            //修改抽獎次數
            Integer result = appShareService.markLuckDraw(id);
            if (result == null || result == 0) {
                return JSonRespone.makeHasContentJSonRespone("2", "抽獎失敗，請刷新重新驗證。");
            }
        } catch (Exception e) {
            logger.debug(e.getMessage());
            return JSonRespone.makeHasContentJSonRespone("2", "抽獎失敗，請刷新重新驗證。");
        }

        if(logger.isErrorEnabled()){
            logger.error("微信分享活動：手機號碼為：{}，中獎信息：{}", mobile, JSON.toJSONString(wchatLotteryDomain));
        }

        //寫入中間信息
        return writeXinRecord(mobile, wchatLotteryDomain);
    }

    //    微信 用戶分享 認證之后送話費活動 中獎記錄存儲路徑
    private static final String wXinFilePath =  "/home/wxhb/lottery.txt";
    //"/home/wxhb/lottery.txt";
    //"D:/list.txt";


    /**
     * 寫入中獎金額
     * @param mobile
     * @param wchatLotteryDomain
     * @return
     */
    private JSonRespone writeXinRecord(String mobile,WchatLotteryDomain wchatLotteryDomain ) {
        // 記錄時間
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
        Calendar calendar = Calendar.getInstance();
        String date = simpleDateFormat.format(calendar.getTime());
        // 記錄文件是否存在
        File file = new File(wXinFilePath);
        if (!file.exists()) {
            try {
                file.createNewFile();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        // 臨時記錄存儲
        ArrayList<String> arrayList = new ArrayList<>();
        // 是否已經存在記錄
        Scanner in = null;
        try {
            in = new Scanner(file);
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }
        // 讀取記錄放置臨時數組
        while (in.hasNextLine()) {
            arrayList.add(in.nextLine());
        }
        in.close();
        // 查詢記錄是否存在
        if (arrayList.size() > 0) {
            for (String str : arrayList) {
                if (mobile.equals(str.split("-")[0])) {
                    return JSonRespone.makeHasContentJSonRespone("1", "成功", "記錄已存在");
                }
            }
        }
        // 寫入記錄
        BufferedWriter out = null;
        try {
            out = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(file, true)));
            out.write(mobile + "    " + date + "    " + wchatLotteryDomain.getPrize());
            out.newLine();
            out.close();
        } catch (IOException e) {
            e.printStackTrace();
            return JSonRespone.makeHasContentJSonRespone("0", "失敗", e.getMessage());
        }

        Map<String, Object> resultMap = new HashMap<String, Object>();
        try {
            //獲取抽獎次數
            resultMap.put("luckDrawCounts", appShareService.getLuckDrawCounts(mobile));//抽獎次數
            resultMap.put("wchatLotteryDomain", wchatLotteryDomain);
        } catch (Exception e) {
            logger.debug(e.getMessage());
        }
        return JSonRespone.makeHasContentJSonRespone("0", "成功", resultMap);
    }

 

抽獎頁面代碼：

這里省略大轉盤樣式代碼，詳細參考：http://www.cnblogs.com/mofish/archive/2013/01/24/2875516.html

點擊抽獎按鈕 最先執行lottery.html 98行代碼   ，頁面入口已經告訴大家，剩余請大家往下看應該就明白了。

lottery.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xxx</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <link rel="stylesheet" type="text/css" href="css/app.css"/>
</head>
<body>
<div class="page">
    <div id="verify-section">
        <img src="img/1.png" width="750" height="654">
        <div class="field lottery">
            <h2>輸入您的手機號碼，查看您的可抽獎次數。</h2>
            <p>
                <input type="tel" id="mobile" class="mobile" placeholder="請輸入你的手機號碼" maxlength="11"/>
            </p>
            <p>
                <input type="text" id="code" placeholder="驗證碼" maxlength="6"/>
                <button id="btn-code" class="btn">獲取驗證碼</button>
            </p>
            <h2 class="error">手機號碼格式不正確</h2>
            <p>
                <button id="btn-verify" class="btn">提交</button>
            </p>
        </div>
    </div>
    <div id="lottery-section" class="field lottery">
        <h2>您的可抽獎次數為：_<span class="lucktime"></span>_次</h2>
        <p>
            <button id="btn-list" class="btn">查看好友認證的情況</button>
        </p>

        <p>
            <label for="mobile-check">請核對您的充值號碼：</label>
            <input type="tel" id="mobile-check" placeholder="請輸入要充值的手機號" maxlength="11"/>
            <p id="submit-check" style="display: none;">充值號碼格式不正確 </p>
        </p>

        <div class="ly-plate">
            <div class="m-rotate"></div>
            <div class="m-pointer"></div>
        </div>
        <p class="lottery-msg"></p>

        <h2 class="submit-msg" style="display: none;">話費將在1個工作日內充值，請注意查收。</h2>
        <p class="share-more">
            <button id="btn-share-more" class="btn">話費還有好多，我要繼續推薦</button>
        </p>
    </div>
    <div id="overlay">
        <div class="verify-list">
            <a href="#" onclick="$('#overlay').hide();"></a>
            <ul class="list">
            </ul>
        </div>
    </div>
</div>
</body>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pageResponse.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/Rotate.js"></script>
<script type="text/javascript" src="js/app.js" charset="utf-8"></script>
<script type="text/javascript">
    $(function () {
//        $("#lottery-section").show();
        $("#btn-list").click(function () {
            $("#overlay").show();
        });
        $("#btn-share-more").click(function(){
            window.location = "index.html";
        });
        pageResponse({
            selectors: 'div.page',
            mode: 'auto', // auto || contain || cover ，默認模式為auto
            width: '750', //輸入頁面的寬度，只支持輸入數值，默認寬度為320px
            height: '654'
        });

        //啟動轉盤
        var rotateFunc = function (angle, prize, luckDrawCounts) {  //angle: 獎項對應的角度 prize:中獎金額 luckDrawCounts:抽獎次數
            $('.m-rotate').stopRotate();
            $('.m-rotate').rotate({
                angle: 0,
                duration: 5000,
                animateTo: angle + 1440, //angle是圖片上各獎項對應的角度，1440是我要讓指針旋轉4圈。所以最后的結束的角度就是這樣子^^
                callback: function () {
                    //更改抽獎次數
                    $(".submit-msg").show();
                    $(".lucktime").html(luckDrawCounts);
                    isLottery = false;
                    $(".lottery-msg").html('您抽中了' + prize + '元手機話費，恭喜您。').css("color", "#fff");
                }
            });
        };

        
        $(".m-pointer").rotate({
            bind: {
                click: function () {
                    $("#submit-check").hide();
                    //判斷充值號碼
                    if (!verifyPhoneNumber($("#mobile-check").val())) {
                        $("#submit-check").css("color", "red").show();
                        return false;
                    }

                    if (luckDrawCounts != 0 && isLottery == false) {
                        var ajaxTimeoutTest = $.ajax({
                            url: "/activity/wXinMarkLuckDraw.jspx",
                            data: {"id": listIds[0], "mobile": $("#mobile-check").val()},
                            type: "POST",
//                            timeout : 5000, //超時時間設置，單位毫秒
                            success: function (rs) {
                                if (rs.result == "0") {
                                    //生成中獎數據
                                    var data = rs.content.wchatLotteryDomain;
                                    //抽獎剩余次數
                                    var luckDrawCounts = rs.content.luckDrawCounts;
                                    if (data.id == 1) {
                                        rotateFunc(360, data.prize, luckDrawCounts);
                                    }
                                    if (data.id == 2) {
                                        rotateFunc(300, data.prize, luckDrawCounts);
                                    }
                                    if (data.id == 3) {
                                        rotateFunc(240, data.prize, luckDrawCounts);
                                    }
                                    if (data.id == 4) {
                                        rotateFunc(180, data.prize, luckDrawCounts);
                                    }
                                    if (data.id == 5) {
                                        rotateFunc(120, data.prize, luckDrawCounts);
                                    }
                                    if (data.id == 6) {
                                        rotateFunc(60, data.prize, luckDrawCounts);
                                    }
                                }else {
                                    isLottery = false;
                                    $(".lottery-msg").html(rs.errorMessage).css("color", "red");
                                }
                            }
//                            ,complete : function(XMLHttpRequest,status){ //請求完成后最終執行參數
//                                if(status=='timeout'){
//                                    ajaxTimeoutTest.abort();
//                                    isLottery = false;
//                                    $(".lottery-msg").html("當前抽獎人數過多請稍后重試！").css("color", "red");
//                                }
//                            }
                        });
                    }else{
                        if (isLottery && luckDrawCounts > 0){
                            $(".lottery-msg").html('請提交后再重新抽獎').css("color", "red");
                        }else{
                            $(".lottery-msg").html('對不起你的抽獎機會用完了').css("color", "red");
                        }
                    }
                }
            }
        });
    });
</script>
</html>

 

為了體驗性，我這里的所有請求都是采用Ajax請求。

Java實現抽獎轉盤 示例到這里就結束了，比較簡單大家一看應該就明白了。這里也想補充說明下：

1.在考慮安全的情況下，抽獎算法實現，最好寫在后台，因為這樣中獎金額直接在后台去持久化了，無需經過頁面傳輸，頁面只是做了單純的展示，一些非法操作，是沒有辦法通過改變中獎金額，去刷我們的中獎金額。

舉例：如某個用戶抽獎中了200元話費，我這里接口入參只需要告訴我 id 和 mobile ，並沒有傳中獎金額，這里前端就沒有辦法非法改變中獎金額了。

2.考慮如果用戶點擊抽獎按鈕，但此時由於比較卡（可能受網絡限制，請求很慢等等原因）造成用戶點擊了但是已經離開當前頁面了，此時用戶應該算已經抽獎了。這時我每次請求都去檢查了抽獎次數估，也不會出現重復提交問題。

//修改抽獎次數
Integer result = appShareService.markLuckDraw(id);

  if (result == null || result == 0) {
     return JSonRespone.makeHasContentJSonRespone("2", "抽獎失敗，請刷新重新驗證。");
  }

 

第一次寫博客，請的不好請大家見諒。

有需要源碼的朋友可以留言，后續有空我會把項目中的代碼整理成單獨demo.