者：HelloGitHub-追夢人物

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

概述

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

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

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

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

先來回顧一下我們的 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 步，用戶在搜索框輸入搜索關(guān)鍵詞，因此我們要在博客上為用戶提供一個(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)用戶在這個(gè) input 中輸入搜索內(nèi)容并提交表單后，鍵入的數(shù)據(jù)會(huì)以鍵值對的形式提交服務(wù)器，這個(gè)鍵的名字就是通過 name 屬性指定的。這樣服務(wù)器就可以根據(jù) name 的值來取得用戶輸入的內(nèi)容。

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

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

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

blog/views.py
from django.contrib import messages
def search(request):
    q = request.GET.get('q')
    if not q:
        error_msg = "請輸入搜索關(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') 獲取到用戶提交的搜索關(guān)鍵詞。用戶通過表單 get 方法提交的數(shù)據(jù) Django 為我們保存在 request.GET 里，這是一個(gè)類似于 Python 字典的對象，所以我們使用 get 方法從字典里取出鍵 q 對應(yīng)的值，即用戶的搜索關(guān)鍵詞。這里字典的鍵之所以叫 q 是因?yàn)槲覀兊谋韱沃兴阉骺?input 的 name 屬性的值是 q，如果修改了 name 屬性的值，那么這個(gè)鍵的名稱也要相應(yīng)修改。

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

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

此外我們這里從 from django.db.models 中引入了一個(gè)新的東西：Q 對象。Q 對象用于包裝查詢表達(dá)式，其作用是為了提供復(fù)雜的查詢邏輯。例如這里 Q(title__icontains=q) | Q(body__icontains=q) 表示標(biāo)題（title）含有關(guān)鍵詞 q 或者正文（body）含有關(guān)鍵詞 q ，或邏輯使用 | 符號。如果不用 Q 對象，就只能寫成 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)然這樣的搜索功能是非常簡略的，難以滿足一些復(fù)雜的搜索需求。編寫一個(gè)搜索引擎是一個(gè)大工程，好在 django-haystack 這款第三方 app 為我們完成了全部工作。使用它我們可以實(shí)現(xiàn)更加復(fù)雜的搜索功能，比如全文檢索、按搜索相關(guān)度排序、關(guān)鍵字高亮等等類似于百度搜索的功能，功能十分強(qiáng)大。當(dāng)然其使用也會(huì)復(fù)雜一些，下一篇教程將向大家介紹 django-haystack 結(jié)合 Elasticsearch 搜索引擎的使用方法。

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

今天我們一起來了解下HTML，

首先HTmL包含三層結(jié)構(gòu)，分別是結(jié)構(gòu)層，表現(xiàn)層，行為層。

結(jié)構(gòu)層：html => 網(wǎng)頁上有什么，比如說文字啊、按鈕啊、圖片啊等等。

表現(xiàn)層：css => 顯示成什么樣子，比如說文字的大小啊，位置啊，顏色啊等等。

行為層：JavaScript => 具體怎么操作，比如說點(diǎn)擊按鈕讓圖片放大縮小等等。

===============================

在了解了html的三層結(jié)構(gòu)之后，我們來學(xué)習(xí)如何寫html。html不是編程語言，它是一套標(biāo)簽。最簡單的html文本是下圖1這個(gè)樣子。我們可以在電腦桌面上新建一個(gè)記事本文件，然后把后綴名改一下（.txt=>.html），把這段標(biāo)簽代碼粘貼到html文件里，這樣一個(gè)空白的網(wǎng)頁就做成了。如果需要在網(wǎng)頁上添加內(nèi)容，我們只需要在第10行的位置添加各種各樣的標(biāo)簽即可。比如我在圖二添加了一個(gè)按鈕標(biāo)簽和一段文字標(biāo)簽，雙擊html文件，頁面上就從左到右，從上到下顯示對應(yīng)的內(nèi)容。是不是很簡單。我們?nèi)粘g覽的網(wǎng)頁都是這樣一個(gè)標(biāo)簽一個(gè)標(biāo)簽畫上去的。

我給大家總結(jié)了一張圖，基本上覆蓋了工作中常用的知識點(diǎn)。同時(shí)分享幾個(gè)小技巧。

1.最簡單的網(wǎng)頁寫成什么樣子，也就是html模板不需要記憶，下圖也說了，去百度下載一個(gè)VSCode軟件（類似于記事本，是現(xiàn)在主流的前端代碼編輯器），用它打開我們的html文件，輸入英文嘆號回車就自動(dòng)生成了，學(xué)編程不要死記硬背。

2.控件的標(biāo)簽不需要記憶，直接百度html XXX標(biāo)簽，例如：百度搜“html按鈕標(biāo)簽”，他就會(huì)告訴我們是<button>，用的時(shí)間長了自然就記住了。是不是省力。

3.標(biāo)簽的屬性很重要，可以不去記他的寫法，因?yàn)閷懣梢园俣龋匾氖悄阈枰涀?biāo)簽有什么屬性，下圖的屬性記住足矣。為什么要記呢，因?yàn)楣ぷ髦校械臅r(shí)候會(huì)遇到這樣一種情況，明明設(shè)置一個(gè)屬性可以完成的功能，我們不知道，花費(fèi)了大力氣用css和js去實(shí)現(xiàn)，結(jié)果還存在著特定場合的bug，讓人很無奈。

4.對于html還有兩個(gè)標(biāo)簽<canvas>和<svg>，他們是用來繪圖的，做特殊效果的。我們可以先跳過，等框架啥的都學(xué)完了，有興趣，學(xué)習(xí)一下。

5.給大家推薦一個(gè)小白學(xué)習(xí)html的網(wǎng)站，w3cschool，圖里不明白的可以去上邊學(xué)學(xué)練練。

6.如果覺得一個(gè)人學(xué)習(xí)前端有難度，我建了一個(gè)小白前端學(xué)習(xí)交流群，可以私聊我，大家在群里多多交流，我會(huì)經(jīng)常給大家答疑，組織大家練習(xí)，一起做小項(xiàng)目。有方向，少走彎路。