者：HelloGitHub-追夢(mèng)人物

搜索是一個(gè)復(fù)雜的功能，但對(duì)于一些簡(jiǎn)單的搜索任務(wù)，我們可以使用 Django Model 層提供的一些內(nèi)置方法來(lái)完成。現(xiàn)在我們來(lái)為我們的博客提供一個(gè)簡(jiǎn)單的搜索功能。

概述

博客文章通常包含標(biāo)題和正文兩個(gè)部分。當(dāng)用戶(hù)輸入某個(gè)關(guān)鍵詞進(jìn)行搜索后，我們希望為用戶(hù)顯示標(biāo)題和正文中含有被搜索關(guān)鍵詞的全部文章。整個(gè)搜索的過(guò)程如下：

1. 用戶(hù)在搜素框中輸入搜索關(guān)鍵詞，假設(shè)為 “django”，然后用戶(hù)點(diǎn)擊了搜索按鈕提交其輸入的結(jié)果到服務(wù)器。
2. 服務(wù)器接收到用戶(hù)輸入的搜索關(guān)鍵詞 “django” 后去數(shù)據(jù)庫(kù)查找文章標(biāo)題和正文中含有該關(guān)鍵詞的全部文章。
3. 服務(wù)器將查詢(xún)結(jié)果返回給用戶(hù)。

整個(gè)過(guò)程就是這樣，下面來(lái)看看 Django 如何用實(shí)現(xiàn)這些過(guò)程。

將關(guān)鍵詞提交給服務(wù)器

先來(lái)回顧一下我們的 Django 博客的 Post（文章）模型：

blog/models.py
class Post(models.Model):
    # 標(biāo)題
    title = models.CharField("標(biāo)題", max_length=70)
    # 正文
    body = models.TextField("正文")
    
    # 其他屬性...
    
	def __str__(self):
        return self.title

先看到第 1 步，用戶(hù)在搜索框輸入搜索關(guān)鍵詞，因此我們要在博客上為用戶(hù)提供一個(gè)搜索表單，HTML 表單代碼大概像這樣：

templates/base.html
<form role="search" method="get" id="searchform" action="{% url 'blog:search' %}">
  <input type="search" name="q" placeholder="搜索" required>
  <button type="submit"><span class="ion-ios-search-strong"></span></button>
</form>

特別注意這里 <input type="search" name="q" placeholder="搜索" required> 中的 name 屬性，當(dāng)用戶(hù)在這個(gè) input 中輸入搜索內(nèi)容并提交表單后，鍵入的數(shù)據(jù)會(huì)以鍵值對(duì)的形式提交服務(wù)器，這個(gè)鍵的名字就是通過(guò) name 屬性指定的。這樣服務(wù)器就可以根據(jù) name 的值來(lái)取得用戶(hù)輸入的內(nèi)容。

用戶(hù)輸入了搜索關(guān)鍵詞并點(diǎn)擊了搜索按鈕后，數(shù)據(jù)就被發(fā)送給了 Django 后臺(tái)服務(wù)器。表單的 action 屬性的值為 {% url 'blog:search' %}（雖然我們還沒(méi)有寫(xiě)這個(gè)視圖函數(shù)），表明用戶(hù)提交的結(jié)果將被發(fā)送給 blog 應(yīng)用下 search 視圖函數(shù)對(duì)應(yīng)的 URL。

查找含有搜索關(guān)鍵詞的文章

搜索的功能將由 search 視圖函數(shù)提供，代碼寫(xiě)在 blog/views.py 里：

blog/views.py
from django.contrib import messages
def search(request):
    q = request.GET.get('q')
    if not q:
        error_msg = "請(qǐng)輸入搜索關(guān)鍵詞"
        messages.add_message(request, messages.ERROR, error_msg, extra_tags='danger')
        return redirect('blog:index')
    post_list = Post.objects.filter(Q(title__icontains=q) | Q(body__icontains=q))
    return render(request, 'blog/index.html', {'post_list': post_list})

首先我們使用 request.GET.get('q') 獲取到用戶(hù)提交的搜索關(guān)鍵詞。用戶(hù)通過(guò)表單 get 方法提交的數(shù)據(jù) Django 為我們保存在 request.GET 里，這是一個(gè)類(lèi)似于 Python 字典的對(duì)象，所以我們使用 get 方法從字典里取出鍵 q 對(duì)應(yīng)的值，即用戶(hù)的搜索關(guān)鍵詞。這里字典的鍵之所以叫 q 是因?yàn)槲覀兊谋韱沃兴阉骺?input 的 name 屬性的值是 q，如果修改了 name 屬性的值，那么這個(gè)鍵的名稱(chēng)也要相應(yīng)修改。

