Django實現(xiàn)基于cookie及JavaScript的響應(yīng)式圖像
創(chuàng)建Django工程和應(yīng)用首先，打開命令行窗口，創(chuàng)建一個Django工程。在工程內(nèi)創(chuàng)建一個應(yīng)用，使用以下命令：```django-admin startproject djrespiccd djres
創(chuàng)建Django工程和應(yīng)用
首先，打開命令行窗口，創(chuàng)建一個Django工程。在工程內(nèi)創(chuàng)建一個應(yīng)用，使用以下命令：
```
django-admin startproject djrespic
cd djrespic
python startapp book
```
然后，使用PyCharm開發(fā)工具打開這個工程。編輯工程根目錄下的``文件，添加`templates`路徑和`STATICFILES_DIRS`路徑，并修改部分內(nèi)容如下：
```python
INSTALLED_APPS [
'',
'',
'',
'',
'',
'',
'',
]
TEMPLATES [
{
'BACKEND': '',
'DIRS': [(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'_',
'_',
'_',
'_',
],
},
},
]
STATICFILES_DIRS [(BASE_DIR, 'staticfiles')]
```
創(chuàng)建模板和靜態(tài)文件
在工程根目錄下創(chuàng)建一個`templates`文件夾，在文件夾內(nèi)創(chuàng)建一個名為``的模板文件，代碼如下：
```html
{% load staticfiles %}
```
這段嵌入的JavaScript代碼的目的是獲取屏幕寬度并寫入cookie。
在工程根目錄下創(chuàng)建一個`staticfiles`文件夾，并在該文件夾下創(chuàng)建一個`images`文件夾。在`images`文件夾內(nèi)放置兩個圖片，根據(jù)上一步寫入cookie中的屏幕寬度來顯示不同的圖片。完整的工程文件結(jié)構(gòu)如下：
```
djrespic
├── book
│ ├── __init__.py
│ ├──
│ ├──
│ ├── migrations
│ │ └── __init__.py
│ ├──
│ ├──
│ └──
├── djrespic
│ ├── __init__.py
│ ├──
│ ├──
│ └──
└── staticfiles
└── images
├──
└──
```
配置URL
在工程根目錄下的``文件中添加應(yīng)用的URL配置，代碼如下：
```python
from import url, include
from import admin
urlpatterns [
url(r'^admin/', ),
url(r'^book/', include('book.urls')),
]
```
編寫視圖函數(shù)
在book應(yīng)用的``文件中編寫視圖函數(shù)，代碼如下：
```python
from import render
def pic(request):
if ('screen_width'):
w ('screen_width')
if int(w) > 1024:
pic_dir ''
else:
pic_dir ''
return render(request, '', {'pic': pic_dir})
```
根據(jù)屏幕寬度返回不同的圖片路徑。
配置應(yīng)用URL
在book應(yīng)用內(nèi)創(chuàng)建一個``文件，并添加URL配置，代碼如下：
```python
from import url
from . import views
urlpatterns [
url(r'^pic/$', views.pic),
]
```
運行Django工程
在開發(fā)工具的終端運行Django工程，使用以下命令：
```
python runserver
```
查看效果
在瀏覽器中訪問網(wǎng)站，并切換為手機模式時，屏幕寬度會變化，頁面會根據(jù)不同的屏幕寬度顯示不同的圖片。