Django城市信息查询功能（3）

诗鱼poem、

已于 2022-06-17 22:34:09 修改

阅读量1.6k

点赞数 6

分类专栏： Django 文章标签： django python 后端

于 2022-06-17 22:30:36 首次发布

本文链接：https://blog.csdn.net/weixin_51560236/article/details/125340649

版权

Django 专栏收录该内容

5 篇文章 7 订阅

订阅专栏

本文介绍了如何使用Django框架实现城市搜索功能，包括在views.py中创建search函数，配置urls.py中的路由，以及创建对应的HTML模板。在search.html中，用户可以通过输入关键词查询城市，查询结果以表格形式展示，点击可跳转到城市详情页面。同时，文章提供了界面美化的方法，使用Bootstrap框架改进了导航栏和表格样式。

摘要由CSDN通过智能技术生成

城市搜索功能

该功能使用户能输入一个城市名，程序能给出搜索结果。如果有匹配项，用户可点击其链接，以跳转到城市的详情页面：

搜索之后就出现了搜索后的画面：

因为都是通一个模板，而且第一张图的内容较少，看起来像一样的，在这里就不实现更改了，有需要更改的界面的读者可以自行更改。

我们首先在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 views


app_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>

在此，这个项目搞一段落，下一个项目再见。