5、第十 - WEB開發進階 - Django靜態文件應用
Web Django 網站通常需要提供其他文件,如圖像、JavaScript或CSS。在Django中,我們將這些文件稱為“靜態文件”。 Django提供了django.contrib.staticfiles方法來管理。
我們先創建一個,存放靜態文件目錄:static。目錄規劃存放在在工程項目下,主要存放的文件CSS、JS、圖象文件。如圖:
模板文件 login.html 如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="/static/common.css" /> </head> <body> <form action="/login" method="post"> <p> <label for="username">用戶名:</label> <input id="username" type="text" > </p> <p> <label for="password">密碼:</label> <input id="password" type="password"> <input type="submit" name="提交"> </p> </form> </body> </html>
common.css 樣式文件,如下:
label{ width: 80px; text-align: right; display: inline-block; }
調整settings.py標簽,找到STATIC_URL ,添加內容,如下圖。要不然,在外面是訪問不web頁面是加載不了樣式出來。具體,可以參考官網:https://docs.djangoproject.com/en/2.1/howto/static-files/
STATIC_URL = ‘/static/‘ STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static"), STATIC_URL ]
效果頁面保持與上一章中的不變:http://127.0.0.1:8000/login/
Django獲取用戶提供的方式有兩種: GET、POST。觸發GET的操作一搬是通過URL訪問的形式;觸發POST的操作一搬是通過表單驗證方式提交。
接著前面講到的案例django_1工程項目,login.html、common.css、及cmdb的APP中的配置。
使用POST的過程中,Django報錯的原因和解決方法:
錯誤信息:
You called this URL via POST, but the URL doesn‘t end in a slash and you have APPEND_SLASH set. Django can‘t redirect to the slash URL while maintaining POST data. Change your form to point to 127.0.0.1:8009/login/ (note the trailing slash), or set APPEND_SLASH=False in your Django settings.
解決方案:
login.html中定義了"/login":
錯誤原因是在urls.py中做的映射關系不符合邏輯。修改為:path(r‘login‘,views.login)如下:
案例:瀏覽器頁面模擬信息提交獲取客戶端POST的值,並進行驗證
Django的框架結構如下:
涉及到的文件配置如下:
template/login.html
<span style="color: red">{{error_msg}}</span> 用來對客戶端用戶名、密碼輸入錯誤提示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="/static/common.css" /> </head> <body> <form action="/login" method="post"> <p> <label for="username">用戶名:</label> <input id="username" name="user" type="text" > </p> <p> <label for="password">密碼:</label> <input id="password" name="pwd" type="password"> <input type="submit" name="提交" /> <span style="color: red">{{error_msg}}</span> </p> </form> </body> </html>
static/common.css 樣式文件
label{ width: 80px; text-align: right; display: inline-block; }
django_1/urls.py 映射文件
from django.contrib import admin from django.urls import path from cmdb import views urlpatterns = [ path(‘admin/‘, admin.site.urls), path(r‘html/‘,views.Home), path(r‘login‘,views.login) ]
django_1/settings.py 配置文件
主要配置位置有:INSTALLED_APPS、MIDDLEWARE、TEMPLATES、靜態文件目錄,其他位置暫不做更改。
#添加APP項目 ‘cmdb’ INSTALLED_APPS = [ ‘django.contrib.admin‘, ‘django.contrib.auth‘, ‘django.contrib.contenttypes‘, ‘django.contrib.sessions‘, ‘django.contrib.messages‘, ‘django.contrib.staticfiles‘, ‘cmdb‘ ] #過濾 Csrf 配置項 MIDDLEWARE = [ ‘django.middleware.security.SecurityMiddleware‘, ‘django.contrib.sessions.middleware.SessionMiddleware‘, ‘django.middleware.common.CommonMiddleware‘, #‘django.middleware.csrf.CsrfViewMiddleware‘, ‘django.contrib.auth.middleware.AuthenticationMiddleware‘, ‘django.contrib.messages.middleware.MessageMiddleware‘, ‘django.middleware.clickjacking.XFrameOptionsMiddleware‘, ] # 添加模板路徑 ‘DIRS‘: [os.path.join(BASE_DIR,‘templates‘)] TEMPLATES = [ { ‘BACKEND‘: ‘django.template.backends.django.DjangoTemplates‘, ‘DIRS‘: [os.path.join(BASE_DIR,‘templates‘)], ‘APP_DIRS‘: True, ‘OPTIONS‘: { ‘context_processors‘: [ ‘django.template.context_processors.debug‘, ‘django.template.context_processors.request‘, ‘django.contrib.auth.context_processors.auth‘, ‘django.contrib.messages.context_processors.messages‘, ], }, }, ] #靜態文件配置 STATIC_URL = ‘/static/‘ STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static"), STATIC_URL ]
app子項目、cmdb/views.py 文件
from django.shortcuts import HttpResponse from django.shortcuts import render from django.shortcuts import redirect #重定向的跳轉的頁面 def login(request): error_msg = ‘‘ #設定全局變量 if request.method == "POST": user = request.POST.get(‘user‘,None) pwd = request.POST.get(‘pwd‘,None) if user == "root" and pwd == "chen1203": #匹配成功,進行跳轉 return redirect("http://www.gm99.com") else: # 匹配錯誤,提示錯誤 error_msg = "用戶名或密碼錯誤" return render(request,‘login.html‘,{‘error_msg‘:error_msg}) def Home(request): return HttpResponse(‘<h1>CMDB</h1>‘)
測試訪問效果:
http://127.0.0.1:8000/login URL 訪問,GET的方式,獲取文件信息
當輸入用戶名、密碼匹對成功後,頁面完成跳轉。
~~以上~~
5、第十 - WEB開發進階 - Django靜態文件應用