Django使用bootstrap實例

2024-04-27 15:18:47

字體：大中小

來源：轉載

供稿：網友

下載python版本進行安裝https://www.python.org/downloads/windows版本下載msi文件雙擊安裝下載Django版本進行安裝https://www.djangoPRoject.com/download/下載壓縮包解壓，cmd進入解壓后的django版本目錄執行安裝命令：E:/Django-1.9.12>python setup.py install添加PATH環境變量C:/Python27/Lib/site-packages/Django-1.9.12-py2.7.egg/django/bin基本命令================================1. 新建一個 django projectD:/develop>django-admin.py startproject mysite2. 新建 apppython manage.py startapp app-name或 django-admin.py startapp app-name3. 同步數據庫python manage.py syncdb 注意：Django 1.7.1及以上的版本需要用以下命令python manage.py makemigrationspython manage.py migrate這種方法可以創建表，當你在models.py中新增了類時，運行它就可以自動在數據庫中創建表了，不用手動創建。4. 使用開發服務器開發服務器，即開發時使用，一般修改代碼后會自動重啟，方便調試和開發，但是由于性能問題，建議只用來測試，不要用在生產環境。python manage.py runserver # 當提示端口被占用的時候，可以用其它端口：python manage.py runserver 8001python manage.py runserver 9999（當然也可以kill掉占用端口的進程） # 監聽所有可用 ip （電腦可能有一個或多個內網ip，一個或多個外網ip，即有多個ip地址）python manage.py runserver 0.0.0.0:8000# 如果是外網或者局域網電腦上可以用其它電腦查看開發服務器# 訪問對應的 ip加端口，比如 http://172.16.20.2:80005. 清空數據庫python manage.py flush此命令會詢問是 yes 還是 no, 選擇 yes 會把數據全部清空掉，只留下空表。6. 創建超級管理員python manage.py createsuperuser # 按照提示輸入用戶名和對應的密碼就好了郵箱可以留空，用戶名和密碼必填 # 修改用戶密碼可以用：python manage.py changepassWord username7. 導出數據導入數據python manage.py dumpdata appname > appname.jsonpython manage.py loaddata appname.json關于數據操作詳見：數據導入數據遷移，現在了解有這個用法就可以了。8. Django 項目環境終端python manage.py shell如果你安裝了 bpython 或 ipython 會自動用它們的界面，推薦安裝 bpython。這個命令和直接運行 python 或 bpython 進入 shell 的區別是：你可以在這個 shell 里面調用當前項目的 models.py 中的 API，對于操作數據，還有一些小測試非常方便。9. 數據庫命令行python manage.py dbshellDjango 會自動進入在settings.py中設置的數據庫，如果是 MySQL 或 postgreSQL,會要求輸入數據庫用戶密碼。在這個終端可以執行數據庫的SQL語句。如果您對SQL比較熟悉，可能喜歡這種方式。10. 更多命令終端上輸入 python manage.py 可以看到詳細的列表，在忘記子名稱的時候特別有用。URL映射========================mysite├── app1│ ├── __init__.py│ ├── admin.py│ ├── migrations│ │ └── __init__.py│ ├── models.py│ ├── tests.py│ ├── urls.py 新增│ ├── apps.py│ └── views.py├── templates 新增模板目錄│ └── app1│ └── index.html├── static 新增靜態媒體目錄│ └── images│ └── lilies.jpg ├── manage.py└── mysite ├── __init__.py ├── settings.py 修改 ├── urls.py └── wsgi.py在settings.py中增加以下配置靜態文件路徑

