@Hadi
初來乍到 多多點贊
文章目錄
- @Hadi
- 前言
- 一、目標需求分析
- 1. 對目標網頁的分析
- 2. 整體需求分析
- 二、效果展示
- 1. 網址
- 2.刷不出來的看圖吧
- 三、來人把代碼端上來
- 2.前端（echarts+ajax）
- 寫在最后
前言
之前閑來無事逛了逛csdn看了點博文發現有些博主文章還是挺有趣的，看了幾篇類似的網頁爬蟲的應用覺得寫得挺好，于是在尋找目標之后對新浪微博動起了邪念~😄
一、目標需求分析
1. 對目標網頁的分析
所有的爬蟲起始步驟都一樣，首先都是先對目標的網頁結構進行分析，然后確定自己使用的方法或者框架是否適用，再進行下一步，有對流程的把控才會有相應的效率，
分享下我的經驗，先看網頁原始碼，如果找到目標的內容的話就是靜態爬蟲這種是最簡單的抓取，非常基礎的內容，然后如果原始碼找不到相應的內容的話，一般就是動態加載的網頁，這就屬于動態爬蟲的范疇，這時候就要F12XHR或者All去觀察相應的請求地址，再進行下一步的操作，然后就是設定請求頭 調delay 放Session 等一系列的應對反爬機制的操作再進一步測驗除錯觀察，所以思路清晰很重要！！
今天的主角很明顯就是一個靜態網頁，很簡單不用框架直接抓取就行，😐
2. 整體需求分析
在網頁分析過后開始要對整體流程的做一個需求分析，因為原本我想使用scrapy框架來應對動態頁面或者一些反爬機制，但既然現在不需要的話我直接就用java寫吧，因為之前搭的小web是ssm架構的，所以直接選用java去做整個流程會比較快，直接扔進去就好了，其實用什么語言去寫需求不重要，你可以用php 你可以用python，主要是看需求怎么去完成比較順手，以及實作后的預想性能效果如何，找到最優解就可以了，我是比較隨心的，我直接用java，圖表的話這里直接用echarts簡單粗暴，沒聽說過的直接去百度echarts就好了用法很簡單，網頁定位這里的話我一般會用xpath，因為正則很繁瑣本人也不是很熟練，所以就是xpath定位爬取靜態資源=>整理資料且json格式化=>echarts+ajax異步加載實作動態圖表
二、效果展示
1. 網址
可以直接到本人網站看效果
服務器這里我調的是3秒請求一次，為什么這么慢咧因為剛開始是1秒share給人看后請求太密集就被新浪安全中心狙擊了hhhhhhhhhhhhh
2.刷不出來的看圖吧
三、來人把代碼端上來
(我這里的話直接用servlet做的簡易web有點懶😊)
代碼如下:
import java.io.ByteArrayInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.dom4j.io.SAXReader;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.jsoup.Jsoup;
import com.fasterxml.jackson.databind.ObjectMapper;
/**
* Servlet implementation class getjson
*/
@WebServlet("/getdata")
public class getdata extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public getdata() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException {
// TODO Auto-generated method stub
try {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("UTF-8");
SAXReader reader = new SAXReader();
String html = Jsoup.connect("https://s.weibo.com/top/summary?Refer=top_hot&topnav=1&wvr=6").get().html().replace("&", "&");
InputStream htmlinp=new ByteArrayInputStream(html.getBytes("UTF-8"));
String textxpath="//td[@class='td-02']/a";
String countxpath="//td[@class='td-02']/span";
Document doc = reader.read(htmlinp);
List<Element> textlist = doc.selectNodes(textxpath);
List<Element> countlist = doc.selectNodes(countxpath);
textlist.remove(0);
ArrayList tl=new ArrayList();
ArrayList cl=new ArrayList();
//遍歷熱搜文位元組點
for (Element ele : textlist) {
tl.add(ele.getText());
//System.out.println("熱搜" + ":" + ele.getText());
}
//遍歷點擊量節點
for (Element ele : countlist) {
cl.add(ele.getText());
//System.out.println("點擊量"+ ":" + ele.getText());
}
Map<String, ArrayList> map = new HashMap<String,ArrayList>();
map.put("text", tl);
map.put("count", cl);
ObjectMapper oj=new ObjectMapper();
String jsonresult=oj.writeValueAsString(map);
System.out.println(jsonresult);
PrintWriter out = response.getWriter();
out.print(jsonresult);
out.flush();
out.close();
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
2.前端（echarts+ajax）
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新浪微博實時熱搜資料</title>
</head>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<body>
<h1 align="center">ProducedBy@Hadi2021</h1>
<div id="main" style="width: 1550px;height:600px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: '實時熱搜監測',
subtext: 'From weibo.sina'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '8%',
bottom: '5%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: []
},
series: [
{
name: '',
type: 'bar',
data: ['熱搜詞']
}
]
});
myChart.showLoading(); //資料加載完之前先顯示一段簡單的loading影片
function sendRequest(){
$.ajax({
type : "post",
async : true, //異步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行）
url : "getdata", //請求發送到TestServlet處
data : {},
dataType : "json", //回傳資料形式為json
success : function(result) {
myChart.hideLoading(); //隱藏加載影片
myChart.setOption({ //加載資料圖表
yAxis: {
data: result.text
},
series: [{
// 根據名字對應到相應的系列
name: '實時搜索量',
data: result.count
}]
});
},
error : function(errorMsg) {
//請求失敗時執行該函式
alert("圖表請求資料失敗!");
myChart.hideLoading();
}
})}
$(function () { //加載頁面的時候就會呼叫定時重繪
setInterval("sendRequest()", 1000); //每隔1秒重繪點擊量
});
</script>
</body>
</html>
這里的實時更新其實就是setInterval方法里的定時呼叫函式罷了，定時呼叫ajax請求servlet中的回傳值，
寫在最后
這是我第一篇文章，雖然不知道有沒有人看，但這也花了我一個早上的摸魚時間，我是Hadi，希望看我文章的人都能給我點個贊讓我也有繼續更下去的動力，分享一些有趣的東西和自己的小經驗 好了我干飯去了~！！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/263801.html
標籤：java