【ubuntu云服务器部署公网Web抽奖工具】CSDN博客评论区用户抽奖

淩亂°似流年 2023-10-16 15:28 9阅读 0赞

## 系列文章目录 ##

送书第一期 [《用户画像：平台构建与业务实践》][Link 1]  
送书活动之抽奖工具的打造 [ 《获取博客评论用户抽取幸运中奖者》 ][Link 2]

--------------------

#### 文章目录 ####

*  系列文章目录
 *  前言
 *  一、抽奖页面
 *   *  1.1、页面源代码
     *  1.2、页面组成
     *  1.3、抽奖博客地址
     *  1.4、过滤账号（可过滤作者自身账号）
     *  1.5、获取抽奖账号名单按钮
     *  1.6、抽奖池用户名单显示区域
     *  1.7、抽奖按钮、已抽奖次数
     *  1.8、中奖名单
 *  二、springboot抽奖账号名单接口
 *   *  2.1、接口在服务端已做跨域处理
     *  2.2、根据博客地址获取评论信息
     *   *  2.2.1、找到博客地址评论信息的CSDN接口
     *  2.3、服务端根据博客地址获取评论信息核心代码
 *  总结

--------------------

## 前言 ##

前几天做了一期送书活动，随着时间流逝，也即将迎来赠书活动抽奖环节，为了活动的公正公开以及可见性，特此开发了一款Web抽奖工具，结合Springboot后台获取博客评论用户接口，打造了一款公开透明的抽奖工具，大家都可以来玩一玩。

**工具地址：** http://139.159.230.49/draw.html  
![在这里插入图片描述][2bc261d319b8467ebe8b1ff86c4dccfa.png]  
![在这里插入图片描述][be3c5abb4289470b9d06c01a0de982d0.png]  
![在这里插入图片描述][8034ea3cb079461b9b1498e97958e92d.png]

**获取博客评论用户接口(url后的参数可替换为想要的博客地址):** http://139.159.230.49/csdn/draw/url?url=https://blog.csdn.net/weixin\_39709134/article/details/133195146  
![在这里插入图片描述][fd9817d4c5ca4f74b90ab6b5dd2812dd.png]

--------------------

## 一、抽奖页面 ##

![在这里插入图片描述][006f21015436497fb81590e7ecef53cb.png]

### 1.1、页面源代码 ###

页面是单文件引入vue，所有的CSS、JS文件都是放在CDN上，此源代码直接复制即可用

### 1.2、页面组成 ###

博客赠书抽奖页面，由4部分组成

*  抽奖博客地址、过滤账号（可过滤作者自身账号）、获取抽奖账号名单按钮
 *  抽奖池用户名单显示区域
 *  抽奖按钮、已抽奖次数
 *  获奖名单

### 1.3、抽奖博客地址 ###

填写需要抽奖的CSDN博客地址  
如（用户画像：平台构建与业务实践）：https://blog.csdn.net/s445320/article/details/133265834  
![在这里插入图片描述][4d46fb8a96c343648da254856680d422.png]

### 1.4、过滤账号（可过滤作者自身账号） ###

在赠书时，我们可过滤掉作者自身账号，或者其他账号。  
如不能满足需求，可以自行改造过滤逻辑。

### 1.5、获取抽奖账号名单按钮 ###

点击此按钮，根据1.3、1.4 所填写的内容，去获取抽奖账号名单（可见第2部分 springboot抽奖账号名单接口）

### 1.6、抽奖池用户名单显示区域 ###

展示抽奖池用户名单。

*  多次评论的人，抽中概率会增加，所以会展示多次评论；
 *  中奖的人名单，会从此区域去掉，一个人只能中奖一次（如果有多次评论，也会从名单里全部去掉，不参与下一轮抽奖）

### 1.7、抽奖按钮、已抽奖次数 ###

在展示抽奖池用户名单后，即可点击抽奖按钮；  
已抽奖次数会累加。

### 1.8、中奖名单 ###

展示中奖者的名单，使用逗号（，）隔开

*  多次评论的人，中奖概率会增加；
 *  一个人只能中奖一次；
 *  赠送几本书就点击【抽奖按钮】几次

## 二、springboot抽奖账号名单接口 ##

### 2.1、接口在服务端已做跨域处理 ###

![在这里插入图片描述][33275c5d5bc54e5db93879c4e0b41331.png]

### 2.2、根据博客地址获取评论信息 ###

#### 2.2.1、找到博客地址评论信息的CSDN接口 ####

通过Chrome的【开发者工具】，在【网络】区域找到评论信息；

