Django城市信息查询功能（3）
生活随笔
收集整理的這篇文章主要介紹了
Django城市信息查询功能（3）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
城市搜索功能
該功能使用戶能輸入一個城市名，程序能給出搜索結果。如果有匹配項，用戶可點擊其鏈接，以跳轉到城市的詳情頁面：
搜索之后就出現了搜索后的畫面：
因為都是通一個模板，而且第一張圖的內容較少，看起來像一樣的，在這里就不實現更改了，有需要更改的界面的讀者可以自行更改。
我們首先在GongCheng\aboutApp\views.py輸入以下代碼，創建一個search函數：
def search(request):keyword = request.GET.get('keyword')newList =City.objects.filter(name__icontains=keyword)id="關于"+"\""+keyword+"\""+"詳情搜索"return render(request, 'search.html',{ 'newList': newList,'id':id})該函數可以，用newList進行搜索，實現對數據的抓取（'keyword'）
?完成上面這邊，我們進行對路由的配置，在GongCheng\aboutApp\urls.py中添加?
path('search/', views.search, name='search'),
下面是整體代碼：
from django.urls import path from . import viewsapp_name = 'aboutApp'urlpatterns = [path('about/',views.about,name='about'),path('datil/<int:id>/', views.datil, name='datil'),#詳情path('search/', views.search, name='search'),# ]HTML的創建
在GongCheng\aboutApp\emplates里新建一個search.html，輸入以下代碼，在此不一一講解：
?里面包含了樣式，我們將復制里面的樣式，放進其他html中，美化界面
{% load static %} <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>產品頁面</title><link href="{% static 'css/bootstrap.css' %}" rel="stylesheet"><link href="{% static 'css/style.css' %}" rel="stylesheet"><script src="{% static 'js/jquery.min.js' %}"></script><script src="{% static 'js/bootstrap.min.js' %}"></script> </head><body ><div class="container top"><div class="row"><div class="col-md-6">學號姓名</div></div></div><nav class="navbar navbar-default"><div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">城市查詢系統</a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">主頁 <span class="sr-only">(current)</span></a></li><li><a href="#">表格頁面</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">個人信息 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">學號</a></li><li><a href="#">姓名</a></li><li><a href="#">城市</a></li></ul></li></ul><div class="row row-3"><div class="model-details-title"> <div class="col-md-7 hidden-xs model-details-title-search"><form method="get" action="{% url 'aboutApp:search' %}">{% csrf_token %}<div class="input-group"><input type="text" name="keyword" class="form-control" placeholder="請輸入關鍵詞" required /><span class="input-group-btn"><input type="submit" class="btn btn-default" value="查詢" /></span></div></form></div></div></div></nav><table class="table-bordered table-hover table " border="1"><tr><th>省份</th><th>城市</th><th>郵政編碼</th><th>詳情</th></tr>{% for i in newList %}<tr><th>{{i.province}}</th><th>{{i.name}}</th><th>{{i.mail}}</th><th><a href="{% url 'aboutApp:datil' i.id %}">詳情</a></th></tr>{% endfor %}</table></body></html>界面的美化
主頁界面，有需要的讀者可以直接復制，里面的聽我說謝謝你的鏈接也是可以進入到首頁的，我還添加了導航欄：
{% load static %} <!DOCTYPE html> <html lang="zh-cn"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>首頁</title><link href="{% static 'css/bootstrap.css' %}" rel="stylesheet"><link href="{% static 'css/style.css' %}" rel="stylesheet"><script src="{% static 'js/jquery.min.js' %}"></script><script src="{% static 'js/bootstrap.min.js' %}"></script> </head><body><div class="container top"><div class="row"><div class="col-md-6">學號姓名</div></div></div><nav class="navbar navbar-default"><div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">城市查詢系統</a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li ><a href="{% url "home" %}">主頁</a></li><li><a href="{% url 'aboutApp:about' %}">表格頁面</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">個人信息 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">學號</a></li><li><a href="#">姓名</a></li><li><a href="#">城市</a></li></ul></li></ul><div class="model-details-title"><div class="col-md-7 hidden-xs model-details-title-search"><form method="get" action="{% url 'aboutApp:search' %}">{% csrf_token %}<div class="input-group"><input type="text" name="keyword" class="form-control" placeholder="請輸入關鍵詞" required /><span class="input-group-btn"><input type="submit" class="btn btn-default" value="查詢" /></span></div></form></div></div></div></nav><h1><a href="{% url 'aboutApp:about' %}" >聽我說謝謝你！</a></h1></body> </html>?可以在Bootstrap上找自己需要的樣式，美化界面，上鏈接：Bootstrap v3 中文文檔 · Bootstrap 是最受歡迎的 HTML、CSS 和 JavaScript 框架，用于開發響應式布局、移動設備優先的 WEB 項目。 | Bootstrap 中文網
也可以刪除聽我說謝謝你，添加自己喜歡的圖片0.0
下面這個是about.html的代碼，有需要的可以自取，這些代碼直接覆蓋到原代碼即可
{% load static %} <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>表格頁面</title><link href="{% static 'css/bootstrap.css' %}" rel="stylesheet"><link href="{% static 'css/style.css' %}" rel="stylesheet"><script src="{% static 'js/jquery.min.js' %}"></script><script src="{% static 'js/bootstrap.min.js' %}"></script></head><body><div class="container top"><div class="row"><div class="col-md-6">學號姓名</div></div></div><nav class="navbar navbar-default"><div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">城市查詢系統</a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li ><a href="{% url "home" %}">主頁</a></li><li><a href="{% url 'aboutApp:about' %}">表格頁面</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">個人信息 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">學號</a></li><li><a href="#">姓名</a></li><li><a href="#">城市</a></li></ul></li></ul><div class="model-details-title"><div class="col-md-7 hidden-xs model-details-title-search"><form method="get" action="{% url 'aboutApp:search' %}">{% csrf_token %}<div class="input-group"><input type="text" name="keyword" class="form-control" placeholder="請輸入關鍵詞" required /><span class="input-group-btn"><input type="submit" class="btn btn-default" value="查詢" /></span></div></form></div></div></div></nav><table class="table-bordered table-hover table " border="1"><tr><th>省份</th><th>城市</th><th>郵政編碼</th><th>詳情</th></tr>{% for i in cylist %}<tr><th>{{i.province}}</th><th>{{i.name}}</th><th>{{i.mail}}</th><th><a href="{% url 'aboutApp:datil' i.id %}">詳情</a></th></tr>{% endfor %}</table> </body></html>這個是datil.html的代碼，有需要的可以自取，這些代碼直接覆蓋到原代碼即可
{% load static %} <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>產品頁面</title><link href="{% static 'css/bootstrap.css' %}" rel="stylesheet"><link href="{% static 'css/style.css' %}" rel="stylesheet"><script src="{% static 'js/jquery.min.js' %}"></script><script src="{% static 'js/bootstrap.min.js' %}"></script><!--url 'newsApp:newDetail' --></head><body ><div class="container top"><div class="row"><div class="col-md-6">學號 姓名</div></div></div> <h1>{{one.name}}</h1> <p>{{one.concise}}</p> </body> </html>下面是search.html的代碼，有需要的可以自取，這些代碼直接覆蓋到原代碼即可
{% load static %} <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>產品頁面</title><link href="{% static 'css/bootstrap.css' %}" rel="stylesheet"><link href="{% static 'css/style.css' %}" rel="stylesheet"><script src="{% static 'js/jquery.min.js' %}"></script><script src="{% static 'js/bootstrap.min.js' %}"></script> </head><body ><div class="container top"><div class="row"><div class="col-md-6">學號姓名</div></div></div><nav class="navbar navbar-default"><div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">城市查詢系統</a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li ><a href="{% url "home" %}">主頁</a></li><li><a href="{% url 'aboutApp:about' %}">表格頁面</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">個人信息 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">學號</a></li><li><a href="#">姓名</a></li><li><a href="#">城市</a></li></ul></li></ul><div class="model-details-title"><div class="col-md-7 hidden-xs model-details-title-search"><form method="get" action="{% url 'aboutApp:search' %}">{% csrf_token %}<div class="input-group"><input type="text" name="keyword" class="form-control" placeholder="請輸入關鍵詞" required /><span class="input-group-btn"><input type="submit" class="btn btn-default" value="查詢" /></span></div></form></div></div></div></nav><table class="table-bordered table-hover table " border="1"><tr><th>省份</th><th>城市</th><th>郵政編碼</th><th>詳情</th></tr>{% for i in newList %}<tr><th>{{i.province}}</th><th>{{i.name}}</th><th>{{i.mail}}</th><th><a href="{% url 'aboutApp:datil' i.id %}">詳情</a></th></tr>{% endfor %}</table> </body></html>?在此，這個項目搞一段落，下一個項目再見。
?封面圖片自取：
?
?
?再見！
總結
以上是生活随笔為你收集整理的Django城市信息查询功能（3）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机网络工程毕业论文题目,计算机网络技
- 下一篇： 计算机桌面工具栏,好用的4D桌面工具栏必