第三百七十節，Python分佈式爬蟲打造搜索引擎Scrapy精講—elasticsearch(搜索引擎)用Django實現搜索結果分頁

時間 2019-12-01

標籤三百七十 python 分佈式爬蟲打造搜索引擎 scrapy elasticsearch django 實現搜索結果分頁欄目 Python 简体版

原文原文鏈接

第三百七十節，Python分佈式爬蟲打造搜索引擎Scrapy精講—elasticsearch(搜索引擎)用Django實現搜索結果分頁javascript

邏輯處理函數css

　　計算搜索耗時
　　在開始搜索前：start_time = datetime.now()獲取當前時間
　　在搜索結束後：end_time = datetime.now()獲取當前時間
　　last_time = (end_time-start_time).total_seconds()結束時間減去開始時間等於用時,轉換成秒html

from django.shortcuts import render

# Create your views here.
from django.shortcuts import render,HttpResponse
from django.views.generic.base import View
from app1.models import lagouType               # 導入操做elasticsearch(搜索引擎)類
import json
from elasticsearch import Elasticsearch         # 導入原生的elasticsearch(搜索引擎)接口
client = Elasticsearch(hosts=["127.0.0.1"])     # 鏈接原生的elasticsearch
from datetime import datetime


def indexluoji(request):
    print(request.method)  # 獲取用戶請求的路徑
    return render(request, 'index.html')


def suggestluoji(request):                                      # 搜索自動補全邏輯處理
    key_words = request.GET.get('s', '')                        # 獲取到請求詞
    re_datas = []
    if key_words:
        s = lagouType.search()                                  # 實例化elasticsearch(搜索引擎)類的search查詢
        s = s.suggest('my_suggest', key_words, completion={
            "field": "suggest", "fuzzy": {
                "fuzziness": 1
            },
            "size": 5
        })
        suggestions = s.execute_suggest()
        for match in suggestions.my_suggest[0].options:
            source = match._source
            re_datas.append(source["title"])
    return HttpResponse(json.dumps(re_datas), content_type="application/json")


def searchluoji(request):                                       # 搜索邏輯處理
    key_words = request.GET.get('q', '')                        # 獲取到請求詞
    page = request.GET.get('p', '1')                            # 獲取訪問頁碼
 try: page = int(page) except: page = 1 start_time = datetime.now() # 獲取當前時間
    response = client.search(                                   # 原生的elasticsearch接口的search()方法，就是搜索，能夠支持原生elasticsearch語句查詢
        index="lagou",                                          # 設置索引名稱
        doc_type="biao",                                        # 設置表名稱
        body={                                                  # 書寫elasticsearch語句
            "query": {
                "multi_match": {                                # multi_match查詢
                    "query": key_words,                         # 查詢關鍵詞
                    "fields": ["title", "description"]          # 查詢字段
                }
            },
            "from": (page-1)*10,                                          # 從第幾條開始獲取
            "size": 10,                                         # 獲取多少條數據
            "highlight": {                                      # 查詢關鍵詞高亮處理
                "pre_tags": ['<span class="keyWord">'],         # 高亮開始標籤
                "post_tags": ['</span>'],                       # 高亮結束標籤
                "fields": {                                     # 高亮設置
                    "title": {},                                # 高亮字段
                    "description": {}                           # 高亮字段
                }
            }
        }
    )
 end_time = datetime.now()                                   # 獲取當前時間
    last_time = (end_time-start_time).total_seconds()           # 結束時間減去開始時間等於用時,轉換成秒
    total_nums = response["hits"]["total"]                      # 獲取查詢結果的總條數
    if (page % 10) > 0:                                         # 計算頁數
        paga_nums = int(total_nums/10)+1
    else: paga_nums = int(total_nums/10)
    hit_list = []                                               # 設置一個列表來儲存搜索到的信息，返回給html頁面
    for hit in response["hits"]["hits"]:                        # 循環查詢到的結果
        hit_dict = {}                                           # 設置一個字典來儲存循環結果
        if "title" in hit["highlight"]:                         # 判斷title字段，若是高亮字段有類容
            hit_dict["title"] = "".join(hit["highlight"]["title"])      # 獲取高亮裏的title
        else:
            hit_dict["title"] = hit["_source"]["title"]                 # 不然獲取不是高亮裏的title

        if "description" in hit["highlight"]:                           # 判斷description字段，若是高亮字段有類容
            hit_dict["description"] = "".join(hit["highlight"]["description"])[:500]    # 獲取高亮裏的description
        else:
            hit_dict["description"] = hit["_source"]["description"]     # 不然獲取不是高亮裏的description

        hit_dict["url"] = hit["_source"]["url"]                         # 獲取返回url

        hit_list.append(hit_dict)                                       # 將獲取到內容的字典，添加到列表
    return render(request, 'result.html', {"page": page,                # 當前頁碼
                                           "total_nums": total_nums,    # 數據總條數
                                           "all_hits": hit_list,        # 數據列表
                                           "key_words": key_words,      # 搜索詞
                                           "paga_nums": paga_nums,      # 頁數
                                           "last_time": last_time       # 搜索時間
                                           })                           # 顯示頁面和將列表和搜索詞返回到html