**1、切换到【预览】，通过响应数据，确认是我们要找的接口**  
![在这里插入图片描述][cbaeb3d9b9b84a33978bd9651668f921.png]

**2、切换到【标头】，拿到请求地址，并测试get、post请求类型**  
![在这里插入图片描述][50ed169346534d6bb0445640da01f7f0.png]

### 2.3、服务端根据博客地址获取评论信息核心代码 ###

1、从URL里提取出博客唯一ID；  
2、通过CSDN评论信息接口，获取评论数据信息；  
3、格式化数据，返回用户名、用户ID集合信息；

public List<DrawUser> getDrawUserList(String blogUrl) {
        
            int page = 1;
            int pageSize = 100;
    
            RestTemplate restTemplate = new RestTemplate();
            List<DrawUser> drawUserList = new ArrayList<>();
    
            String blogId = "";
            //处理特殊字符?
            if( blogUrl.indexOf("?") != -1 ) {
        
                blogUrl = blogUrl.substring(0 , blogUrl.indexOf("?"));
            }
            
    		//处理特殊字符#
            if( blogUrl.indexOf("#") != -1 ) {
        
                blogUrl = blogUrl.substring(0 , blogUrl.indexOf("#"));
            }
    
            int start = blogUrl.indexOf("details");
            if( start == -1 ) {
        
                log.info("格式错误");
                return null;
            } else {
        
                blogId = blogUrl.substring(start+8 , blogUrl.length());
            }
    
         	//循环加载多页数据，每页100条
            while( true ){
        
            	//页码每次+1
                String url = "https://blog.csdn.net/phoenix/web/v1/comment/list/"+ blogId +"?page="+ page++ +"&size="+ pageSize +"&fold=unfold";
                HashMap jsonObject =  restTemplate.getForObject(url, HashMap.class);
                if( !jsonObject.get("code").equals(200) ) {
        
                    return drawUserList;
                }
    
                if( jsonObject.get("code").equals(200) ) {
        
                    LinkedHashMap blogInfoMap = (LinkedHashMap) jsonObject.get("data");
                    //获取单次请求的评论信息集合
                    List<HashMap> userInfoList = (List<HashMap>) blogInfoMap.get("list");
    
                    for (int i = 0; i < userInfoList.size(); i++) {
        
                        HashMap userInfo = userInfoList.get(i);
                        //提取出userName、nickName
                        HashMap info = (HashMap) userInfo.get("info");
    					//把用户信息添加到集合里
                        drawUserList.add(new DrawUser(info.get("userName")+"" , info.get("nickName")+""));
                    }
    
                    if( userInfoList.size() < pageSize ) {
        
                        log.info("数据加载完毕");
                        return drawUserList;
                    }
                }
            }
            log.info("评论人数：" + drawUserList.size());
    		//返回用户信息集合
            return drawUserList;
        }

--------------------

## 总结 ##

后续还有很多赠书活动，特此开发了一个Web版本抽奖工具，基本上通用（覆盖了一些场景，还谈不上完美），可以解决CSDN博客几百评论用户信息获取问题。

[Link 1]: https://blog.csdn.net/s445320/article/details/133265834
[Link 2]: https://blog.csdn.net/s445320/article/details/133349692
[2bc261d319b8467ebe8b1ff86c4dccfa.png]: https://img-blog.csdnimg.cn/2bc261d319b8467ebe8b1ff86c4dccfa.png
[be3c5abb4289470b9d06c01a0de982d0.png]: https://img-blog.csdnimg.cn/be3c5abb4289470b9d06c01a0de982d0.png
[8034ea3cb079461b9b1498e97958e92d.png]: https://img-blog.csdnimg.cn/8034ea3cb079461b9b1498e97958e92d.png
[fd9817d4c5ca4f74b90ab6b5dd2812dd.png]: https://img-blog.csdnimg.cn/fd9817d4c5ca4f74b90ab6b5dd2812dd.png
[006f21015436497fb81590e7ecef53cb.png]: https://img-blog.csdnimg.cn/006f21015436497fb81590e7ecef53cb.png
[4d46fb8a96c343648da254856680d422.png]: https://img-blog.csdnimg.cn/4d46fb8a96c343648da254856680d422.png
[33275c5d5bc54e5db93879c4e0b41331.png]: https://img-blog.csdnimg.cn/33275c5d5bc54e5db93879c4e0b41331.png
[cbaeb3d9b9b84a33978bd9651668f921.png]: https://img-blog.csdnimg.cn/cbaeb3d9b9b84a33978bd9651668f921.png
[50ed169346534d6bb0445640da01f7f0.png]: https://img-blog.csdnimg.cn/50ed169346534d6bb0445640da01f7f0.png