Django实现基于cookie及JavaScript的响应式图像

打开命令行窗口，创建Django工程，在工程内创建应用，命令如下：django-admin startproject djrespiccd djrespicpython manage.py startapp book

使用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'),]

在工程根目录创建templates文件夹，在文件夹内创建‘pic.html’,代码如下：                {% load staticfiles %}    这其中嵌入的javascript代码目的是写获取屏幕宽度并写cookie

在工程根目录创建staticfiles文件夹，并在此文件夹下创建images文件夹，在images文件夹内放两个图片，根据上一步的cookie中屏幕宽度显示不同的图片，完整工程文件结构如下图

编辑工程根目录/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')),]

在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})根据屏幕宽度返回不同图片

在book应用内创建urls.py文件，并写代码如下：from django.conf.urls import urlfrom . import viewsurlpatterns = [    url(r'pic/',views.pic),]

在开发工具的termal终端运行django工程python manage.py runserver

在浏览器查看，当切换成电脑手机模式时屏幕宽度变化，刷新返回不同图片