接下來(lái)我們做了一個(gè)小小的校驗(yàn)，如果用戶(hù)沒(méi)有輸入搜索關(guān)鍵詞而提交了表單，我們就無(wú)需執(zhí)行查詢(xún)，我們給給用戶(hù)發(fā)一條錯(cuò)誤提醒消息，這里使用了 django messages 應(yīng)用，這在 交流的橋梁：評(píng)論功能中講過(guò)。然后將用戶(hù)重定向到首頁(yè)。這里的 redirect 函數(shù)也在那篇教程中講過(guò)。

如果用戶(hù)輸入了搜索關(guān)鍵詞，我們就通過(guò) filter 方法從數(shù)據(jù)庫(kù)里過(guò)濾出符合條件的所有文章。這里的過(guò)濾條件是 title__icontains=q，即 title 中包含（contains）關(guān)鍵字 q，前綴 i 表示不區(qū)分大小寫(xiě)。這里 icontains 是查詢(xún)表達(dá)式（Field lookups），我們?cè)谥耙彩褂眠^(guò)其他類(lèi)似的查詢(xún)表達(dá)式，其用法是在模型需要篩選的屬性后面跟上兩個(gè)下劃線。Django 內(nèi)置了很多查詢(xún)表達(dá)式，建議過(guò)一遍 Django 官方留個(gè)印象，了解每個(gè)表達(dá)式的作用，以后碰到相關(guān)的需求就可以快速定位到文檔查詢(xún)其用途 Field lookups。

此外我們這里從 from django.db.models 中引入了一個(gè)新的東西：Q 對(duì)象。Q 對(duì)象用于包裝查詢(xún)表達(dá)式，其作用是為了提供復(fù)雜的查詢(xún)邏輯。例如這里 Q(title__icontains=q) | Q(body__icontains=q) 表示標(biāo)題（title）含有關(guān)鍵詞 q 或者正文（body）含有關(guān)鍵詞 q ，或邏輯使用 | 符號(hào)。如果不用 Q 對(duì)象，就只能寫(xiě)成 title__icontains=q, body__icontains=q，這就變成標(biāo)題（title）含有關(guān)鍵詞 q 且正文（body）含有關(guān)鍵詞 q，就達(dá)不到我們想要的目的。

綁定 URL

有了視圖函數(shù)后記得把視圖函數(shù)映射到相應(yīng)了 URL，如下。

blog/urls.py
urlpatterns = [
    # 其他 url 配置
    path('search/', views.search, name='search'),
]

大功告成，在導(dǎo)航欄嘗試輸入一些關(guān)鍵詞，看看效果吧！

當(dāng)然這樣的搜索功能是非常簡(jiǎn)略的，難以滿(mǎn)足一些復(fù)雜的搜索需求。編寫(xiě)一個(gè)搜索引擎是一個(gè)大工程，好在 django-haystack 這款第三方 app 為我們完成了全部工作。使用它我們可以實(shí)現(xiàn)更加復(fù)雜的搜索功能，比如全文檢索、按搜索相關(guān)度排序、關(guān)鍵字高亮等等類(lèi)似于百度搜索的功能，功能十分強(qiáng)大。當(dāng)然其使用也會(huì)復(fù)雜一些，下一篇教程將向大家介紹 django-haystack 結(jié)合 Elasticsearch 搜索引擎的使用方法。

『講解開(kāi)源項(xiàng)目系列』——讓對(duì)開(kāi)源項(xiàng)目感興趣的人不再畏懼、讓開(kāi)源項(xiàng)目的發(fā)起者不再孤單。跟著我們的文章，你會(huì)發(fā)現(xiàn)編程的樂(lè)趣、使用和發(fā)現(xiàn)參與開(kāi)源項(xiàng)目如此簡(jiǎn)單。歡迎留言聯(lián)系我們、加入我們，讓更多人愛(ài)上開(kāi)源、貢獻(xiàn)開(kāi)源

文分享的技術(shù)，是用Web做一個(gè)二分查找算法的小網(wǎng)頁(yè)，包括所有的代碼。

通過(guò)二分查找的原理，做一個(gè)閉環(huán)Web小應(yīng)用，這個(gè)網(wǎng)頁(yè)包括HTML、CSS和JavaScript的配合。通過(guò)制作這個(gè)網(wǎng)頁(yè)，老鐵們可以熟悉網(wǎng)頁(yè)設(shè)計(jì)、練習(xí)算法的落地應(yīng)用，做到學(xué)以致用。

本文代碼分為3個(gè)部分：

