国际公司和跨国公司优化设计官方电子版
【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, redirectdef 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 %}