【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 %}
)
![[leetcode]2492. 兩個城市間路徑的最小分數(并查集 排序后建邊)](http://pic.xiahunao.cn/[leetcode]2492. 兩個城市間路徑的最小分數(并查集 排序后建邊))
