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


前言

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

安裝和配置

  首安裝Python2.7,在下一步運行時,請注意選擇勾選環境配置工具包,默認是關閉的,如果沒設置,安裝之后可手動添加"…/Python27"和"…/Python27/Scripts"到環境變量的path中。如果配置成功,進入cmd后,任何路徑輸入Python,可查看Python的版本信息。一般來說"…/Python27/Scripts"包含如下執行文本:

django-admin.exe
easy_install.exe
pip.exe

   在cmd終端輸入pip,一般來說會有反應,如果沒有,說明未集成批評,則可直接下載:get-pip.py 然后運行在終端運行

python get-pip.py

  就可以安裝 pip,pip安裝成功后利用pip安裝Django

pip install Django

  在python終端環境輸入

import django
django.get_version()

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

實現和原理

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

尾巴

  本來打算直接解釋寫好表格管理的基本操作demo的,但想想一開始學習時配置這一層着實走了不少彎路,就臨時起意寫個略帶解釋的整合Python、Django、bootstrap 的test工程,后面我將再寫一篇,描述Django框架下實現基本操作的博客,這里貢獻出demo源碼 ,直接同步下數據庫然后運行即可,有興趣的話可以直接看,里面我注釋的很詳細,如果有耐心,且聽我下回分解!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM