django學(xué)習(xí)(2)加載靜態(tài)html模板網(wǎng)站

[toc]

新建應(yīng)用,訪問index

如何在 Windows 上安裝 Django并創(chuàng)建應(yīng)用 -無聊才讀書[1]

創(chuàng)建新的項(xiàng)目

django-admin.py startproject GameProject
cd GameProject

在項(xiàng)目目錄創(chuàng)建templates目錄,將模板網(wǎng)站資源(html、css、js、img)放入templates目錄,確保有一個(gè)入口文件index.html扫倡。然后返回項(xiàng)目目錄。

創(chuàng)建新的應(yīng)用

python manage.py startapp game

修改game/views.py

from django.http import HttpResponse
from django.shortcuts import render
def index(request):
    #return HttpResponse("Hello, world. You're at the polls index.")
    return render(request,"index.html")
#返回要在網(wǎng)頁上顯示的信息

HttpResponse函數(shù)用來直接返回文本信息竟纳;
render函數(shù)專門用來加載網(wǎng)頁模板撵溃,第一個(gè)參數(shù)位置寫request參數(shù),第二個(gè)寫模板文件名锥累。

設(shè)置路由

有官方推薦的方式缘挑,和簡(jiǎn)單的方式
django官方文檔[2]
有關(guān)urls的知識(shí)在下一節(jié)有介紹。

正經(jīng)方法

應(yīng)用目錄中創(chuàng)建urls.py文件:

vi urls.py

urls.py內(nèi)容寫入:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

修改GameProject/urls.py文件

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('game/', include('game.urls')),
    path('admin/', admin.site.urls),
]

urlpartterns添加path('game/',include('game.urls')),
注意import include桶略。
include的用途:

函數(shù)允許引用其他 URLconfs语淘。 無論 Django 遇到什么 include(),它都會(huì)刪除與該點(diǎn)匹配的 URL 的任何部分际歼,并將剩余的字符串發(fā)送到包含的 URLconf 處進(jìn)行進(jìn)一步處理惶翻。[1]

當(dāng)您包含其他 URL 模式時(shí),您應(yīng)該始終使用 include ()鹅心。 admin.site.urls 是唯一的例外吕粗。

簡(jiǎn)單方法

修改GameProject/urls.py文件

from django.contrib import admin
from django.urls import path
from game import views

urlpatterns = [
    path('game/', views.index),
    path('admin/', admin.site.urls),
]

這就取消了應(yīng)用目錄內(nèi)的二級(jí)路由,也不需要include()旭愧,直接由總路由控制url該訪問視圖中的哪個(gè)方法颅筋。

修改GameProject/settings.py

修改ALLOWED_HOSTS和INSTALLED_APPS

1.ALLOWED_HOSTS = ['*']表示開啟外網(wǎng)訪問權(quán)限
2.INSTALLED_APPS添加一個(gè)'game',讓項(xiàng)目知道此應(yīng)用的存在
修改TEMPLATES里的'DIRS'

3.TEMPLATES
'DIRS'代表整個(gè)工程的模板文件目錄的路徑。
'APP_DIRS'表示是否啟用應(yīng)用內(nèi)模板目錄输枯,默認(rèn)狀態(tài)就是使用應(yīng)用目錄內(nèi)的templates文件夾议泵。
如果將'DIRS'省略,則需要將網(wǎng)頁模板文件放在應(yīng)用目錄下的templates目錄下用押,當(dāng)'APP_DIRS'為True可正常使用肢簿。
在本例中靶剑,這里寫成DIRS:[os.path.join(BASE_DIR,"templates")],
或者DIRS: [BASE_DIR+'/templates'],
讓項(xiàng)目知道我們自定義的工程模板文件目錄的位置蜻拨。兩種寫法的區(qū)別在于前者不需要斜杠池充,跨操作系統(tǒng)的適應(yīng)性更好。

測(cè)試啟動(dòng)

啟動(dòng)服務(wù)器缎讼,外網(wǎng)可訪問收夸,使用80端口(默認(rèn)只能內(nèi)部訪問,使用8000端口)血崭。需要保證當(dāng)前端口未占用

python manage.py runserver 0:80

