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
在浏览器查看，当切换当作电脑手机模式时屏幕宽度转变，刷新返回分歧图片