模板基本使用

星哥玩云

发布于 2022-09-14 17:29:34

5140

发布于 2022-09-14 17:29:34

文章被收录于专栏：开源部署

一、概述

模板是HTML页面，可以根据传递的数据进行填充

二、模板存放目录

在应用目录下创建名为templates目录来存放模板
在工程目录下创建名为templates目录来存放模板

三、将templates标记为模板文件夹

四、配置模板目录

目的

让工程知道哪个目录是存放模板的

配置

settings.py文件中的TEMPLATES字段

TEMPLATES = [ 
    {   
        <span class="hljs-string">'BACKEND'</span>: <span class="hljs-string">'django.template.backends.django.DjangoTemplates'</span>,
        <span class="hljs-string">'DIRS'</span>: [os.path.join(BASE_DIR, <span class="hljs-string">"templates"</span>)],
        <span class="hljs-string">'APP_DIRS'</span>: <span class="hljs-keyword">True</span>,
        <span class="hljs-string">'OPTIONS'</span>: {
            <span class="hljs-string">'context_processors'</span>: [
                <span class="hljs-string">'django.template.context_processors.debug'</span>,
                <span class="hljs-string">'django.template.context_processors.request'</span>,
                <span class="hljs-string">'django.contrib.auth.context_processors.auth'</span>,
                <span class="hljs-string">'django.contrib.messages.context_processors.messages'</span>,
            ],  
        },  
    },  
]

五、定义模板 index.html

目的

作为主页使用

模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
</head>
<body>
    <h1>Lucky is a ver good man</h1>
</body>
</html>

视图

<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">index</span><span class="hljs-params">(request)</span>:</span>
    <span class="hljs-comment"># 返回主页</span>
    <span class="hljs-comment"># 参数1：request</span>
    <span class="hljs-comment"># 参数2：模板路径</span>
    <span class="hljs-keyword">return</span> render(request, <span class="hljs-string">"index.html"</span>)

路由

path(<span class="hljs-string">r''</span>, views.index)

测试网址 http://127.0.0.1:8000

六、展示所有用户

视图

<span class="hljs-keyword">from</span> App.models <span class="hljs-keyword">import</span> User
<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">user</span><span class="hljs-params">(request)</span>:</span>
    <span class="hljs-comment"># 返回所有班级信息</span>
    <span class="hljs-comment"># 告诉模型获取所有班级信息</span>
    userData = User.objects.all()
    <span class="hljs-comment"># 将数据传递给模板，模板进行渲染，并返回页面</span>

    data = {
        <span class="hljs-string">"userData"</span>: userData
    }
    <span class="hljs-comment">#参数3：字典类型，传递给模板的数据</span>
    <span class="hljs-keyword">return</span> render(request, <span class="hljs-string">"user.html"</span>, data)  <span class="hljs-comment">#参数1 request 模板名称  参数2 模板名称 参数3 要传递的数据</span>

路由

path(<span class="hljs-string">r'user/'</span>, views.user)

模板 user.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <style>
        table{
            border-collapse: collapse; /*合并单元格*/
            margin: auto; /*居中*/
        }
        tr>td{
            width: 150px; /*宽度*/
            border:1px solid chartreuse; /*边框*/
            text-align: center; /*文字水平居中*/
        }
    </style>
</head>
<body>
    <table>
        <caption><h2>用户信息展示表</h2></caption>
        <tr>
            <td>ID</td>
            <td>用户名</td>
            <td>密码</td>
            <td>性别</td>
            <td>年龄</td>
            <td>简介</td>
        </tr>
        {% for user in userData %}
        <tr>
            <td>{{ user.id }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.password }}</td>
            <td>{{ user.sex }}</td>
            <td>{{ user.age }}</td>
            <td>{{ user.info }}</td>
        </tr>
        {% endfor %}
    </table>
</body>
</html>