【Django】教程-2-前端-目录结构介绍
【Django】教程-1-安装+创建项目+目录结构介绍
3. 前端文件配置
3.1 目录介绍
在app下创建static文件夹, 是根据setting中的配置来的 STATIC_URL = ‘static/’
templates目录，编写HTML模板（含有模板语法，继承，{% static ‘xx’ %}）
一般会创建三个目录：css、img、js、plugins
|-- 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 【**重要**】函数，处理逻辑编写
{% 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 字典-对应关系
{% 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 %}
{% 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表单里面
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":"用户名或密码错误"})
<!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
{% 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>
继承模板：
{% extends 'layout.html' %}
{% block content %}
<h1>首页</h1>
{% endblock %}