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

已于 2022-06-17 22:34:09 修改
阅读量1.5k 收藏 16
点赞数 6
分类专栏： Django 文章标签： django python 后端
于 2022-06-17 22:30:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51560236/article/details/125340649
版权

城市搜索功能

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

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

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

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

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

 封面图片自取：

 

 

 再见！

诗鱼poem、
关注
  • 6
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
django框架中，添加用户操作记录和查询功能
07-06 7893
1. Django框架中Request/Response处理流程（铺垫）     django的核心在于中间件middleware，django所有的请求、返回都由中间件来完成。     中间件，就是处理HTTP的request和response的，类似插件，比如有Request中间件、view中间件、response中间件、exception中间件等，     Midd
Django城市信息查询功能
06-17
基于 Pythgo的 Django 框架，编程实现一个 WEB 程序，为用户提供 城市信息查询功能。用户可输入一个城市名，输出其所在省份名称和邮编 等信息。例如，输入“桂林市”，输出“广西壮族自治区”和“541000”等 城市相关信息。
Django Q查询
流星雨的专栏
07-30 2010
一、Complex lookups with Q objects（Q对象的复杂查询） 仅仅靠单一的关键字参数查询已经很难满足查询要求。此时Django为我们提供了Q查询： class Q 1、Q对象(django.db.models.Q)可以对关键字参数进行封装，从而更好地应用多个查询，下面是最简单的例子： from django.db.models import Q from log
Django 查询入门
m0_63969219的博客
05-12 157
Django 查询入门
【转】Django表单处理 ——处理web开发的下一个难题：建立用户输入的视图
weixin_30325487的博客
05-04 230
在web应用上，有两个关于搜索获得巨大成功的故事：Google和Yahoo，通过搜索，他们建立了几十亿美元的业务,几乎每个网站都有很大的比例访问量来自这两个搜索引擎。甚至，一个网站是否成功取决于其站内搜索的质量,因此，在我们这个网站添加搜索功能看起来好一些。 开始在URLconf (mysite.urls )添加搜索视图。添加类似 (r'^search/$','mysite...
基于python+Django旅游城市关键词分析设计与实现.docx
08-03
3. 信息搜集功能：使用自然语言处理、预料库和知识图谱等技术来进行相关的知识归类、标记以及存储，以方便人们在有需要时进行很好的信息搜集功能的实现。 本设计的优点是能够快速实现有效的整体开发，并且能够实现...
基于Python+Django城市PM2.5空气质量数据可视化分析系统源码
最新发布
06-20
基于Python+Django城市PM2.5空气质量数据可视化分析系统源码、含有代码注释，新手也可看懂，个人手打98分项目，毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。该项目系统功能完善、...
城市地图带后端小程序，后台django
11-02
它们可以处理GET和POST请求，根据请求内容调用适当的功能，如查询地图信息、计算路线等，并将结果返回给前端。 3. **模板（Template）**：模板用于生成HTML响应，可以包含动态内容。在城市地图小程序中，可能有多个...
在django项目中导出数据到excel文件并实现下载的功能
09-17
在Django项目中导出数据到Excel文件并实现下载功能是一项常见的需求，这通常涉及到后端数据处理和前端用户交互。以下将详细讲解这个过程的关键步骤和涉及的技术点。 首先，我们需要安装必要的依赖模块，这里是`xlwt...
框架-Django-查询
dmd47949的博客
11-23 119
Django ORM基本增删改查 1、表数据增删改查 urls.py url(r'^orm/', views.orm), 1 app01/views.py from app01 import models # 导入models模块 def orm(request): # 创建数据 # 第一种方式 # models.UserInfo.o...
Django（九）模型：dj查询数据库的函数（方法）
*
01-07 516
一、查询函数 通过模型类.objects属性可以调用如下函数，实现对模型类对应的数据表的查询。 函数表 函数名 功能 返回值 说明 get 返回表中满足条件的一条且只能有一条数据。 返回值是一个模型类对象。 参数中写查询条件。1)如果查到多条数据，则抛异常MultipleObjectsReturned。2)查询不到数据，则抛异常：DoesNotExist。 all 返回模型...
python关联分析案例_Django框架多表查询实例分析
weixin_39647458的博客
11-30 216
本文实例讲述了Django框架多表查询。分享给大家供大家参考，具体如下：多表查询是模型层的重要功能之一, Django提供了一套基于关联字段独特的解决方案.ForeignKey来自Django官方文档的模型示例:from django.db import modelsclass Blog(models.Model):name = models.CharField(max_length=100)ta...
springboot简写笔记二
qq_43709204的博客
11-29 210
springboot简写笔记二 SpringBoot 整合 Mybatis 参考文档。。。 SpringBoot 数据访问操作 增删改查的操作与springmvc中大致一样，在usermapper.xml中写sql语句的时候我们可以直接用*查询而不用别名，因为yml配置中加了下划线转驼峰配置。 这里强调分页查询操作流程： UserQuery package com.xxxx.springboot.query; public class UserQuery { //当前页,就是传过来的json数据中
django实现查询功能
weixin_30458043的博客
08-17 1200
1.index首页显示 <div class="form-group pull-right" style="float: left"> <form action="" method="get"> <i...
django商品按产地查找
我是张先生
11-30 174
if search_type == 'goodaddr': goodnames =[] good_infos = Good_info.objects.filter(goodaddr__icontains=search) print(good_infos) for good_info in good_infos: ...
Django - 模型层 - 查询操作 - 1
qq_33962481的博客
01-01 379
目录为查询创建一个博客应用模型二级目录三级目录 为查询创建一个博客应用模型 from django.db import models class Blog(models.Model): name = models.CharField(max_length=100) tagline = models.TextField() def __str__(self): return self.name class Author(models.Model): nam
Django 学习实例 第三节：实现城市级联查询
tworain
03-06 650
1、实现效果： 2、数据导入到mysql数据库中： 城市区域数据_存放一张表district-Linux文档类资源-CSDN文库 导入mysql数据库：pydb SQL>select * from district where upid=1; id |name|level|upid| ---+----+-----+----+ 35|北京市 | 2| 1| SQL>select * from district where upid=35; id |name|level|up
Django项目实战——9—(查询省市区数据、新增地址前后端逻辑、新增地址接口设计和定义、展示地址前后端逻辑)
weixin_42118531的博客
08-25 2116
1、查询省市区数据 请求方式 请求参数：查询参数 如果前端没有传入area_id，表示用户需要省份数据 如果前端传入了area_id，表示用户需要市或区数据 响应结果：JSON 省份数据 市或区数据 查询省市区数据后端逻辑实现 如果前端没有传入area_id，表示用户需要省份数据 如果前端传入了area_id，表示用户需要市或区数据 Vue渲染省市区数据 user_center_site.js中 ...
基于python+Django旅游城市关键词分析源码数据库论文.docx
07-05
本次的设计就是通过以旅游城市为研究目标，通过以旅游城市关键词的相关信息搜索为主要的开发功能，搭建一款用户只要输入城市名称就能够查看到城市的旅游景点、美食情况等，并且通过以 Python 的技术来实现各个不同的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值