實現和原理
Python集成Django開發框架后,可以通過在cmd命令提示符下建立工程,工程名為learn_models
django-admin.py startproject learn_models
再進入到learn_models里面,新建一個app項目
cd learn_models python manage.py startapp learn
此時目錄的結構有這些文件
C:\USERS\SHILEIDING\LEARN_MODELS │ manage.py │ ├─learn │ │ admin.py │ │ models.py │ │ tests.py │ │ views.py │ │ __init__.py │ │ │ └─migrations │ __init__.py │ └─learn_models settings.py settings.pyc urls.py wsgi.py __init__.py __init__.pyc
再去官網下載最新的Bootstrap3框架文件 http://getbootstrap.com/getting-started/#download 下載的文件夾可以看出有css、fonts、js三個(功能相當大),這就是Bootstrap 3的全部,以下就要在剛新建的Django工程集合Bootstrap3,進入learn_models目錄,新建一個static文件夾,再在static里面新建一個bootstrap文件夾,將下載的三個文件夾放進去。
回到learn_models目錄,進入learn目錄里,新建一templates文件夾,里面存放Bootstrap的html界面,如此處新建一文件test.html,要引用Bootstrap 和jQuery等相關庫,這里重點是定位存放的static文件
<!DOCTYPE html> {% load staticfiles %} <html> <head lang="en"> <meta charset="UTF-8"> <!-- 引入jQuery --> <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script src="http://code.jquery.com/jquery-latest.js"></script> <!-- 引入 Bootstrap --> <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css"> <link href="{% static 'bootstrap/css/bootstrap.css' %}" rel="stylesheet" type="text/css"> <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script> <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.js' %}"></script> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> <title>數據展示平台</title> </head> <body> <!-- bootstrap 特性容器 --> <div class="container"> <h1>Hello, world! </h1> </div> </body> </html>
文件開頭的 {% load staticfiles %}就是加載static目錄,為了找到static目錄,需要稍微修改下".../learn_models/learn_models/settings.py"中的配置,主要有兩塊修改
INSTALLED_APPS = ( 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', #注冊新建的app 'learn', )
INSTALLED_APPS中添加新建的app,然后配置static相關
STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static'), )
將static目錄放在 STATICFILES_DIRS 中,這樣就可以load到我們剛下載的bootstrap 了,bootstrap依賴於jQuery庫,所以一定要添加,我們這里是直接引用的,如果有下載版本只需放在static里再引用就行。
這時前端html已經可以使用相關bootstrap屬性了,但如何通過Django 的http協議訪問呢?這就是Django傳奇的MVC模型了,剛剛的templates文件夾就是表現層,展示給用戶看的前端,views.py負責處理業務邏輯層,處理請求和返回請求,models.py負責數據存取層,處理數據庫的相關屬性。前端發出的GET或POST請求要通過urls.py映射到views的相關方法中,所以要在urls.py中配置映射關系,這里假設請求路徑為 http://127.0.0.1:8000/test/ 則配置為
urlpatterns = [ url(r'^admin/', include(admin.site.urls)), #前面是正則表達式 url(r'^test/','learn.views.test',name='test'), ]
映射到對應的views.py中,這里簡單實現test方法,在views.py中添加即可
#Bootstrap 測試 def test(request): return render(request, 'test.html')
當瀏覽器發出test請求后,先通過urls映射到views中的test方法,處理邏輯后推到前端test.html中顯示,html顯示的內容可以利用下載的bootstrap渲染。
運行
在cmd中cd到 learn_models目錄下 ,此時的目錄結構如下
C:\USERS\SHILEIDING\LEARN_MODELS │ manage.py │ ├─learn │ │ admin.py │ │ models.py │ │ tests.py │ │ views.py │ │ __init__.py │ │ │ ├─migrations │ │ __init__.py │ │ │ └─templates │ test.html │ ├─learn_models │ settings.py │ settings.pyc │ urls.py │ wsgi.py │ __init__.py │ __init__.pyc │ └─static └─bootstrap ├─css │ bootstrap-theme.css │ bootstrap-theme.css.map │ bootstrap-theme.min.css │ bootstrap.css │ bootstrap.css.map │ bootstrap.min.css │ ├─fonts │ glyphicons-halflings-regular.eot │ glyphicons-halflings-regular.svg │ glyphicons-halflings-regular.ttf │ glyphicons-halflings-regular.woff │ glyphicons-halflings-regular.woff2 │ └─js bootstrap.js bootstrap.min.js npm.js
可以看到有manage.py,這正是運行的管理器,先同步數據庫,然后運行工程
#同步數據庫 python manage.py makemigrations python manage.py migrate #運行工程 python manage.py runserver
然后打開 http://127.0.0.1:8000/test/ 出現在偏中間的hello world 表明整合成功