內(nèi)網(wǎng)使用localhost卧惜,外網(wǎng)可以使用ip/域名網(wǎng)址+/game來訪問剛剛配置好的靜態(tài)網(wǎng)頁,例如:http://62.234.114.108/game

通過urls訪問多個(gè)模板網(wǎng)頁

目前夹纫,通過“index/”這個(gè)Url可以訪問到“game”應(yīng)用中的“index.html”文件咽瓷。如果想通過url訪問多個(gè)html文件,就需要多個(gè)url路由舰讹。有關(guān)urls的知識(shí)在下一節(jié)有介紹茅姜。

一級(jí)路由方案

有一種可行的簡(jiǎn)單的方法如下,在工程目錄的urls.py中這樣寫:

from django.contrib import admin
from django.urls import path
from helapp import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', views.index),
    path('input/', views.input),
]

在應(yīng)用的views.py中這樣寫:

from django.shortcuts import render
def index(request):
    return render(request,"index.html")
def input(request):
    return render(request,"input.html")

這樣月匣,只要index能正常訪問钻洒,input在index的同目錄下,那么它就也能訪問锄开。
這樣偷了個(gè)懶素标,不需要使用“include()”也不需要使用應(yīng)用里的“urls.py”。這不是官方推薦的方案萍悴,但可以用头遭。

多級(jí)路由方案

官方建議的方案,對(duì)于多應(yīng)用的大中型項(xiàng)目更有利癣诱∪伟叮總路由把url直接傳遞給匹配的分路由,再由分路由指定views狡刘。這樣的話享潜,一個(gè)一級(jí)url只能對(duì)應(yīng)一個(gè)應(yīng)用,想在同一個(gè)應(yīng)用里訪問到多個(gè)網(wǎng)頁嗅蔬,可以對(duì)url做多次路由剑按。
在工程目錄的urls.py中,把input的路由去掉:

urlpatterns = [
    path('admin/', admin.site.urls),
    # path('input/', include('helapp.urls')),
    path('index/', include('helapp.urls')),
]

"include()"的使用,使得前面匹配完成的字段抹消掉澜术,路由目的地"helapp.urls"只會(huì)收到"index/"后面的字段艺蝴。
在應(yīng)用的urls.py中:

from django.urls import path
from . import views
urlpatterns = [
    path('', views.index),
    path('input', views.input),
]

這兩個(gè)"path"就分別對(duì)應(yīng)"localhost/index"和"localhost/index/input"兩個(gè)url。使得調(diào)用views.py中調(diào)用不同的方法鸟废,從而返回不同的頁面猜敢。
在應(yīng)用的views.py中:

from django.shortcuts import render
def index(request):
    return render(request,"index.html")
def input(request):
    return render(request,"input.html")

使用django上線完整靜態(tài)網(wǎng)站

上面的方法只能展示單獨(dú)的html文件,若此文件有靜態(tài)css、js缩擂、img文件的鏈接鼠冕,因?yàn)闆]有寫對(duì)應(yīng)的路由,所以無法直接調(diào)用胯盯,網(wǎng)站會(huì)顯示不正常懈费。
官方給出的方法是靜態(tài)資源與模板文件存放在不同的路徑,通常是在應(yīng)用目錄下有templates和static文件夾(也可以自定義指定其他路徑)博脑。模板文件表示可以進(jìn)行動(dòng)態(tài)傳參憎乙,而靜態(tài)文件只能是模板文件的附屬,只能讓模板文件調(diào)用叉趣,后端不可操作其內(nèi)容泞边。

官方正常操作

欲使用靜態(tài)文件目錄,先打開工程同名目錄下的“settings.py”疗杉,將最末尾改為如下示例:

STATIC_URL = '/static/'

之后將準(zhǔn)備好的與html文件相匹配的css文件放入應(yīng)用目錄下的static目錄繁堡。(實(shí)測(cè),修改好了上面的示例后乡数,靜態(tài)文件放在工程目錄下的static也可以)
要鏈接這個(gè)css文件椭蹄,則要在html文件中設(shè)置以下代碼:[2]

{% load static %}<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">

這里{% load static %}代表這里提示需要一個(gè)靜態(tài)文件,{% static 'style.css' %}代表從規(guī)定的靜態(tài)文件目錄中找這個(gè)路徑净赴。

