Table of Contents of Series Articles
The first issue of the book giveaway "User Portraits: Platform Construction and Business Practice"
book giveaway activity and the creation of a lottery tool "Get blog comments from users to draw lucky winners"
Article directory
Preface
A few days ago, we held a book-giving event. As time goes by, the lottery for the book-giving event is about to come. In order to make the event fair, open and visible, we have developed a Web lottery tool that combines with the Springboot backend to obtain blog comments. The user interface creates an open and transparent lottery tool that everyone can play.
Tool address: http://139.159.230.49/draw.html
Get the blog comment user interface (the parameters after the url can be replaced with the desired blog address): http://139.159.230.49/csdn/draw/url?url=https://blog.csdn.net/weixin_39709134/article/ details/133195146
1. Lottery page
1.1. Page source code
The page is a single file introduced into Vue. All CSS and JS files are placed on the CDN. You can directly copy the source code and use it.
1.2. Page composition
Blog book donation lottery page consists of 4 parts
- Lottery blog address, filter account (the author's own account can be filtered), button to get the list of lottery accounts
- Lottery pool user list display area
- Lottery button, number of draws
- Winners list
1.3. Lottery blog address
Fill in the CSDN blog address that needs to be drawn,
such as (user portrait: platform construction and business practice): https://blog.csdn.net/s445320/article/details/133265834
1.4. Filter accounts (the author’s own account can be filtered)
When donating books, we can filter out the author's own account or other accounts.
If it cannot meet the needs, you can modify the filtering logic yourself.
1.5. Get lottery account list button
Click this button to obtain the lottery account list based on the contents filled in 1.3 and 1.4 (see Part 2 of the springboot lottery account list interface)
1.6. Lottery pool user list display area
Display the list of lottery pool users.
- People who have commented multiple times will have an increased chance of being drawn, so multiple comments will be displayed;
- The list of winners will be removed from this area, and a person can only win once (if there are multiple comments, all will be removed from the list and will not participate in the next round of draws)
1.7. Lottery button, number of draws
After displaying the list of lottery pool users, you can click the lottery button;
the number of draws will be accumulated.
1.8. List of winners
Display the list of winners, separated by commas (,)
- People who comment multiple times will have an increased chance of winning;
- A person can only win once;
- Just click the [Lottery Button] a few times to give away a few books.
2. Springboot lottery account list interface
Get the blog comment user interface (the parameters after the url can be replaced with the desired blog address): http://139.159.230.49/csdn/draw/url?url=https://blog.csdn.net/weixin_39709134/article/ details/133195146
2.1. The interface has been processed cross-domain on the server side.
2.2. Obtain comment information based on blog address
2.2.1. Find the CSDN interface of blog address comment information
Find the comment information in the [Network] area through Chrome's [Developer Tools];
1. Switch to [Preview] and confirm through the response data that it is the interface we are looking for.
2. Switch to [Header], get the request address, and test the get and post request types
2.3. The server obtains the core code of comment information based on the blog address.
1. Extract the unique blog ID from the URL;
2. Obtain the comment data information through the CSDN comment information interface;
3. Format the data and return the user name and user ID collection information;
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;
}
Summarize
There will be many book donation activities in the future, and a Web version of the lottery tool has been developed. It is basically universal (covers some scenarios, and is far from perfect), and can solve the problem of obtaining information from hundreds of commenting users on the CSDN blog.