核心JavaScript代碼講解（包括調(diào)用函數(shù)JS代碼）；

HTML網(wǎng)頁(yè)設(shè)計(jì)講解；

CSS的美化講解。

第1部分 JavaScript代碼講解

本案例的JavaScript代碼包括核心的算法代碼和調(diào)用代碼。

先介紹核心算法代碼：

function binarySearch(nums, target) //定義了一個(gè)名為 binarySearch 的函數(shù)，
//該函數(shù)接受兩個(gè)參數(shù)，nums 是已排序數(shù)組，target 是要查找的目標(biāo)值。
{
let left = 0;//聲明兩個(gè)變量 left 和 right，它們分別代表搜索范圍的左邊界和右邊界。
//初始時(shí)，左邊界為數(shù)組的第一個(gè)元素索引（0），右邊界為數(shù)組的最后一個(gè)元素索引。
let right = nums.length - 1;
    while (left <= right) //使用循環(huán)來(lái)執(zhí)行二分查找，條件是左邊界小于等于右邊界。
    {
    let middle = left + Math.floor((right - left) / 2);
    //計(jì)算當(dāng)前搜索范圍的中間位置，使用 Math.floor 函數(shù)確保取整。
    if (nums[middle] > target) //如果中間位置的元素值大于目標(biāo)值。
        {
        right = middle - 1;//將右邊界更新為中間位置的前一個(gè)位置，縮小搜索范圍至左半部分。
        } 
    else if (nums[middle] < target) //如果中間位置的元素值小于目標(biāo)值。
        {
        left = middle + 1;//將左邊界更新為中間位置的后一個(gè)位置，縮小搜索范圍至右半部分。
        } 
    else 
        {
        return middle;//直接返回中間位置的索引，表示找到目標(biāo)值。
        }
    }
    return -1;
 }

這段代碼的含義是：先定義兩個(gè)邊界索引，左邊界初始值為0，右邊界初始值為數(shù)組的長(zhǎng)度。循環(huán)條件是左邊界的數(shù)值小于右邊界。

二分查找是很基礎(chǔ)的算法，很容易搜索到，在此不做更多的原理講解。只要記住查找的數(shù)組必須有序排列即可。

由于這個(gè)算法要在Web端調(diào)用，因此還需要進(jìn)行調(diào)用代碼的編寫(xiě)：

function calculateBinarySearch() 
{
    const inputNums = document.getElementById("output").value.split(" ").map(Number);
    // 獲取頁(yè)面上 id 為 "output" 的元素的值，將其以空格分割成數(shù)字?jǐn)?shù)組并映射為數(shù)字類(lèi)型
    const inputTarget = parseInt(document.getElementById("textBox1").value);
    // 獲取頁(yè)面上 id 為 "textBox1" 的元素的值，將其解析為整數(shù)，作為二分查找的目標(biāo)值
    const result = binarySearch(inputNums, inputTarget);
    // 調(diào)用二分查找函數(shù) binarySearch，傳入數(shù)字?jǐn)?shù)組和目標(biāo)值，并將結(jié)果保存在變量 result 中
    if (result !== -1) 
    // 如果結(jié)果不等于 -1，表示找到了目標(biāo)值
    {
        document.getElementById("textBox2").value = `數(shù)字${inputTarget}排在第${result + 1}位`;
        // 在頁(yè)面上 id 為 "textBox2" 的元素中顯示目標(biāo)值在數(shù)組中的位置（索引 + 1）
    } 

    else 
    {
       document.getElementById("textBox2").value = "這個(gè)數(shù)字不存在";
       // 如果結(jié)果等于 -1，表示目標(biāo)值不存在于數(shù)組中
    }
}

在本案例中，顯示25個(gè)數(shù)字的窗口是一個(gè)文本框“output”，一個(gè)輸入查找數(shù)字的文本框“textBox1”和一個(gè)輸出查找結(jié)果的文本框“textBox2”。

調(diào)用代碼是將隨機(jī)生成的25個(gè)數(shù)字提取成數(shù)組，把textBox1里輸入的數(shù)字也進(jìn)行必要的清洗，然后作為二分查找函數(shù)的輸入值，進(jìn)行計(jì)算，結(jié)算結(jié)果顯示在textBox2中。

顯示結(jié)果要進(jìn)行一下必要的美化，做一下人機(jī)交互的設(shè)計(jì)。

如何生成25個(gè)隨機(jī)數(shù)字，我會(huì)在另一篇文章仔細(xì)講解，在此不做贅述。

第2部分 HTML代碼講解

