django显示数据库数据，并制作模板html

最新推荐文章于 2024-05-21 10:12:12 发布

柒拾霜染

最新推荐文章于 2024-05-21 10:12:12 发布

阅读量1.1k

点赞数

文章标签： django python 后端

本文链接： https://blog.csdn.net/m0_62836433/article/details/131274871

版权

向数据库中增加一部分数据后，将其显示再浏览器上

导入数据库

建立path

path('info/',views.info),

建立view

def info(request):

return HttpResponse("登录成功")

先运行，浏览器能否正常打开并显示HttpResponse中的内容

运行成功进行下一步，建立html，同样先测试一下能否打开

return render(request,'info_list.html')

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>HTML页面</h1>
</body>
</html>

刷新浏览器，看是否显示h1标签中的内容

获取数据库信息【注意导入models,数据库的增删改查，传递参数前面有】

def info(request):
    from app01 import models
    list_info=models.User.objects.all()#select * from app01_User
    return render(request,'info_list.html',{'list':list_info})#传递参数

参数传递过去后替换h1标签

{% for i in list %}
    姓名：{{ i.name }} 年龄：{{ i.age }} 密码：{{ i.password }}<br>
{% endfor %}

刷新浏览器可以在浏览器上看到利用for循环得到的信息

制作模板HTML

当多个页面使用同一个导航栏或其他内容时，每个HTML进行复制就是一个重复工作的过程，修改的时候还容易找不全，这种情况就适合写一个模板HTML

便于修改母版的内容，样式等

创建模板muban.html【记得添加{% load static%}】

{% block 自己定义的名称 %}{% endblock %}【这就是往模板中添加新的区域，html，css，js等都可以】

比如想要早各个页面应用此导航栏，

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
        .box1{
            background-color: rgba(111,185,255,1.00);
            line-height: 40px;
            font-size: 17px;
            font-weight: 700;

        }
        .box1 a{
            display: inline-block;
            text-align: center;
            color: black;
            width: 33%;
            text-decoration: none;
        }
        .box1 a:hover{
            color: #FFFFFF;
        }
        footer{
            background-color: rgba(111,185,255,1.00);
        }
        {% block css %}{% endblock %}
    </style>
</head>
<body>
    <div class="box1">
        <a href="#">主页</a>
        <a href="#">个人简介</a>
        <a href="#">影视推荐</a>
    </div>
    <table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
        {% block tr %}{% endblock %}
    </table>
    <footer>
        {% block foot %}{% endblock %}
    </footer>
</body>
</html>

按直接打开的样子【前者】，通过url打开就是正常的【后者,将muban.html代码全部复制到了index.html中】，可以看到在footer中没有内容，所以默认height为0

现在将index.html中的代码全部删除，利用继承获取muban.html的所有内容，在浏览器中刷新，得到一样的结果

在index中写入这些，根据在模板中定义的位置而写什么内容，

{% block css %}{% endblock %}定义在了style标签中，所以要写css，又因为写在所有选择器的后面，所以会覆盖前面的设置过的属性

{% block tr %}{% endblock %}定义在了表格里，用来写每一行，多适用于循环生成表格

{% block foot %}{% endblock %}定义了一个空的div，代码是拼接好顺次执行

{% extends 'muban.html' %}
{% block css %}
    .box1{
    background-color: pink;
    }
    td{
    border: 1px solid green;
    }
    footer{
    background-color: pink;
    }
{% endblock %}
{% block tr %}
    <tr>
    <td>涂山苏苏</td>
    <td>女</td>
    <td>狐狸</td>
    </tr>
    <tr>
    <td>白月初</td>
    <td>男</td>
    <td>人类</td>
    </tr>
{% endblock %}
{% block foot %}
    <h1>为了显示footer</h1>
{% endblock %}

css可以直接放自己写好的css文件，js也相同

柒拾霜染

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
django显示数据库数据，并制作模板html

获取数据库信息【注意导入models,数据库的增删改查，传递参数前面有】先运行，浏览器能否正常打开并显示HttpResponse中的内容。运行成功进行下一步，建立html，同样先测试一下能否打开。刷新浏览器可以在浏览器上看到利用for循环得到的信息。向数据库中增加一部分数据后，将其显示再浏览器上。刷新浏览器，看是否显示h1标签中的内容。参数传递过去后替换h1标签。
复制链接

扫一扫