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

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 = [ { 'BACK': 'django.template.backs.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=https://vvvtt.com/article/"{% static pic %}">
这此中嵌入的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 rer# 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 rer(request,'pic.html', {'pic': pic_dir})

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

猜你喜欢