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

诗鱼poem、

已于 2022-06-16 22:05:22 修改

阅读量1k

点赞数 5

分类专栏： Django 文章标签：前端 vue.js javascript

于 2022-06-16 21:14:26 首次发布

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

版权

Django 专栏收录该内容

5 篇文章 7 订阅

订阅专栏

本文介绍了如何使用Django进行数据模型渲染，包括views中的数据获取与渲染，以及templates中的HTML结构和链接设置。通过实例展示了如何创建about和datil页面，实现数据的动态呈现和详情页跳转。

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

数据模型的渲染

本次我们将通过views进行前端的渲染

我们在about.App目录中的views，将里面的数据更改为：

from django.shortcuts import render
from django.shortcuts import HttpResponse

from .models import *

def about(request):
    
    #list=Province.objects.all()
    cy=City.objects.all()
    ci={'cylist':cy,}
    return render(request, 'about.html',ci)

并且在about.App目录中新建templates文件夹，在文件夹里新建文件about.html:

并且在该thml里面添加以下代码进行前端的渲染：

{% 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>
    <table class="table-bordered table-hover  "  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>详情</th>
           
            
            
        </tr>

        {% endfor %}

    </table>
</body>

</html>

在后台的简单输入数据（因为是例子，所以我不加太多数据）：

然后回到页面aboutApp/about,可以看到后台数据库的数据已经在页面上了：

建立详情页面

我们在about.App目录中的views.py，添加以下数据：

from django.shortcuts import get_object_or_404


def Datil(request, id):
    one = get_object_or_404(City, id=id)
    
    return render(request, 'datil.html', {'one':one}
    )

在about.App目录中的urls.py 的urlpatterns中加入：

path('datil/<int:id>/', views.datil, name='datil'),#详情

在about.App目录中templates文件夹建立一个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>

在about.html的<th>详情</th>标签中添加以下代码，进行链接

<th><a href="{% url 'aboutApp:datil' i.id  %}" >详情</a></th>

然后呢，对于详情页面我们已经做好了，试试效果：

点击详情

无论在后台输入多少数据，该城市对应的ID会链接相应的页面。

在主页进行链接

回到主页面，在homeApp的home.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>
<div class="container top">
    <div class="row">
        <div class="col-md-6">
           学号姓名
        </div> 
    </div>
</div> 
<h1>
    <a href="{% url 'aboutApp:about' %}" >听我说谢谢你！</a>
</h1>

<body>

</body>

</html>

然后保存，可以看到显示界面：