零基礎打造一款屬於自己的網頁搜尋引擎
前言
在說這個之前,想必大家應該都比較瞭解搜尋引擎了,它就是通過使用者在瀏覽器輸入框中輸入文字,從而顯示一些結果,你覺得哪項符合你要搜尋的內容,你就點選哪項。
【一、專案準備】
瀏覽器:360瀏覽器
編輯器:Sublime Text 3
外掛:Jquery-3.2.1.Min.Js
【二、專案實現】
由於是要實現一個網頁搜尋引擎,所以我們需要借用網頁三劍客(Html+Css+Javascript),然後實現這一功能。
1.開啟百度分析網頁結構
我們可以先看看百度的搜尋引擎:
可以看到,這個搜尋框的部分設定,比如關閉自動完成功能。然後我們在隨便搜尋內容來檢視它的變化:
可以看到某些我們查詢的關鍵字,於是我們便發現了請求規律:
https://www.baidu.com/s?+查詢字元引數
這就構成了我們的一個完整的get請求,而且這裡面有很多關鍵字引數可以省略掉,只需要保留重要的一部分就好了。於是,經試驗,得出如下結論:
https://www.baidu.com/s?wd=keyword
這個才是請求的介面地址,只需將keyword引數替換為任意搜尋關鍵字即可實現查詢並跳轉到相應結果頁面。
2.編寫Html輸入框,搜尋按鈕
看過之前寫的Html系列的文章,你將不再對此感到困惑。
<html> <head> <title></title> <style type="text/css"> *{ 內外邊距初始時為0 margin:0; padding:0 } input{ width:300px; height:30px } span{ position:absolute; 絕對定位 background-color:red; 背景顏色 border:1px solid gray; 邊框設定 width:60px; height:32px; text-align:center 文字位置 } span:hover{ 滑鼠懸停時的樣式 background-color:blue } </style> </head> <body> <input type="text" name="" placeholder="請輸入要搜尋的內容"> 文字框 <span>search</span> 搜尋按鈕 </body> </html>
編寫完成後進入瀏覽器檢視,即可看到:
可以看到,已經有點瀏覽器搜尋框的意思了。
3.匯入Jquery外掛
<script src='jquery-3.2.1.min.js'></script>
4.編寫js指令碼
這個是重中之重,開啟瀏覽器,network,繼續分析:
可以看到搜尋結果就在裡面。然後開啟這個請求的url地址,經過多次實驗,發現就只有圖中標記的引數有變化:
所以我們可以得出結論,我們只需要改變這兩個值即可。
1).建立刪除指令碼
於是我先建立一個指令碼標籤,不用它的時候隨時可以清除,避免佔用記憶體,導致頁面開啟遲緩,效能降低:
var script=document.createElement('script'); 建立script的標籤 script.id='jsonp'; 設定id為jsonp script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd; 設定它的地址 document.body.appendChild(script); 新增script元素到body中
然後等它不用了,隨時將它刪除:
var script=document.querySelector('#jsonp'); 選擇id為jsonp的元素
script.parentNode.removeChild(script); 從這個元素的父元素中刪除這個元素
2).生成選項下拉選單
我們在瀏覽器可以看到,只要一輸入文字,它就會彈出對應的選項讓我們選擇,那麼這是如何辦到的了?
<script>
function getlist(wd){ /*獲取下拉列表*/
var script=document.createElement('script'); /*建立script的標籤*/
script.id='jsonp'; /*設定id為jsonp*/
script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd; /* 設定它的地址*/
document.body.appendChild(script); /*新增script元素到body中*/
}
function getData(data){ /*獲取資料*/
var script=document.querySelector('#jsonp'); /*選擇id為jsonp的元素*/
script.parentNode.removeChild(script); /*從這個元素的父元素中刪除這個元素*/
$('ol').html(''); /* 設定有序列表的值為空*/
var da=data.g; /* 獲取搜尋的結果*/
if(da){ /*結果存在的話就將結果放到li標籤中*/
da.forEach(function(item,index){
$('<li><a target="_blank" href ="https://www.baidu.com/s?wd='+item.q+'">'+item.q+'</a></li>').appendTo('ol');
})
}
}
/* 判斷鍵盤是否按下*/
$('input:text').keyup(function(){
var wd=$(this).val(); /* 輸入框的值*/
if(wd==''){ /*如果值是空,那麼就隱藏,否則顯示*/
$('ol').css('display','none');
$('ol').css('zIndex',-10);
}else{
$('ol').css('display','block');
$('ol').css('zIndex',20);
}
getlist(wd);
});
</script>
可以看到,搜尋結果已經出來了,而且有序列表下的"li"標籤也都對應的生成了。
3).給選項標記序列
我們可以看到,結果終於出來,但是我想給它個序列號,這樣就可以知道搜尋結果有多少個了。要設定的標記方式有很多種,可以以數字開頭,也可以是大小寫字母或者羅馬時間。在這裡我選擇數字,很簡單。
終於非常完美的實現了這一功能,是不是很驚豔了,趕快去試下吧。
4).搜尋重新整理
看到這裡相信大家應該都知道這個功能已經算是完成了,我們只需要隨便點選哪個li標籤都可以訪問到相應的頁面。於是,我決定新增一個重新整理的功能,屬於重連伺服器的那種重新整理:
<span onclick='window.location.reload()'>search</span> 點選後立即重新整理
【三、專案總結】
總的來說,對於初學者小白是個很不錯的練手專案,希望大家能從中有所收穫。
需要原始碼的小夥伴,後臺回覆“搜尋引擎”四個字即可獲取。
想學習更多Python網路爬蟲與資料探勘知識,可前往專業網站:http://pdcfighting.com/