本案例的HTML包括一個(gè)標(biāo)題文件（其中包含一個(gè)LOGO圖片）、1個(gè)展示25個(gè)數(shù)字的文本框output，1個(gè)輸入文本框textBox1和1個(gè)輸出文本框textBox2。還有兩個(gè)按鈕，分別控制生成25個(gè)數(shù)字和清除25個(gè)數(shù)字。

<h1>
    <img src="logo.png" alt="Logo" width="130" height="130">JavaScript編程練習(xí)：二分算法演示
</h1>

<textarea id="output" readonly>
</textarea>
<textarea id="textBox2" readonly> 
</textarea>

<br>
<div class="button-container">
    <button onclick="generateNumbers()">生成數(shù)字</button>
    <button onclick="clearText()">清空數(shù)字</button>
</div> 

<input type="text" id="textBox1">

<div class="color-box-container">
<div class="color-box" id="whiteBox" onclick="changeBackgroundColor('white')"></div>
<div class="color-box" id="blueBox" onclick="changeBackgroundColor('rgba(247, 160, 255, 0.348)')"></div>
<div class="color-box" id="pinkBox" onclick="changeBackgroundColor('rgba(202, 251, 189, 0.966)')"></div>
</div>

<a href="index.html">
    <button id="backToHomeButton">回到主頁(yè)</button>
</a>

第3部分 CSS代碼講解

CSS代碼考慮到了手機(jī)豎屏的應(yīng)用。注意按鈕使用了群組，本案例還有顏色代碼塊，純裝飾用，不是必須的。

言

在說(shuō)這個(gè)之前，想必大家應(yīng)該都比較了解搜索引擎了，它就是通過(guò)用戶(hù)在瀏覽器輸入框中輸入文本，從而顯示一些結(jié)果，你覺(jué)得哪項(xiàng)符合你要搜索的內(nèi)容，你就點(diǎn)擊哪項(xiàng)。

【一、項(xiàng)目準(zhǔn)備】

瀏覽器：360瀏覽器

編輯器：Sublime Text 3

插件：Jquery-3.2.1.Min.Js

【二、項(xiàng)目實(shí)現(xiàn)】

由于是要實(shí)現(xiàn)一個(gè)網(wǎng)頁(yè)搜索引擎，所以我們需要借用網(wǎng)頁(yè)三劍客（Html+Css+Javascript）,然后實(shí)現(xiàn)這一功能。

1.打開(kāi)百度分析網(wǎng)頁(yè)結(jié)構(gòu)

我們可以先看看百度的搜索引擎：

可以看到，這個(gè)搜索框的部分設(shè)置，比如關(guān)閉自動(dòng)完成功能。然后我們?cè)陔S便搜索內(nèi)容來(lái)查看它的變化：

image

可以看到某些我們查詢(xún)的關(guān)鍵字，于是我們便發(fā)現(xiàn)了請(qǐng)求規(guī)律：

https://www.baidu.com/s?+查詢(xún)字符參數(shù)

這就構(gòu)成了我們的一個(gè)完整的get請(qǐng)求，而且這里面有很多關(guān)鍵字參數(shù)可以省略掉，只需要保留重要的一部分就好了。于是，經(jīng)試驗(yàn)，得出如下結(jié)論：

https://www.baidu.com/s?wd=keyword

這個(gè)才是請(qǐng)求的接口地址，只需將keyword參數(shù)替換為任意搜索關(guān)鍵字即可實(shí)現(xiàn)查詢(xún)并跳轉(zhuǎn)到相應(yīng)結(jié)果頁(yè)面。

2.編寫(xiě)Html輸入框，搜索按鈕

看過(guò)之前寫(xiě)的Html系列的文章，你將不再對(duì)此感到困惑。

<html>
<head>
 <title></title>
 <style type="text/css">
    *{           內(nèi)外邊距初始時(shí)為0
       margin:0;    
       padding:0
    }
     input{
        width:300px;
        height:30px
    }
     span{
       position:absolute; 絕對(duì)定位
       background-color:red; 背景顏色
       border:1px solid gray; 邊框設(shè)置
       width:60px;
       height:32px;
       text-align:center 文字位置
    }
    span:hover{ 鼠標(biāo)懸停時(shí)的樣式
        background-color:blue
    }
 </style>
</head>
<body>
<input type="text" name="" placeholder="請(qǐng)輸入要搜索的內(nèi)容"> 文本框
<span>search</span> 搜索按鈕
</body>
</html>

編寫(xiě)完成后進(jìn)入瀏覽器查看，即可看到：

可以看到，已經(jīng)有點(diǎn)瀏覽器搜索框的意思了。

3.導(dǎo)入Jquery插件

<script src='jquery-3.2.1.min.js'></script>

