python + django + bootstrap 快速web開發初探

    Python  是一種面向對象、解釋型計算機程序設計語言，由Guido van Rossum於1989年末發明，第一個公開發行版發行於1991年。Python語法簡潔而清晰，具備豐富和強大的類庫。

    Django 是一個開放源代碼的Web應用框架，由Python寫成。採用了MVC的軟件設計模式，即模型M，視圖V和控制器C。它最初是被開發來用於管理勞倫斯出版集團旗下的一些以新聞內容爲主的網站的，便是CMS（內容管理系統）軟件。

    Bootstrap 是Twitter推出的一個開源的用於前端開發的工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合做開發，是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規範，它便是由動態CSS語言Less寫成。Bootstrap一經推出後頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。

原文連接：http://www.huangdc.com/21

初學初學python + django + bootstrap  快速web開發，有問題望你們指點，謝謝

下面咱們來看看安裝python/django/bootstrap及使用python + django + bootstrap開發一個最簡單的web

一、源代碼安裝 Python：

友好提示：在編譯安裝python 以前，咱們最好先檢查系統是否安裝 readline-devel 安裝包 ；爲何呢？ 由於不少朋友會遇到一個問題：經過編譯安裝的 python ，在使用 刪除鍵（Backspace）爲何不能用？ 刪除不了內容只會出來一個小方框是怎麼回事，只能用Del來刪除。移到像這的問題：

因此，若是經過編譯安裝python的時候，最好先安裝好 readline-devel 安裝包：

[root@localhost tools]# yum install readline-devel

接着經過編譯安裝 python最新版 

##查看系統默認安裝python版本
[root@localhost tools]# python -V
Python 2.4.3

##這裏安裝如今最新版 python 2.7.8，下載並解壓
[root@localhost tools]# wget https://www.python.org/ftp/python/2.7.8/Python-2.7.8.tgz
[root@localhost tools]# tar zxf Python-2.7.8.tgz
[root@localhost tools]# cd Python-2.7.8

##指定安裝目錄 /usr/local/python278/   加上--enable-shared 之後須要用到libpython 庫
[root@localhost Python-2.7.8]# ./configure --enable-shared --prefix=/usr/local/python278/
[root@localhost Python-2.7.8]# make
[root@localhost Python-2.7.8]# make install

##查看 python執行文件路徑,並將python軟連爲最新版本
[root@localhost Python-2.7.8]# which python
/usr/local/bin/python
[root@localhost Python-2.7.8]# ln -sf /usr/local/python278/bin/python /usr/local/bin/python
[root@localhost Python-2.7.8]# python -V
Python 2.7.8

二、安裝Django

在安裝django以前，咱們先安裝 setuptools 工具，否則在安裝 django的時候彙報一個錯誤，以下：

## 錯誤
[root@localhost Django-1.7.1]# python setup.py  install
Traceback (most recent call last):
  File "setup.py", line 4, in <module>
    from setuptools import setup, find_packages
ImportError: No module named setuptools

## 安裝 setuptools ， 詳情：https://pypi.python.org/pypi/setuptools
[root@localhost Django-1.7.1]# wget https://bootstrap.pypa.io/ez_setup.py --no-check-certificate -O - | python

接着安裝django

##下載並解壓,安裝
[root@localhost tools]# wget https://www.djangoproject.com/download/1.7.1/tarball/
[root@localhost tools]# tar zxf Django-1.7.1.tar.gz
[root@localhost tools]# cd Django-1.7.1
[root@localhost Django-1.7.1]# python setup.py install

##檢查安裝是否成功
[root@localhost Django-1.7.1]# django-admin.py --version
1.7.1
## 檢驗 import django
[root@localhost Django-1.7.1]# python
Python 2.7.8 (default, Nov 14 2014, 01:25:43) 
[GCC 4.1.2 20080704 (Red Hat 4.1.2-54)] on linux2
Type "help", "copyright", "credits" or "license" for more information.
>>> import django
>>> 
## 說明成功安裝django

三、建立django 項目project和應用app

[root@localhost data]# pwd
/data
## 建立 myproject 項目 ，及查看project目錄結構
[root@localhost data]# django-admin.py startproject myproject
[root@localhost data]# ls
myproject  mysql
[root@localhost data]# cd myproject/ 
[root@localhost myproject]# ll
total 16
-rwxr-xr-x 1 root root  252 Nov 14 07:56 manage.py
drwxr-xr-x 2 root root 4096 Nov 14 07:56 myproject

## 在 myproject 項目中建立 myapp 應用， 及查看app目錄結構
[root@localhost myproject]# django-admin.py startapp myapp
[root@localhost myproject]# ll 
total 24
-rwxr-xr-x 1 root root  252 Nov 14 07:56 manage.py
drwxr-xr-x 3 root root 4096 Nov 14 07:56 myapp
drwxr-xr-x 2 root root 4096 Nov 14 07:56 myproject

