. 目標(biāo)網(wǎng)頁

這是我們要獲取內(nèi)容的網(wǎng)頁：

radar.itjuzi.com/investevent

這個網(wǎng)頁需要先登錄才能看到數(shù)據(jù)信息，登錄界面如下：

可以看到，只需要輸入賬號和密碼就可以登錄，不用輸驗證碼，比較簡單。下面我們利用一個測試賬號和密碼，來實現(xiàn)模擬登錄。

私信菜鳥007獲取源碼以及教程哦！

2. POST 提交請求登錄

首先，我們要找到 POST 請求的 URL。

有兩種方法，第一種是在網(wǎng)頁 devtools 查看請求，第二種是在 Fiddler 軟件中查看。

先說第一種方法。

在登錄界面輸入賬號密碼，并打開開發(fā)者工具，清空所有請求，接著點(diǎn)擊登錄按鈕，這時便會看到有大量請求產(chǎn)生。哪一個才是 POST 請求的 URL呢？這個需要一點(diǎn)經(jīng)驗，因為是登錄，所以可以嘗試點(diǎn)擊帶有 「login」字眼的請求。這里我們點(diǎn)擊第四個請求，在右側(cè) Headers 中可以看到請求的 URL，請求方式是 POST類型，說明 URL 找對了。

接著，我們下拉到 Form Data，這里有幾個參數(shù)，包括 identify 和 password，這兩個參數(shù)正是我們登錄時需要輸入的賬號和密碼，也就是 POST 請求需要攜帶的參數(shù)。

參數(shù)構(gòu)造非常簡單，接下來只需要利用 Requests.post 方法請求登錄網(wǎng)站，然后就可以爬取內(nèi)容了。

下面，我們嘗試用 Fiddler 獲取 POST 請求。

如果你對 Fiddler 還不太熟悉或者沒有電腦上沒有安裝，可以先了解和安裝一下。

Fiddler 是位于客戶端和服務(wù)器端的 HTTP 代理，也是目前最常用的 HTTP 抓包工具之一 。 它能夠記錄客戶端和服務(wù)器之間的所有 HTTP 請求，可以針對特定的 HTTP 請求，分析請求數(shù)據(jù)、設(shè)置斷點(diǎn)、調(diào)試 web 應(yīng)用、修改請求的數(shù)據(jù)，甚至可以修改服務(wù)器返回的數(shù)據(jù)，功能非常強(qiáng)大，是 web 調(diào)試的利器。

Fiddler 下載地址：

www.telerik.com/download/fi…

使用教程：

zhuanlan.zhihu.com/p/37374178

www.hangge.com/blog/cache/…

下面，我們就通過 Fiddler 截取登錄請求。

當(dāng)點(diǎn)擊登錄時，官場 Fiddler 頁面，左側(cè)可以看到抓取了大量請求。通過觀察，第15個請求的 URL中含有「login」字段，很有可能是登錄的 POST 請求。我們點(diǎn)擊該請求，回到右側(cè)，分別點(diǎn)擊「inspectors」、「Headers」，可以看到就是 POST 請求，該 URL 和上面的方法獲取的 URL 是一致的。

接著，切換到右側(cè)的 Webforms 選項，可以看到 Body 請求體。也和上面方法中得到的一致。

獲取到 URL 和請求體參數(shù)之后，下面就可以開始用 Requests.post 方法模擬登錄了。

代碼如下：

import requests
headers = {
 'User-Agent': 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36',
 }
data = {
 'identity':'irw27812@awsoo.com', 
 'password':'test2018',
}
url ='https://www.itjuzi.com/user/login?redirect=&flag=&radar_coupon='
session = requests.Session()
session.post(url,headers = headers,data = data)
# 登錄后，我們需要獲取另一個網(wǎng)頁中的內(nèi)容
response = session.get('http://radar.itjuzi.com/investevent',headers = headers)
print(response.status_code)
print(response.text)
復(fù)制代碼

使用 session.post 方法提交登錄請求，然后用 session.get 方法請求目標(biāo)網(wǎng)頁，并輸出 HTML代碼?？梢钥吹?，成功獲取到了網(wǎng)頁內(nèi)容。

下面，介紹第 2 種方法。

3. 獲取 Cookies，直接請求登錄

上面一種方法，我們需要去后臺獲取 POST 請求鏈接和參數(shù)，比較麻煩。下面，我們可以嘗試先登錄，獲取 Cookie，然后將該 Cookie 添加到 Headers 中去，然后用 GET 方法請求即可，過程簡單很多。

代碼如下：