如果事先寫好的靜態(tài)網(wǎng)站有許多靜態(tài)文件的調(diào)用绳矩,則修改會(huì)很繁瑣。但如果是靜態(tài)文件互相調(diào)用玖翅,則可以簡(jiǎn)單很多翼馆,比如在css文件中使用圖片:

body {background: white url("images/background.gif") no-repeat;}

但如果html文件中有許多<img>圖片需要用src鏈接,只能一個(gè)一個(gè)改金度。以至于我想偷個(gè)懶——

偷懶簡(jiǎn)單操作

如果把網(wǎng)站中的index.html文件也看作靜態(tài)資源应媚,即可用最少的修改完成完整靜態(tài)網(wǎng)站的上線。以下是步驟:

  1. app目錄下創(chuàng)建static文件夾猜极,將現(xiàn)有的整個(gè)網(wǎng)站模板放入中姜。注意,剛才的templates是在工程總目錄下創(chuàng)建跟伏。
  2. 打開工程同名目錄下的“settings.py”丢胚,將最末尾改為如下示例:
STATIC_URL = '/static/'
  1. 修改templates目錄下的index.html文件,可使用鏈接受扳、跳轉(zhuǎn)等形式携龟。跳轉(zhuǎn)的方法網(wǎng)上有很多,這里舉出幾個(gè)例子:
<head>  {% load static %}
    <meta http-equiv="refresh" content="0;url= {% static 'index.html' %} ">
</head>  <!-- meta跳轉(zhuǎn) -->
<script language="javascript" type="text/javascript">
{% load static %} window.location.href='{% static 'index.html' %}';
</script><!-- script跳轉(zhuǎn) -->
{% load static %}  <!-- 鏈接跳轉(zhuǎn) -->
<a href="{% static 'index.html' %}">跳轉(zhuǎn)連接</a>

如此勘高,應(yīng)該能正常顯示整個(gè)模板網(wǎng)站了峡蟋。其實(shí)這是基于static目錄可以直接訪問坟桅。但實(shí)際使用不推薦這樣做,因?yàn)槭紫褥o態(tài)html無法傳遞動(dòng)態(tài)參數(shù)蕊蝗,其次使網(wǎng)站資源都可以通過url無腦地進(jìn)行靜態(tài)訪問并不是一種很好的習(xí)慣仅乓。

通過請(qǐng)求views加載靜態(tài)資源

如果不想一個(gè)一個(gè)修改網(wǎng)頁內(nèi)的url,也不想純靜態(tài)訪問匿又,其實(shí)可以讓后端處理每個(gè)url訪問請(qǐng)求。雖然不同的url很多建蹄,但是格式都有規(guī)律碌更。使用正則表達(dá)式解析url, 可以找到需要的靜態(tài)文件并返回洞慎。正則表達(dá)式的詳細(xì)使用見下一節(jié)
痛单。
在urls文件中,導(dǎo)入re_path劲腿,并使用正則匹配變量旭绒,并交給views的方法:

from django.urls import path, re_path
from . import views

urlpatterns = [  # 第一個(gè)參數(shù)是路徑,第二個(gè)參數(shù)是視圖焦人,第三個(gè)是參數(shù)
    re_path(r'(?P<fl_name>\w+)\.html$', views.pt_htm),
    re_path(r'(?P<kind>\w+)/(?P<fl_name>.*)\.(?P<fmt_name>\w+)$', views.pt_stc),
    path('', views.index),
]

在views中這樣寫(注意導(dǎo)包):

from django.shortcuts import render
from django.http import HttpResponse
import os
from hello import settings
# Create your views here.

def index(request):
    return render(request, "index.html")

def pt_htm(request, fl_name):
    return render(request, fl_name + '.html')

def pt_stc(request, kind, fl_name, fmt_name):
    path = os.path.join(settings.BASE_DIR,
    "helapp/static/" + kind + "/{}".format(fl_name + '.' + fmt_name))  # 路徑
    with open(path, 'rb') as s:
        data = s.read()
    if fmt_name == 'jpg':
        return HttpResponse(data, content_type="image/jpg")
    elif fmt_name == 'png':
        return HttpResponse(data, content_type="image/png")
    # elif fmt_name == 'css':
    #   return HttpResponse('', content_type="text/css")
    elif fmt_name == 'js':
        return HttpResponse(data, content_type="application/x-javascript")