## 修改myproject的配置文件 settings.py  
[root@localhost myproject]# vim settings.py
## 一、在INSTALLED_APPS增長一個app，以下增長 myapp
INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myapp',
)
##二、database 連接默認使用的是sqlite3，咱們這裏測試一下，先註釋掉
DATABASES = {
    #'default': {
    #    'ENGINE': 'django.db.backends.sqlite3',
    #    'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    #}
}
##三、其餘配置
LANGUAGE_CODE = 'zh-cn'
DEFAULT_CHARSET = 'utf-8'
FILE_CHARSET = 'utf-8'
TIME_ZONE = 'Asia/Shanghai'

四、測試 django 應用

## 在myproject目錄下，開啓測試模式 8888 端口
[root@localhost myproject]# pwd
/data/myproject
[root@localhost myproject]# python manage.py runserver 0.0.0.0:8888
Performing system checks...

System check identified no issues (0 silenced).
November 14, 2014 - 16:03:08
Django version 1.7.1, using settings 'myproject.settings'
Starting development server at http://0.0.0.0:8888/
Quit the server with CONTROL-C.

在瀏覽器能夠訪問，這裏的url地址爲 http://192.168.16.128:8888  , 如圖說明已成功啓用一個web app：

五、bootstrap  網站模板，及django配置

##在項目目錄(/data/myproject/)下建立一個 static 目錄
[root@localhost myproject]# pwd
/data/myproject
[root@localhost myproject]# mkdir static
[root@localhost myproject]# ll
total 32
-rwxr-xr-x 1 root root  252 Nov 14 07:56 manage.py
drwxr-xr-x 3 root root 4096 Nov 14 07:56 myapp
drwxr-xr-x 2 root root 4096 Nov 14 08:05 myproject
drwxr-xr-x 2 root root 4096 Nov 16 17:46 static

## 將 bootstrap 文件下載到 static 目錄並解壓，獲得css、fonts、js目錄
[root@localhost static]# wget https://github.com/twbs/bootstrap/releases/download/v3.3.1/bootstrap-3.3.1-dist.zip
[root@localhost static]# unzip bootstrap-3.3.1-dist.zip
## 目錄結構以下
[root@localhost static]# tree
.
|-- 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
`-- js
    |-- bootstrap.js
    |-- bootstrap.min.js
    `-- npm.js

3 directories, 13 files

配置django

## 一、修改myproject的配置文件 settings.py  
[root@localhost myproject]# vim settings.py

###配置靜態文件路徑
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.6/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = (
        '/data/myproject/static/',
)

## 二、修改myproject的配置文件 urls.py

##添加一條 (r'^$', 'myapp.views.index'), 
##簡單理解 當訪問根時 ，由 myapp 的 views.py 中的 index 函數處理
##參數含義 這裏先不作過多介紹
urlpatterns = patterns('',
    # Examples:
    # url(r'^$', 'myproject.views.home', name='home'),
    # url(r'^blog/', include('blog.urls')),

    url(r'^admin/', include(admin.site.urls)),
       (r'^$', 'myapp.views.index'),
)  

## 三、建立一個 templates文件：/data/myproject/myapp/
[root@localhost myapp]# mkdir /data/myproject/myapp/templates
## templates 是默認的模板目錄名稱

下面是index.html 文件內容，路徑爲：/data/myproject/myapp/templates/index.html 

<!DOCTYPE html>
<!-- saved from url=(0050)http://getbootstrap.com/examples/starter-template/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://getbootstrap.com/favicon.ico">

    <title>Starter Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div>
        <div>
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span>Toggle navigation</span>
            <span></span>
            <span></span>
            <span></span>
          </button>
          <a href="http://getbootstrap.com/examples/starter-template/#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="http://getbootstrap.com/examples/starter-template/#">Home</a></li>
            <li><a href="http://getbootstrap.com/examples/starter-template/#about">About</a></li>
            <li><a href="http://getbootstrap.com/examples/starter-template/#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div>

      <div>
        <h1>Bootstrap starter template</h1>
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>

    </div><!-- /.container -->


    <!-- jquery JavaScript -->
    <script src="/static/js/jquery.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script src="/static/js/bootstrap.min.js"></script> 
  

</body></html>

好了，最後來配置一下 myapp 的 視圖文件 views.py

###添加一個 咱們前面提到的 index函數
[root@localhost myapp]# vim views.py
from django.shortcuts import render,render_to_response
from django.http import HttpResponse,HttpResponseRedirect
#coding=utf-8
#import time,simplejson,json,os,commands

# Create your views here.
def index(req):
        ##
        ##
        #return HttpResponse("aa")
        return render_to_response('index.html',)

這樣就ok 了，咱們來啓動測試模式，測試看看

[root@localhost myproject]# pwd
/data/myproject
[root@localhost myproject]# python manage.py runserver 0.0.0.0:8888
Performing system checks...

System check identified no issues (0 silenced).
November 17, 2014 - 03:18:45
Django version 1.7.1, using settings 'myproject.settings'
Starting development server at http://0.0.0.0:8888/
Quit the server with CONTROL-C.

ok，瀏覽器打開看看:

相關學習連接：

簡明python教程：http://sebug.net/paper/python/

Django教程：http://djangobook.py3k.cn/2.0/

bootstrap ：http://getbootstrap.com/

原文連接：http://www.huangdc.com/21