Django使用bootstrap實(shí)例

2024-04-27 15:18:47

字體：大中小

供稿：網(wǎng)友

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

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中增加內(nèi)容    url(r'^app1/', include('app1.urls')),app1中新增的urls.py中內(nèi)容from django.conf.urls import patterns, urlfrom app1 import viewsurlpatterns = [        url(r'^$', views.index, name='index')]為了建立映射,我們用到了tuple.在Django里必須用urlpatterns來命名這個元組.這個urlpatterns元組包含一些django.conf.urls.url()函數(shù)的調(diào)用,而每個函數(shù)里都有一個唯一的映射.在上面的代碼里,我們只用了url()一次,所以我們只映射了一個URL.django.conf.urls.url()函數(shù)的第一個參數(shù)是正則表達(dá)式^$,指的是匹配一個空字符串.所有匹配這個模式的URL都會映射到views.index()這個視圖.用戶的請求信息會包含在HttpRequest對象里作為參數(shù)傳遞給視圖.我們給url()函數(shù)可選參數(shù)name賦值為index.index.html內(nèi)容如下<!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 %}標(biāo)簽來使用靜態(tài)媒體.所以我們才可以用{% static "rango.jpg" %在模板里調(diào)用static文件.Django模板標(biāo)簽用{ }來表示.在這個例子里我們用static標(biāo)簽,它將會把STATIC_URL和rango.jpg連接起來,如下所示.<img src="/static/images/rango.jpg" alt="Picture of Rango" /> <!-- New line -->如果因?yàn)槭裁丛驁D片不能加載我們可以用一些文本來代替.這就是alt屬性的作用 - 如果圖片加載失敗就顯示alt屬性中的文本.好了,讓我們再次運(yùn)行Django服務(wù)訪問http://127.0.0.1:8000/rango.幸運(yùn)的話可以看到下圖.模板========================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>