Python Web框架Django學習（二）

時間 2021-01-30

標籤 html 前端 python web 數據庫 django 瀏覽器服務器 app 框架欄目 Python 简体版

原文原文鏈接

python web框架Django學習（二）html

目錄：前端

3、Django建立APPpython

4、建立登陸頁面，實現用戶交互，後臺管理用戶（非數據庫方式）web

=================================================================================================
數據庫

3、Django建立Appdjango

=================================================================================================瀏覽器

一、首先使用django-admin建立好一個django項目服務器

django-admin startproject test01app

二、在test01目錄下面執行命令框架

D:\python2.7.13\exercise\test01>python manage.py startapp cmdb #app名稱爲cmdb

D:\python2.7.13\exercise\test01>python manage.py startapp openstack

三、查看目錄（使用pycharm打開查看），確認是否建立成功！

四、實現瀏覽器中訪問項目cmdb

1) 新建立的cmdb App中的目錄有：

2) 修改cmdb中的views.py文件，具體配置以下：

from django.shortcuts import render
from django.shortcuts import HttpResponse  #加入

# Create your views here.
def home(request):                         #定義函數home
    return HttpResponse('<h1>這是個人第一個Django--App程序！！！<h1>')                        HttpResponse()

3) 修改項目中的urls.py文件

from django.conf.urls import url
from django.contrib import admin
from django.shortcuts import HttpResponse  #導入HttpServer模塊
import time                                #加入
from cmdb import views                    #導入cmdb app中的views
def home(request):                         #定義函數home
    return HttpResponse('<h1>這是個人第一個Django程序！！！<h1>')

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index.html',home),           #添加index.html
    url(r'^cmdb',views.home),            #將cmdb app添加到url中
]

4) 開啓django服務器：

5) 瀏覽器訪問測試：

==================================================================================================

4、建立登陸頁面，實現用戶交互，後臺管理用戶（非數據庫方式）

=================================================================================================

一、在項目test01目錄下面建立一個templates目錄，而且在templates目錄中建立一個html文件index.html。

二、在html文件中寫入內容以下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

</head>
<body>
<form action="/login" method="post">
<p>
<label for="username">請輸入用戶名</label>
<input id="username" type="text" />
</p>
<p>
<label for="password">請輸入密碼</label>
<input id="password" type="text" />
<input type="submit" values="提交"/>
</p>

</form>
</body>
</html>

三、在APP文件cmdb目錄下的views.py文件中寫入如下內容：

from django.shortcuts import HttpResponse #加入

# Create your views here.
def login(request): #定義函數home
f = open('templates/index.html','r',encoding='utf8')
data = f.read()
f.close()
return HttpResponse(data)

【注意】：能夠將views.py中的以上內容修改成：

from django.shortcuts import render

def login(request):

return render(request,'index.html')

而且修改項目文件test01中的setting.py中的TEMPLATES中的DIRS，修改成：

'DIRS': [os.path.join(BASE_DIR,'templates')],

表示默認模板位置在templates目錄下面。

四、在項目文件夾test01下面的urls.py文件中加入

urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index.html',home), #添加index.html
url(r'^login',views.login), #將cmdb app添加到url中
]

五、開啓django服務器，瀏覽器訪問效果爲：

到此，瀏覽器可以正常訪問前端頁面，可是不能實現用戶交互！！！

下面將實現用戶輸入正確的用戶名和密碼時跳轉到百度首頁；輸入錯誤的用戶名或者密碼時，提示「用戶名或密碼錯誤」

六、在app文件cmdb中的views.py中加入：

from django.shortcuts import render
from django.shortcuts import redirect

def login(request):

if request.method == "POST":
user = request.POST.get('user',None) #獲得用戶輸入的用戶名
pwd = request.POST.get('pwd', None) #獲得用戶輸入的密碼
print(user,pwd) #在後臺打印用戶輸入的用戶名和密碼
if user == 'root' and pwd == '123456': #判斷
return redirect('http://www.baidu.com') #跳轉到百度
return render(request, 'index.html')

當用戶輸入用戶名爲root，密碼爲123456時，跳轉到百度首頁！！！

七、繼續設計當用戶輸入錯誤信息是，返回「用戶名或密碼錯誤」

1) 在index.html文件中加入一行：<span style="color: red;">` error_message `</span>

加入後，index.html文件爲：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
label{
width: 120px;
text-align: right;
display: inline-block;
}
</style>
</head>
<body>
<form action="/login" method="post">
<p>
<label for="username">請輸入用戶名:</label>
<input id="username" type="text" name="user"/>
</p>
<p>
<label for="pwd">請輸入密碼:</label>
<input id="pwd" type="password" name="pwd"/>
<input type="submit" values="提交" />
<span style="color: red;">` error_message `</span>
</p>