HTMLjava

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
{#引入靜態文件路徑#}
{% load staticfiles %}
<head>
<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>python-lcv-search搜索引擎</title>
<link href="{% static 'css/style.css'%}" rel="stylesheet" type="text/css" />
<link href="{% static 'css/result.css'%}" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
    <div id="hd" class="ue-clear">
        <a href="/"><div class="logo"></div></a>
        <div class="inputArea">
            <input type="text" class="searchInput" value="{{ key_words }}"/>
            <input type="button" class="searchButton" onclick="add_search()"/>
        </div>
    </div>
    <div class="nav">
        <ul class="searchList">
            <li class="searchItem current" data-type="article">文章</li>
            <li class="searchItem" data-type="question">問答</li>
            <li class="searchItem" data-type="job">職位</li>
        </ul>
    </div>
    <div id="bd" class="ue-clear">
        <div id="main">
            <div class="sideBar">
                
                <div class="subfield">網站</div>
                <ul class="subfieldContext">
                    <li>
                        <span class="name">伯樂在線</span>
                        <span class="unit">(None)</span>
                    </li>
                    <li>
                        <span class="name">知乎</span>
                        <span class="unit">(9862)</span>
                    </li>
                    <li>
                        <span class="name">拉勾網</span>
                        <span class="unit">(9862)</span>
                    </li>
                    <li class="more">
                        <a href="javascript:;">
                            <span class="text">更多</span>
                            <i class="moreIcon"></i>
                        </a>
                    </li>
                </ul>
                
                            
                <div class="sideBarShowHide">
                    <a href="javascript:;" class="icon"></a>
                </div>
            </div>
            <div class="resultArea">
                <p class="resultTotal">
                    <span class="info">找到約&nbsp;<span class="totalResult">{{ total_nums }}</span>&nbsp;條結果(用時<span class="time">{{ last_time }}</span>秒)，共約<span class="totalPage">{{ paga_nums }}</span>頁</span>
                </p>
                <div class="resultList">
                    {% for hit in all_hits %}
                    <div class="resultItem">
                            <div class="itemHead">
                                <a href="{% autoescape off %} {{ hit.url }} {% endautoescape %}"  target="_blank" class="title">{% autoescape off %} {{ hit.title }} {% endautoescape %}</a>
                                <span class="divsion">-</span>
                                <span class="fileType">
                                    <span class="label">來源：</span>
                                    <span class="value">網絡</span>
                                </span>
                                <span class="dependValue">
                                    <span class="label">得分：</span>
                                    <span class="value">3.401155</span>
                                </span>
                            </div>
                            <div class="itemBody">
                                {% autoescape off %} {{ hit.description }} {% endautoescape %}
                            </div>
                        </div>
                    {% endfor %}
                </div>
                <!-- 分頁 -->
                <div class="pagination ue-clear"></div>
                <!-- 相關搜索 -->
                
                
                
            </div>
            <div class="historyArea">
                <div class="hotSearch">
                    <h6>熱門搜索</h6>
                    <ul class="historyList">
                        
                            <li><a href="/search?q=linux">linux</a></li>
                        
                    </ul>
                </div>
                <div class="mySearch">
                    <h6>個人搜索</h6>
                    <ul class="historyList">

                    </ul>
                </div>
            </div>
        </div><!-- End of main -->
    </div><!--End of bd-->
</div>

<div id="foot">Copyright &copy;projectsedu.com 版權全部  E-mail:admin@projectsedu.com</div>
</body>
<script type="text/javascript" src="{% static 'js/jquery.js'%}"></script>
<script type="text/javascript" src="{% static 'js/global.js'%}"></script>
<script type="text/javascript" src="{% static 'js/pagination.js'%}"></script>
<script type="text/javascript">
    var search_url = "/search/"

    $('.searchList').on('click', '.searchItem', function(){
        $('.searchList .searchItem').removeClass('current');
        $(this).addClass('current');    
    });
    
    $.each($('.subfieldContext'), function(i, item){
        $(this).find('li:gt(2)').hide().end().find('li:last').show();        
    });

    function removeByValue(arr, val) {
      for(var i=0; i<arr.length; i++) {
        if(arr[i] == val) {
          arr.splice(i, 1);
          break;
        }
      }
    }
    $('.subfieldContext .more').click(function(e){
        var $more = $(this).parent('.subfieldContext').find('.more');
        if($more.hasClass('show')){
            
            if($(this).hasClass('define')){
                $(this).parent('.subfieldContext').find('.more').removeClass('show').find('.text').text('自定義');
            }else{
                $(this).parent('.subfieldContext').find('.more').removeClass('show').find('.text').text('更多');    
            }
            $(this).parent('.subfieldContext').find('li:gt(2)').hide().end().find('li:last').show();
        }else{
            $(this).parent('.subfieldContext').find('.more').addClass('show').find('.text').text('收起');
            $(this).parent('.subfieldContext').find('li:gt(2)').show();    
        }
        
    });
    
    $('.sideBarShowHide a').click(function(e) {
        if($('#main').hasClass('sideBarHide')){
            $('#main').removeClass('sideBarHide');
            $('#container').removeClass('sideBarHide');
        }else{
            $('#main').addClass('sideBarHide');    
            $('#container').addClass('sideBarHide');
        }
        
    });
    var key_words = "{{ key_words }}"
    //分頁
    $(".pagination").pagination({{ total_nums }}, {
        current_page :{{ page|add:'-1' }}, //當前頁碼
        items_per_page :10,
        display_msg :true,
        callback :pageselectCallback
    });
    function pageselectCallback(page_id, jq) {
        window.location.href=search_url+'?q='+key_words+'&p='+page_id
    }
    
    setHeight();
    $(window).resize(function(){
        setHeight();    
    });
    
    function setHeight(){
        if($('#container').outerHeight() < $(window).height()){
            $('#container').height($(window).height()-33);
        }    
    }
</script>
<script type="text/javascript">
    $('.searchList').on('click', '.searchItem', function(){
        $('.searchList .searchItem').removeClass('current');
        $(this).addClass('current');
    });

    // 聯想下拉顯示隱藏
    $('.searchInput').on('focus', function(){
        $('.dataList').show()
    });

    // 聯想下拉點擊
    $('.dataList').on('click', 'li', function(){
        var text = $(this).text();
        $('.searchInput').val(text);
        $('.dataList').hide()
    });

    hideElement($('.dataList'), $('.searchInput'));
</script>
<script>
    var searchArr;
    //定義一個search的，判斷瀏覽器有無數據存儲（搜索歷史）
    if(localStorage.search){
        //若是有，轉換成 數組的形式存放到searchArr的數組裏（localStorage以字符串的形式存儲，因此要把它轉換成數組的形式）
        searchArr= localStorage.search.split(",")
    }else{
        //若是沒有，則定義searchArr爲一個空的數組
        searchArr = [];
    }
    //把存儲的數據顯示出來做爲搜索歷史
    MapSearchArr();

    function add_search(){
        var val = $(".searchInput").val();
        if (val.length>=2){
            //點擊搜索按鈕時，去重
            KillRepeat(val);
            //去重後把數組存儲到瀏覽器localStorage
            localStorage.search = searchArr;
            //而後再把搜索內容顯示出來
            MapSearchArr();
        }

        window.location.href=search_url+'?q='+val+"&s_type="+$(".searchItem.current").attr('data-type')

    }

    function MapSearchArr(){
        var tmpHtml = "";
        var arrLen = 0
        if (searchArr.length > 6){
            arrLen = 6
        }else {
            arrLen = searchArr.length
        }
        for (var i=0;i<arrLen;i++){
            tmpHtml += '<li><a href="/search?q='+searchArr[i]+'">'+searchArr[i]+'</a></li>'
        }
        $(".mySearch .historyList").append(tmpHtml);
    }
    //去重
    function KillRepeat(val){
        var kill = 0;
        for (var i=0;i<searchArr.length;i++){
            if(val===searchArr[i]){
                kill ++;
            }
        }
        if(kill<1){
            searchArr.unshift(val);
        }else {
            removeByValue(searchArr, val)
            searchArr.unshift(val)
        }
    }
</script>
</html>