【Django】教程-2-前端-目录结构介绍

3. 前端文件配置

3.1 目录介绍

在app下创建static文件夹, 是根据setting中的配置来的 STATIC_URL = 'static/'

templates目录，编写HTML模板（含有模板语法，继承，{% static 'xx' %}）

一般会创建三个目录：css、img、js、plugins

ini 复制代码

|-- appTang
|	|-- migrations		【固定，不用动，数据库变更记录】
|		|-- __init__.py
|	|-- static			【静态资源配置】
|		|-- css
|		|-- img			【图片】
|		|-- js			【js插件，jQuery】
|		|-- plugins		【插件，bootstrap3.4.1等】
|	|-- templates		【前端页面文件夹】
|		|-- xxx.html
|	|-- __init__.py
|	|-- admin.py		【固定，django默认提供的admin后台管理】
|	|-- apps.py 		【固定，不用动，app启动类】
|	|-- models.py		【**重要**】，对数据库操作
|	|-- tests.py		【固定，不用动】单元测试
|	|-- view.py			【**重要**】函数，处理逻辑编写

html 复制代码

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css'%}"/>

</head>
<body>

<h1>用户列表</h1>

{{ n1 }}
{#<input type="text" class="btn btn-primary" value="新建"/>#}
<script src="{ % static 'js/jquery-3.7.1.js %'}"></script>
<script src="{ % static 'plugins/bootstrap-3.4.1/js/bootstrap.js %'}"></script>


</body>
</html>

3.2 字典-对应关系

python 复制代码

 	{% for k in n3.keys %}
        <tr>
            <td>{{ k.name }}</td>
            <td>{{ k.salary }}</td>
            <td>{{ k.role }}</td>
        </tr>
	{% endfor %}
    
    {% for v in n3.values %}
        <tr>
            <td>{{ v }}</td>
        </tr>
	{% endfor %}

html 复制代码

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css'%}"/>

</head>
<body>
    <table border="1">
        <h1>用户列表</h1>
        <input type="text" class="btn btn-primary" value="新建"/>

        {#<img src="{% static 'img/1.png' %}" alt=""/>#}
        {{ n1 }}
        <thead>
            <th>姓名</th>
            <th>电话</th>
            <th>地址</th>
        </thead>
        <tbody>

            {% for foo in row_obj %}
                <tr>
                    <td>{{ foo.customer_name }}</td>
                    <td>{{ foo.customer_tel }}</td>
                    <td>{{ foo.customer_address }}</td>
                </tr>
            {% endfor %}



        </tbody>
    </table>

    </tbody>

<script src="{ % static 'js/jquery-3.7.1.js %'}"></script>
<script src="{ % static 'plugins/bootstrap-3.4.1/js/bootstrap.js %'}"></script>

</body>
</html>

3.3 条件

3.4 流程图

render 读取html内容+渲染（替换）->字符串，返回给用户

redirect("www.baidu.com") 重定向

3.5 安全机制

表单提交：需要{% csrf_token %} 安全机制，要不然会报403，一定要添加到form表单里面

python 复制代码

from django.shortcuts import render, HttpResponse, redirect

def login(request):
    if request.method == 'GET':
        return render(request, "login.html")
    print(request.POST)
    username = request.POST.get("user")
    pwd = request.POST.get("pwd")
    if username == 'root' and pwd == '123'
        # return HttpRequest("登录成功")
        return redirect("www.baidu.com")
    # return HttpRequest("登录失败")
    return render(request, "login.html",{"error_msg":"用户名或密码错误"})

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
   <h1>用户登录</h1>
   <form method="post" action="/login/">
       
       {% csrf_token %}
       
       <input type="text" name="user" placeholder="用户名">
       <input type="password" name="pwd" placeholder="密码">
       <input type="submit" value="提交">
       <span style="color:red;">{{error_msg}}</span>span>
   </form>

</body>
</html>

7. 模板继承

7.1 定义模板

layout.html

html 复制代码

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css'%}"/>
    {% block css %}{% endblock %}
</head>
<body>

<div>
    {% block content %}{% endblock %}
</div>

    
<script src="{ % static 'js/jquery-3.7.1.js %'}"></script>
<script src="{ % static 'plugins/bootstrap-3.4.1/js/bootstrap.js %'}"></script>
    
{% block js %}{% endblock %}
</body>
</html>

继承模板：

html 复制代码

{% extends 'layout.html' %}

{% block content %}
    <h1>首页</h1>
    
{% endblock %}