</form>
</body>
</html>

2）在app文件views.py文件中修改成：

3) 當輸入錯誤信息時，瀏覽器訪問效果爲：

到此，可以實現用戶名爲root密碼爲123456的用戶登陸，而且跳轉到百度首頁。並且實現了當用戶輸入錯誤的用戶名或密碼時，提示「用戶名或者密碼錯誤」！

下面將實現後臺管理用戶。

八、首先在templates目錄中建立一個名爲home.html的HTML文件，文件內容以下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr>
<td>張三</td>
<td>1992</td>
<td>女</td>
</tr>
<tr>
<td>李四</td>
<td>1993</td>
<td>男</td>
</tr>
<tr>
<td>王五</td>
<td>1997</td>
<td>男</td>
</tr>
</table>
</body>
<html>

九、在APP文件cmdb中的views.py中定義home函數，並把redirect中的地址改成/home

十、在項目文件test01的urls.py中加入映射關係from django.conf.urls import url

from django.contrib import admin
from django.shortcuts import HttpResponse #導入HttpServer模塊
import time #加入
from cmdb import views #導入cmdb app中的views
def home(request): #定義函數home
return HttpResponse('<h1>這是個人第一個Django程序！！！<h1>')

urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index.html',home), #添加index.html
url(r'^login',views.login), #將cmdb app添加到url中
url(r'^home',views.home)
]

十一、瀏覽器測試

1) 瀏覽器中輸入用戶登陸地址：127.0.0.1:8000/login

2) 輸入正確的用戶名和密碼，正常跳轉到127.0.0.1:8000/home頁面

到此，當用戶輸入正確的用戶名和密碼時，可以實現跳轉，而且可以可以看到以前在home.html文件中輸入的三位用戶的信息，可是這些用戶的信息沒法靈活改變，已經在html文件中寫死了。

下面將進行將後臺列表中的用戶，用循環的方式，打印在前端頁面上。

十二、首先須要在home.html文件中添加一個循環，添加後home.html文件以下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
{% for row in user_list %}
<tr>
<td> ` row`.`username `</td>
<td> ` row`.`gender `</td>
<td> ` row`.`email `</td>
</tr>
{% endfor %}
<tr>
<td>李四</td>
<td>1993</td>
<td>男</td>
</tr>
<tr>
<td>王五</td>
<td>1997</td>
<td>男</td>
</tr>
</table>
</body>
<html>

【注意】：

1) Django中在html文件中加入文件的方法：

{% for row in user_list %} #循環的開始，須要一對大括號，而且裏面有兩個%
<tr>
<td>` row`.`username `</td>
<td>` row`.`gender `</td>
<td>` row`.`email `</td>
</tr>
{% endfor %} #循環的結尾也得有一對大括號和兩個%

2) row表示一個字典

3) 引入單變量值時須要兩個大括號

{% for row in user_list %}
<tr>
<td>` row`.`username `</td>
<td>` row`.`gender `</td>
<td>` row`.`email `</td>
</tr>
{% endfor %}

這裏的username、gender和email與APP文件中views.py中的username、gender、email相對應。

1三、修改APP文件中的views.py文件，加入USER_LIST列表和一個循環，修改後的views.py文件以下：

from django.shortcuts import render
from django.shortcuts import redirect

def login(request):
error_message=""
if request.method == "POST":
user = request.POST.get('user',None)
pwd = request.POST.get('pwd', None)
print(user,pwd)
if user == 'root' and pwd == '123456':
return redirect('/home')
else:
error_message = "用戶名或密碼錯誤"

return render(request, 'index.html',{'error_message':error_message})

USER_LIST=[
{'username':'qiuuuu','email':'abcdefg','gender':'male'}
]

for index in range(20):
temp = {'username':'qiuuuu'+str(index),'email':'abcdef','gender':'male'}
USER_LIST.append(temp)
#str(index)表示將index的值變爲字符型，range(20)表示數字1到20之間的整數從小到大排列。
def home(request):
return render(request,'home.html',{'user_list':USER_LIST})

1四、在項目文件test01中的urls.py中加入對應關係，加入後的urls.py文件以下：

from django.conf.urls import url
from django.contrib import admin
from django.shortcuts import HttpResponse #導入HttpServer模塊
import time #加入
from cmdb import views #導入cmdb app中的views
def home(request): #定義函數home
return HttpResponse('<h1>這是個人第一個Django程序！！！<h1>')

urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index.html',home), #添加index.html
url(r'^login',views.login), #將cmdb app添加到url中
url(r'^home',views.home),
]

1五、瀏覽器輸入127.0.0.1:8000/login，而後輸入正確的用戶名和密碼後跳轉到home.html頁面的效果爲：