注意挥吵,關(guān)于css的請(qǐng)求我注釋掉了,因?yàn)槲艺业倪@個(gè)網(wǎng)站模板還使用了靜態(tài)資源字體文件花椭,調(diào)用字體文件時(shí)有url參數(shù)忽匈,不好解析,所以css的調(diào)用還是在html中用{%load static%}為好(詳情見前文)矿辽。
在static/css中新建一個(gè)index.css文件丹允,用于收集其他css文件。只要在這里引用了其他所有的css文件袋倔,網(wǎng)頁只要鏈接這一個(gè)css就可以了雕蔽。index.css內(nèi)寫法舉例如下:

@import "style.css";
@import "style1.css";

在每個(gè)html文件中合適的位置加入:

{%load static%}
<link href="{%static 'css/index.css'%}" rel="stylesheet" type="text/css" media="all" />

應(yīng)該是要?jiǎng)h掉其他的css link的,因?yàn)関iews里沒有對(duì)應(yīng)的處理那些url的代碼宾娜,不刪會(huì)報(bào)錯(cuò)批狐。如果不想費(fèi)事在html里一個(gè)一個(gè)刪的話,把上面views注釋的部分解注釋前塔,讓其返回的是空字符串而不是data贾陷,瀏覽器就不會(huì)報(bào)錯(cuò)了。這樣做也不會(huì)影響到load static的css嘱根。


  1. 如何在 Windows 上安裝 Django并創(chuàng)建應(yīng)用 -無聊才讀書 ? ?

  2. django官方文檔 ? ?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末髓废,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子该抒,更是在濱河造成了極大的恐慌慌洪,老刑警劉巖顶燕,帶你破解...
    沈念sama閱讀 216,496評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異冈爹,居然都是意外死亡涌攻,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門频伤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來吹由,“玉大人咒林,你說我怎么就攤上這事。” “怎么了供屉?”我有些...
    開封第一講書人閱讀 162,632評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵中符,是天一觀的道長(zhǎng)秕豫。 經(jīng)常有香客問我硕并,道長(zhǎng),這世上最難降的妖魔是什么怎炊? 我笑而不...
    開封第一講書人閱讀 58,180評(píng)論 1 292
  • 正文 為了忘掉前任谭企,我火速辦了婚禮,結(jié)果婚禮上评肆,老公的妹妹穿的比我還像新娘债查。我一直安慰自己,他們只是感情好瓜挽,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評(píng)論 6 388
  • 文/花漫 我一把揭開白布攀操。 她就那樣靜靜地躺著,像睡著了一般秸抚。 火紅的嫁衣襯著肌膚如雪速和。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,165評(píng)論 1 299
  • 那天剥汤,我揣著相機(jī)與錄音颠放,去河邊找鬼。 笑死吭敢,一個(gè)胖子當(dāng)著我的面吹牛碰凶,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播鹿驼,決...
    沈念sama閱讀 40,052評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼欲低,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了畜晰?” 一聲冷哼從身側(cè)響起砾莱,我...
    開封第一講書人閱讀 38,910評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎凄鼻,沒想到半個(gè)月后腊瑟,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體聚假,經(jīng)...
    沈念sama閱讀 45,324評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評(píng)論 2 332
  • 正文 我和宋清朗相戀三年闰非,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了膘格。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,711評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡财松,死狀恐怖瘪贱,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情辆毡,我是刑警寧澤菜秦,帶...
    沈念sama閱讀 35,424評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站胚迫,受9級(jí)特大地震影響喷户,放射性物質(zhì)發(fā)生泄漏唾那。R本人自食惡果不足惜访锻,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望闹获。 院中可真熱鬧期犬,春花似錦、人聲如沸避诽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽沙庐。三九已至鲤妥,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間拱雏,已是汗流浹背棉安。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留铸抑,地道東北人贡耽。 一個(gè)月前我還...
    沈念sama閱讀 47,722評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像鹊汛,于是被迫代替她去往敵國(guó)和親蒲赂。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評(píng)論 2 353