知識(shí)點(diǎn)
1. 加載靜態(tài)配置文件
在settings.py中最底下有一個(gè)叫做static的文件夾(),主要用來(lái)加載一些模板中用到的資源诚欠,提供給全局使用
這個(gè)靜態(tài)文件主要用來(lái)配置css拱雏,html,js 圖片捧弃,文字文件等
STATIC_URL = ‘/static/’
STATICFILES_DIRS = [
os.path.join(BASE_DIR, ‘static’)
]
只后在模板中,首先加載靜態(tài)文件,之后調(diào)用靜態(tài)禁舷,就不用寫絕對(duì)全路徑了
2. 使用靜態(tài)配置文件
a) 加載渲染靜態(tài)配置文件 模板中聲明
{% load static %} 或者 {% load staticfiles %}
在引用資源的時(shí)候使用
{% static ‘xxx’ %} xxx就是相當(dāng)于staticfiles_dirs的一個(gè)位置
b) 直接定義靜態(tài)配置
<img src="/static/images/mvc.png">
其中: 展示static文件夾下有一個(gè)images文件夾,下面有一個(gè)mvc.png的圖片
3. 模板摘要
3.1 模板主要有兩個(gè)部分
HTML靜態(tài)代碼
動(dòng)態(tài)插入的代碼段(挖坑毅往,填坑)也就是block
3.2 動(dòng)態(tài)填充
模板中的動(dòng)態(tài)代碼斷除了做基本的靜態(tài)填充牵咙,還可以實(shí)現(xiàn)一些基本的運(yùn)算,轉(zhuǎn)換和邏輯 如下:
{% if stu.stu_sex %}
男
{% else %}
女
{% endif %}
模板中的變量: 視圖傳遞給模板的數(shù)據(jù) 標(biāo)準(zhǔn)標(biāo)識(shí)符規(guī)則 語(yǔ)法 {{ var }} 如果變量不存在攀唯,則插入空字符串
3.3 模板重的點(diǎn)語(yǔ)法
對(duì)象.屬性或者方法
索引 (student.0.name)
{{stu.s_name}} 學(xué)生的姓名
{{stu.s_age}} 學(xué)生的年齡
3.4模板中的小弊端
調(diào)用對(duì)象的方法洁桌,不能傳遞參數(shù)
3.5 模板的標(biāo)簽
語(yǔ)法 {% tag %}
作用 a)加載外部傳入的變量
b)在輸出中創(chuàng)建文本
c)控制循環(huán)或邏輯
4. if表達(dá)式
格式1:
{% if 表達(dá)式 %}
{% endif %}
格式2:
{% if表達(dá)式 %}
{% else %}
{% endif %}
格式3:
{% if表達(dá)式 %}
{% elif 表達(dá)式 %}
{% endif %}
5. for表達(dá)式
格式1:
{% for 變量 in 列表 %}
{% empty %}
{% endfor %}
{% for stu in student %}
{{stu.s_name}}
{{stu.s_age}}
{% endfor %}
注意:當(dāng)列表為空或者不存在時(shí),執(zhí)行empty之后的語(yǔ)句
注意一下用法:
{{ forloop.counter }} 表示當(dāng)前是第幾次循環(huán)侯嘀,從1開(kāi)始
{{ forloop.counter0 }} 表示當(dāng)前從第幾次循環(huán)另凌,從0開(kāi)始
{{forloop.revcounter}}表示當(dāng)前是第幾次循環(huán),倒著數(shù)數(shù)戒幔,到1停
{{forloop.revcounter0}}表示當(dāng)前是第幾次循環(huán)吠谢,倒著數(shù)數(shù),到0停
{{forloop.first}}是否是第一個(gè) 布爾值
{{forloop.last}}是否是最后一個(gè) 布爾值
6. 注釋
6.1 注釋可見(jiàn)诗茎,可運(yùn)行
<!-- 注釋內(nèi)容 -->
6.1 單行注釋注釋不可見(jiàn)工坊,不可運(yùn)行
單行注釋(頁(yè)面源碼中不會(huì)顯示注釋內(nèi)容)
{# 被注釋掉的內(nèi)容 #}
6.2 多行注釋注釋不可見(jiàn),不可運(yùn)行
{% comment %}
中間為多行注釋的內(nèi)容
{% endcomment %}
實(shí)例操作
這里省略最開(kāi)始創(chuàng)建工程文件的過(guò)程
首先在創(chuàng)建工程文件(例:工程文件名為day03)的目錄下創(chuàng)建兩個(gè)個(gè)新的文件夾敢订,templates和static分別用來(lái)加載一些模板和模板中用到的資源(css王污,js,圖片等)
下一步就是加載靜態(tài)配置文件
在setting.py文件的最后面有static的文件夾楚午,進(jìn)行修改
STATIC_URL = '/static/'
STATICFILES_DIRS=[
os.path.join(BASE_DIR,'static')
]
然后設(shè)置url昭齐,這里分為兩個(gè)步驟
在app文件中創(chuàng)建urls.py文件,在其中添加以下代碼
from django.conf.urls import url
from app import views
urlpatterns=[
url(r'^stu/',views.index,name='index'),
# url(r'^del_stu/(\d+)/',views.del_stu,name='del_stu'),
url(r'^del_stu/(?P<s_id>\d+)/',views.del_stu,name='del_stu'),
]
然后在day03文件中的urls.py中的urlpatterns進(jìn)行添加來(lái)進(jìn)行兩個(gè)urls之間的連接矾柜,以確保輸入127.0.0.1:8000/app/stu/能進(jìn)入制作的頁(yè)面
url(r'app/',include('app.urls',namespace='app'))
然后在app中的views中定義類來(lái)實(shí)現(xiàn)功能
展示學(xué)生信息(數(shù)據(jù)庫(kù)連接部分參考昨天的內(nèi)容)
def index(request):
if request.method=='GET':
# return HttpResponse('hello')
stus=Student.objects.all()
#返回學(xué)生信息
# return render(request,'index.html',{'students':stus})
return render(request, 'stus.html', {'students': stus})
刪除學(xué)生信息
def del_stu(request,s_id):
if request.method=='GET':
# 刪除
'''
1.獲取url中id值
2.獲取id對(duì)應(yīng)的學(xué)生對(duì)象
3.對(duì)象.delete()
'''
# id=request.GET.get('id') #獲取學(xué)生id
stu=Student.objects.get(pk=id) #通過(guò)id獲取學(xué)生
stu.delete() #刪除學(xué)生信息
# return HttpResponseRedirect('/app/stu/') 刪除后返回到原來(lái)的網(wǎng)頁(yè)司浪,即127.0.0.1:8000/app/stu/
return HttpResponseRedirect(reverse('app:index')) #刪除后返回到原來(lái)的網(wǎng)頁(yè)泊业,即127.0.0.1:8000/app/stu/
(分別對(duì)應(yīng)app/urls 中的url)
接下來(lái)設(shè)置網(wǎng)頁(yè)布局
(在static文件夾中創(chuàng)建次文件夾css和js,用于存放js和css文件)
在創(chuàng)建的templates創(chuàng)建文件index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--加載渲染靜態(tài)配置文件 模板中聲明-->
{% load static %}
<!--引用資源啊易,這里也可以使用直接定義靜態(tài)配置的方法-->
<link rel="stylesheet" href="{% static 'css/index.css' %}">
<script src="{% static 'js/xxx.js' %}"></script>
</head>
<body>
<p>學(xué)生信息</p>
<table>
<thead>
<th>序號(hào)</th>
<th>id</th>
<th>name</th>
<th>age</th>
</thead>
<tobdy>
<!--for循環(huán)的用法-->
{%for stu in students%}
<tr>
<td>{{forloop.counter}}</td>
<td>{{stu.id}}</td>
<!--if語(yǔ)句進(jìn)行判斷吁伺,并添加屬性-->
<td {% if forloop.first %}style="color:red;"{%endif%}>{{stu.s_name}}</td>
<td>{{stu.s_age}}</td>
</tr>
{%endfor%}
</tobdy>
</table>
</body>
</html>
其中的js和css文件可以自己添加
這樣就可以在訪問(wèn)127.0.0.1:8000/app/stu/的時(shí)候出現(xiàn)數(shù)據(jù)庫(kù)中存儲(chǔ)的學(xué)生類中的所有學(xué)生的id,name租谈,age幾種信息組成的表格
關(guān)于動(dòng)態(tài)插入的代碼段(挖坑篮奄,填坑)也就是block,就是上面定義的第二種類的使用了
首先在templates中創(chuàng)建一個(gè)新的html文件(base.html)割去,用于存儲(chǔ)框架(挖坑)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
{% block title %}
{% endblock %}
</title>
{% block extCss %}
{% endblock %}
{% block extJs %}
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
其中只有block窟却,其他新建的html文件可以直接繼承這個(gè)base.html的框架,只需要在block中添加內(nèi)容即可
繼承代碼為{% extends '文件名.html' %}
我們?cè)趧?chuàng)建一個(gè)base_main.html來(lái)繼承base.html的框架
<!--繼承base.html的框架-->
{% extends 'base.html' %}
<!--在block中添加內(nèi)容-->
{% block extJs %}
<!--在引用資源時(shí)呻逆,可以直接在網(wǎng)站上找在線的資源-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
{% endblock %}
然后我們?cè)賱?chuàng)建一個(gè)關(guān)于刪除學(xué)生信息的stus.html文件夸赫,并繼承base_main.html的框架(其實(shí)相當(dāng)于繼承了base.html和base_main.html)
{% extends 'base_main.html' %}
{% block title %}
學(xué)生列表頁(yè)面
{% endblock %}
{% block extJs %}
{{block.super}}
{% load static %}
<!--繼承后也可自己添加引用資源-->
<script src="{% static 'js/xxx.js' %}"></script>
{% endblock %}
{% block content %}
<table>
<thead>
<th>序號(hào)</th>
<th>id</th>
<th>name</th>
<th>age</th>
<th>操作</th>
</thead>
<tobdy>
{%for stu in students%}
<tr>
<td>{{forloop.counter}}</td>
<td>{{stu.id}}</td>
<td>{{stu.s_name}}</td>
<td>{{stu.s_age}}</td>
<td>
<!--<a href="/app/del_stu/?id={{stu.id}}">刪除</a>-->
<a href="{% url 'app:del_stu' stu.id %}">刪除</a>
|
<a href="">查看</a>
</td>
</tr>
{%endfor%}
</tobdy>
</table>
{% endblock %}
登錄127.0.0.1:8000/app/stu/即可登錄以下界面
查看功能還沒(méi)有設(shè)置,原理和刪除功能相似
刪除功能中的
<a href="/app/del_stu/?id={{stu.id}}">刪除</a> 和
<a href="{% url 'app:del_stu' stu.id %}">刪除</a>
都是刪除學(xué)生信息的功能咖城,不同之處在用第一條代碼時(shí)不需要在views中定義del_stu時(shí)其參數(shù)只需要request即(def del_stu(request):)茬腿;而第二條代碼的定義參數(shù)為def del_stu(request,s_id):
查看功能可看作業(yè)