Django實現基于cookie及JavaScript的響應式圖像

東西/原料

Django1.11.1

方式/步調

1
打開號令行窗口，建立Django工程，在工程內建立應用，號令如下：
django-admin startproject djrespic
cd djrespic
python manage.py startapp book
2
利用PyCharm開辟東西打開這個工程，編纂工程根目次/djrespic/settings.py文件，添加templates路徑，STATICFILES_DIRS路徑，以及book應用設置裝備擺設,點竄部門內容如下:
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'book.apps.BookConfig',]
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', ], }, },]
STATICFILES_DIRS= [os.path.join(BASE_DIR,'staticfiles'),]
3
在工程根目次建立templates文件夾，在文件夾內建立‘pic.html’,代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>pic</title> <script> document.cookie="screen_width="+screen.width </script> {% load staticfiles %}</head><body> <img src="{% static pic %}"></body></html>
這此中嵌入的javascript代碼目標是寫獲取屏幕寬度并寫cookie
4
在工程根目次建立staticfiles文件夾，并在此文件夾下建立images文件夾，在images文件夾內放兩個圖片，按照上一步的cookie中屏幕寬度顯示分歧的圖片，完整工程文件布局如下圖
5
編纂工程根目次/djrespic/urls.py，添加應用的urls，代碼如下：
from django.conf.urls import url,includefrom django.contrib import adminurlpatterns = [ url(r'^admin/', admin.site.urls), url(r'book/',include('book.urls')),]
6
在book應用內編纂views.py文件，代碼如下：
from django.shortcuts import render# Create your views here.def pic(request): if request.COOKIES.get('screen_width'): w = request.COOKIES.get('screen_width') if int(w) > 1024: pic_dir = '/images/11.jpg' else: pic_dir = '/images/10.jpg' return render(request,'pic.html', {'pic': pic_dir})
按照屏幕寬度返回分歧圖片
7
在book應用內建立urls.py文件，并寫代碼如下：
from django.conf.urls import urlfrom . import viewsurlpatterns = [ url(r'pic/',views.pic),]
8
在開辟東西的termal終端運行django工程
python manage.py runserver
9
在瀏覽器查看，當切換當作電腦手機模式時屏幕寬度轉變，刷新返回分歧圖片