STATIC_PATH = os.path.join(BASE_DIR,'static')STATIC_URL = '/static/' # You may find this is already defined as such.STATICFILES_DIRS = (    STATIC_PATH,)模板文件路徑TEMPLATE_PATH = os.path.join(BASE_DIR, 'templates')TEMPLATES = [    {        'BACKEND': 'django.template.backends.django.DjangoTemplates',        'DIRS': [TEMPLATE_PATH],        'APP_DIRS': True,        'OPTIONS': {            'context_processors': [                'django.template.context_processors.debug',                'django.template.context_processors.request',                'django.contrib.auth.context_processors.auth',                'django.contrib.messages.context_processors.messages',            ],        },    },]mysite工程中的urls.py中增加內容    url(r'^app1/', include('app1.urls')),app1中新增的urls.py中內容from django.conf.urls import patterns, urlfrom app1 import viewsurlpatterns = [        url(r'^$', views.index, name='index')]為了建立映射,我們用到了tuple.在Django里必須用urlpatterns來命名這個元組.這個urlpatterns元組包含一些django.conf.urls.url()函數的調用,而每個函數里都有一個唯一的映射.在上面的代碼里,我們只用了url()一次,所以我們只映射了一個URL.django.conf.urls.url()函數的第一個參數是正則表達式^$,指的是匹配一個空字符串.所有匹配這個模式的URL都會映射到views.index()這個視圖.用戶的請求信息會包含在HttpRequest對象里作為參數傳遞給視圖.我們給url()函數可選參數name賦值為index.index.html內容如下<!DOCTYPE html>{% load staticfiles %} <!-- New line --><html>    <head>        <title>SSOC</title>    </head>    <body>        <h1>SSOC says...</h1>        hello world! <strong>{{ boldmessage }}</strong><br />        <img src="{% static "images/lilies.jpg" %}" alt="Picture of app1" />     </body></html></html>首先,我們需要使用{% load static %}標簽來使用靜態媒體.所以我們才可以用{% static "rango.jpg" %在模板里調用static文件.Django模板標簽用{ }來表示.在這個例子里我們用static標簽,它將會把STATIC_URL和rango.jpg連接起來,如下所示.<img src="/static/images/rango.jpg" alt="Picture of Rango" /> <!-- New line -->如果因為什么原因圖片不能加載我們可以用一些文本來代替.這就是alt屬性的作用 - 如果圖片加載失敗就顯示alt屬性中的文本.好了,讓我們再次運行Django服務訪問http://127.0.0.1:8000/rango.幸運的話可以看到下圖.模板========================mysite├── app1│   ├── __init__.py│   ├── admin.py│   ├── migrations│   │   └── __init__.py│   ├── models.py│   ├── tests.py│   ├── urls.py │   ├── apps.py│   └── views.py├── templates │   ├── base.xml 新增│   ├── nav.xml 新增│   └── app1│    └── index.html新增├── static │   ├── images │   └── bootstrap ├── manage.py└── mysite    ├── __init__.py    ├── settings.py     ├── urls.py    └── wsgi.pyindex.xml{% extends 'base.html' %} {% block title %}My-SSOC{% endblock %} {% block content %}        hello world! <p class="text-warning">kkkkkkkkkkkk warning class</p><p class="text-danger">fffffffff danger class</p>{% endblock %}base.html<!DOCTYPE html><html>   <head>      <meta charset="utf-8">      <title>{% block title %}SSOC{% endblock %} - wangyu</title>      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/CSS/bootstrap.min.css" rel="stylesheet"> 	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>    </head>   <body>	{% include 'nav.html' %}	{% block content %}	<div>This is origin content</div>	{% endblock %}   </body></html>nav.html<nav class="navbar navbar-default" role="navigation">	<div class="container-fluid">	<div class="navbar-header">		<a class="navbar-brand" href="#">SSOC</a>	</div>	<div>		<ul class="nav navbar-nav">			<li class="dropdown">				<a href="#" class="dropdown-toggle" data-toggle="dropdown">haha<b class="caret"></b></a>					<ul class="dropdown-menu">					<li><a href="#">a1</a></li>					<li><a href="#">a22</a></li>					<li><a href="#">Jaf Report</a></li>					<li class="divider"></li>					<li><a href="#">df</a></li>					<li class="divider"></li>					<li><a href="#">bg</a></li>				</ul>			</li>			<li><a href="#">SVN</a></li>			<li class="dropdown">				<a href="#" class="dropdown-toggle" data-toggle="dropdown">java<b class="caret"></b></a>				<ul class="dropdown-menu">					<li><a href="#">jmeter</a></li>					<li><a href="#">EJB</a></li>					<li><a href="#">Jasper Report</a></li>					<li class="divider"></li>					<li><a href="#">divide</a></li>					<li class="divider"></li>					<li><a href="#">another</a></li>				</ul>			</li>		</ul>	</div>	</div></nav>