import requests
headers = {
 'User-Agent': 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36',
 'Cookie': '你的cookie',
}
url = 'https://www.itjuzi.com/user/login?redirect=&flag=&radar_coupon='
session = requests.Session()
response = session.get('http://radar.itjuzi.com/investevent', headers=headers)
print(response.status_code)
print(response.text)
復(fù)制代碼

可以看到，添加了 Cookie 后就不用再 POST 請求了，直接 GET 請求目標(biāo)網(wǎng)頁即可。可以看到，也能成功獲取到網(wǎng)頁內(nèi)容。

下面介紹第 3 種方法。

4. Selenium 模擬登錄

這個方法很直接，利用 Selenium 代替手動方法去自動輸入賬號密碼然后登錄就行了。

關(guān)于 Selenium 的使用，在之前的一篇文章中有詳細(xì)介紹，如果你不熟悉可以回顧一下：

www.makcyun.top/web_scrapin…

代碼如下：

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.wait import WebDriverWait
browser = webdriver.Chrome()
browser.maximize_window() # 最大化窗口
wait = WebDriverWait(browser, 10) # 等待加載10s
def login():
 browser.get('https://www.itjuzi.com/user/login')
 input = wait.until(EC.presence_of_element_located(
 (By.XPATH, '//*[@id="create_account_email"]')))
 input.send_keys('irw27812@awsoo.com')
 input = wait.until(EC.presence_of_element_located(
 (By.XPATH, '//*[@id="create_account_password"]')))
 input.send_keys('test2018')
 submit = wait.until(EC.element_to_be_clickable(
 (By.XPATH, '//*[@id="login_btn"]')))
 submit.click() # 點(diǎn)擊登錄按鈕
 get_page_index()
def get_page_index():
 browser.get('http://radar.itjuzi.com/investevent')
 try:
 print(browser.page_source) # 輸出網(wǎng)頁源碼
 except Exception as e:
 print(str(e))
login()
復(fù)制代碼

這里，我們在網(wǎng)頁中首先定位了賬號節(jié)點(diǎn)位置： '//*[@id="create_account_email"]' ，然后用 input.send_keys 方法輸入賬號，同理，定位了密碼框位置并輸入了密碼。接著定位 登錄 按鈕的位置： //*[@id="login_btn"] ，然后用 submit.click() 方法實現(xiàn)點(diǎn)擊登錄按鈕操作，從而完成登錄?？梢钥吹?，也能成功獲取到網(wǎng)頁內(nèi)容。

天做一個簡單的檢測進(jìn)度條模擬，我們在很多平臺都可以看到安全進(jìn)度檢測的進(jìn)度條，實際是對我們的安全設(shè)置進(jìn)行檢查，當(dāng)我們將對應(yīng)的信息補(bǔ)全之后，就相當(dāng)于完成了一項任務(wù)，其安全系數(shù)就會提升，這里我先整個最簡單的進(jìn)度條，下面是演示結(jié)果。

首先我們來定義HTML，這里我們主要有進(jìn)度條背景，進(jìn)度條，分值和檢測按鈕，這個前臺比較簡單，當(dāng)然也可以哪來用，這樣的話后臺要操作的就比較多了，計算和檢測的活都交給了后臺，我們只需要把后臺傳回來的數(shù)據(jù)顯示在這里即可。

接下來寫CSS樣式，這里我們還是喜歡使用響應(yīng)式來布局我的設(shè)計，所以我用到了媒體查詢功能，下面是CSS樣式設(shè)置，pragressContainer控制整個進(jìn)度條的樣式，pragressbar則是進(jìn)度條背景設(shè)置，pragress是進(jìn)度條進(jìn)度控制，這里綁定了一個動態(tài)的樣式，來改變我們的進(jìn)度。

這里我模擬一個點(diǎn)擊事件，來改變progress的值，這樣進(jìn)度條就會隨著progress的增長，來改變style的width值實現(xiàn)進(jìn)度改變的視覺，這里我定義一個num=0，然后寫個定時器，讓其自增，到了100就停止，再把num重置為0就可以反復(fù)檢測了。

這個progress 值是檢測的進(jìn)度顯示，如果想直接用的話就要通過后臺來實時的傳遞這個值了，而檢測結(jié)果result也需要通過后臺處理完之后檢測信息之后返回對應(yīng)的結(jié)果，這樣就把大部分壓力拋給了后端了，這個比較簡單，后面來慢慢完善。

這里用到了display: flex;這是W3C提出了一種新的布局方案,可以簡便、完整、響應(yīng)式地實現(xiàn)各種頁面布局，我給進(jìn)度條設(shè)定了flex: 1;它會自動的獲取剩余空間寬度，這樣我們在改變網(wǎng)頁寬度時就可以自動調(diào)整寬度了，align-items: center;設(shè)定垂直居中顯示。