Python2.7+Django1.8+Bootstrap3 實現增刪改查、分頁（一）

時間  2019-11-25
標籤 python2.7+django1.8+bootstrap3 python django bootstrap 實現 增刪 分頁 欄目 Python 简体版
原文   原文鏈接

前言javascript

　　很久沒寫博客了，此次由於工做緣由，實現了一個基於Python2.7+Django1.8+Bootstrap3架構的測試demo，除了經常使用的增刪改查功能外，還增長了分頁和批量操做等功能，從前端到後臺一條龍，底層數據庫使用的是Django自帶的SQLite輕量級數據庫，後面我將從安裝和運行，實現的原理和框架，還有本身的心得體會來說述這個demo的前生今世，我是很人性化的，源代碼將在尾巴提供，雖然水平不行，但若轉載還請註明出處，固然，不註明我也不會保留什麼什麼權利。css

安裝和配置html

　　首先安裝Python2.7，在下一步運行時，請注意選擇勾選環境配置工具包，默認是關閉的，若是沒設置，安裝以後可手動添加"…/Python27"和"…/Python27/Scripts"到環境變量的path中。若是配置成功，進入cmd後，任何路徑輸入Python，可查看Python的版本信息。通常來講"…/Python27/Scripts"包含以下執行文本：前端

django-admin.exe
easy_install.exe
pip.exe

 　　在cmd終端輸入pip，通常來講會有反應，若是沒有，說明未集成批評，則可直接下載：get-pip.py 而後運行在終端運行 html5

python get-pip.py

　　就能夠安裝 pip,pip安裝成功後利用pip安裝Djangojava

pip install Django

　　在python終端環境輸入python

import django
django.get_version()

　　查看輸出的Django版本信息，若打印出來即說明安裝成功！jquery

實現和原理git

　　Python集成Django開發框架後，能夠經過在cmd命令提示符下創建工程，工程名爲learn_modelsgithub

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 代表整合成功。

尾巴

　　原本打算直接解釋寫好表格管理的基本操做demo的，但想一想一開始學習時配置這一層着實走了很多彎路，就臨時起意寫個略帶解釋的整合Python、Django、bootstrap 的test工程，後面我將再寫一篇，描述Django框架下實現基本操做的博客，這裏貢獻出demo源碼 ，直接同步下數據庫而後運行便可，有興趣的話能夠直接看，裏面我註釋的很詳細，若是有耐心，且聽我下回分解！
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程