4.編寫(xiě)js腳本

這個(gè)是重中之重，打開(kāi)瀏覽器，network,繼續(xù)分析：

可以看到搜索結(jié)果就在里面。然后打開(kāi)這個(gè)請(qǐng)求的url地址，經(jīng)過(guò)多次實(shí)驗(yàn)，發(fā)現(xiàn)就只有圖中標(biāo)記的參數(shù)有變化：

image.png

所以我們可以得出結(jié)論，我們只需要改變這兩個(gè)值即可。

1).創(chuàng)建刪除腳本

于是我先創(chuàng)建一個(gè)腳本標(biāo)簽，不用它的時(shí)候隨時(shí)可以清除，避免占用內(nèi)存，導(dǎo)致頁(yè)面打開(kāi)遲緩，性能降低：

var script=document.createElement('script');  創(chuàng)建script的標(biāo)簽
script.id='jsonp';   設(shè)置id為jsonp
script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd;  設(shè)置它的地址
document.body.appendChild(script);   添加script元素到body中

然后等它不用了，隨時(shí)將它刪除：

var script=document.createElement('script');  創(chuàng)建script的標(biāo)簽
script.id='jsonp';   設(shè)置id為jsonp
script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd;  設(shè)置它的地址
document.body.appendChild(script);   添加script元素到body中

2).生成選項(xiàng)下拉菜單

我們?cè)跒g覽器可以看到，只要一輸入文本，它就會(huì)彈出對(duì)應(yīng)的選項(xiàng)讓我們選擇，那么這是如何辦到的了？

<script>
function getlist(wd){    /*獲取下拉列表*/
   var script=document.createElement('script');  /*創(chuàng)建script的標(biāo)簽*/
   script.id='jsonp';   /*設(shè)置id為jsonp*/
   script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd; /* 設(shè)置它的地址*/
   document.body.appendChild(script);   /*添加script元素到body中*/
}
function getData(data){  /*獲取數(shù)據(jù)*/
     var script=document.querySelector('#jsonp'); /*選擇id為jsonp的元素*/
     script.parentNode.removeChild(script);  /*從這個(gè)元素的父元素中刪除這個(gè)元素*/
     $('ol').html('');  /* 設(shè)置有序列表的值為空*/
     var da=data.g;   /* 獲取搜索的結(jié)果*/
  if(da){                     /*結(jié)果存在的話就將結(jié)果放到li標(biāo)簽中*/
   da.forEach(function(item,index){  
     $('<li><a target="_blank" href ="https://www.baidu.com/s?wd='+item.q+'">'+item.q+'</a></li>').appendTo('ol');
    })
    }
}


     /* 判斷鍵盤(pán)是否按下*/
   $('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>

可以看到，搜索結(jié)果已經(jīng)出來(lái)了，而且有序列表下的"li"標(biāo)簽也都對(duì)應(yīng)的生成了。

3).給選項(xiàng)標(biāo)記序列

我們可以看到，結(jié)果終于出來(lái)，但是我想給它個(gè)序列號(hào)，這樣就可以知道搜索結(jié)果有多少個(gè)了。要設(shè)置的標(biāo)記方式有很多種，可以以數(shù)字開(kāi)頭，也可以是大小寫(xiě)字母或者羅馬時(shí)間。在這里我選擇數(shù)字，很簡(jiǎn)單。

終于非常完美的實(shí)現(xiàn)了這一功能，是不是很驚艷了，趕快去試下吧。

4).搜索刷新

看到這里相信大家應(yīng)該都知道這個(gè)功能已經(jīng)算是完成了，我們只需要隨便點(diǎn)擊哪個(gè)li標(biāo)簽都可以訪問(wèn)到相應(yīng)的頁(yè)面。于是，我決定添加一個(gè)刷新的功能，屬于重連服務(wù)器的那種刷新：

<span onclick='window.location.reload()'>search</span> 點(diǎn)擊后立即刷新

【三、項(xiàng)目總結(jié)】

總的來(lái)說(shuō)，對(duì)于初學(xué)者小白是個(gè)很不錯(cuò)的練手項(xiàng)目，希望大家能從中有所收獲。

需要源碼的小伙伴，后臺(tái)回復(fù)“搜索引擎”四個(gè)字即可獲取。

****看完本文有收獲？請(qǐng)轉(zhuǎn)發(fā)分享給更多的人****

想學(xué)習(xí)更多Python網(wǎng)絡(luò)爬蟲(chóng)與數(shù)據(jù)挖掘知識(shí)，可前往專(zhuān)業(yè)網(wǎng)站：http://pdcfighting.com/