1. 程式人生 > >Django----做一個簡單網頁的教程(適合初學者)

Django----做一個簡單網頁的教程(適合初學者)

method elf learning 也有 rmi itl color ec2 路由

這篇文字適合剛學習Django的同學,如果比較熟的就不用看了。

以下都是講在windows上的部署情況;

準備:

1、python3.6

2、pycharm profession(專業版)

3、安裝Django模塊

以上的安裝就不講了,比較簡單,網上也有很多教程。都去官網下載安裝即可。

前言:

學習django框架其實就是學習它的文件目錄,目錄下有一些必須的模塊和包,當然你也可以自己在這些目錄下再新建目錄或模塊和包。

**一、我們打開pycharm新建一個Django工程(也可以直接在terminal下用指令django-admin startproject xxx創建)

File---New Project**

技術分享圖片

建好好會自動生成一個目錄框架。那麽來了解下這個框架裏文件的作用。

技術分享圖片

二、編寫業務邏輯

新建成功工程後views.py文件裏是空的,需要自己編寫業務邏輯。

from django.shortcuts import HttpResponse #導入HttpResponse模塊

def index(request):#request是必須帶的實例。類似class下方法必須帶self一樣
    return HttpResponse("Hello World!!")#通過HttpResponse模塊直接返回字符串到前端頁面

三、配置url路由

from laomomo import views#導入views模塊
from django.conf.urls import url

urlpatterns=[
    url(r‘^index/‘,views.index)#配置當訪問index/時去調用views下的index方法
]

四、運行server並訪問

terminal下執行 python manage.py runserver 這樣執行默認的路徑是127.0.0.1:8080

指定端口或地址就再後面寫上,如:python manage.py runserver 127.0.0.1:8888

然後瀏覽器訪問http://127.0.0.1:8888

技術分享圖片

這裏的Hello World!!就是views.py文件下index方法通過HttpResponse返回到前端的。

問題來了,這樣感覺有點簡單,如果要顯示一些數據呢?怎麽辦?那麽我們就需要寫html文件來承載。

五、修改views.py裏的index方法如下

from django.shortcuts import render#導入render模塊

#先定義一個數據列表,當然後面熟了可以從數據庫裏取出來
list = [{"name":‘good‘,‘password‘:‘python‘},{‘name‘:‘learning‘,‘password‘:‘django‘}]

def index(request):

    return render(request,‘index.html‘,{‘form‘:list})#通過render模塊把index.html這個文件返回到前端,並且返回給了前端一個變量form,在寫html時可以調用這個form來展示list裏的內容

六、編輯html文件

新建成功工程後templates文件目錄下是空的,我們需要在該目錄下新建一個html文件來把內容展示到前端


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    <body>
    <table border="1">
        <thead>
        <tr>
            <td>用戶名</td>
            <td>密碼</td>
        </tr>
        </thead>
        {%for line in form%}
            <tr>
                <td>{{line.name}}</td>
                <td>{{line.password}}</td>
            </tr>
        {% endfor %}
    </table>
    </body>

</html>

html裏要寫if或for等語句時用{%%},調用變量時用{{ }}括號

我們重新運行下server,訪問瀏覽器應該會展示list裏的數據了。
技術分享圖片

好,到這裏我們可以展示後臺設定好的數據給前端。這好像也不太友好。我們來做一個前端可以輸入用戶名和密碼,然後把輸入的用戶和密碼展示出來。

七、重新編寫html文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    <body>
    <table border="1">
        <form action="/index/" method="post">
            {% csrf_token %}
            <P>
                <label >用戶名:</label>
                <input type="text" name =‘name‘/>
            </P>
            <P>
                <label>密碼:</label>
                <input type="text" name=‘password‘/>
            </P>
            <p><input type="submit" value="提交"/></p>
        </form>
        <thead>
        <tr>
            <td>用戶名</td>
            <td>密碼</td>
        </tr>
        </thead>
        {%for line in form%}
            <tr>
                <td>{{line.name}}</td>
                <td>{{line.password}}</td>
            </tr>
        {% endfor %}
    </table>
    </body>

</html>

這裏加入了用戶名和密碼的輸入框和一個提交按鈕,設置的方法試post,下面我們就需要編寫views.py下的index方法來獲取這個post過來的數據,然後返回給前端顯示。

八、修改views.py下的index方法:

from django.shortcuts import render#導入render模塊

#先定義一個數據列表,當然後面熟了可以從數據庫裏取出來
list = [{"name":‘good‘,‘password‘:‘python‘},{‘name‘:‘learning‘,‘password‘:‘django‘}]

def index(request):
    #獲取前端post過來的用戶名和密碼
    name = request.POST.get(‘name‘,None)
    password = request.POST.get(‘password‘,None)

    #把用戶和密碼組裝成字典
    data = {‘name‘:name,‘password‘:password}
    list.append(data)

    return render(request,‘index.html‘,{‘form‘:list})#通過render模塊把index.html這個文件返回到前端,並且返回給了前端一個變量form,在寫html時可以調用這個form來展示list裏的內容

再次運行server通過瀏覽器訪問就會有提交的數據實時展示了的效果了

技術分享圖片

到這裏就完成了一個簡單的網頁制作的過程,有問題可以向我提問。

Django----做一個簡單網頁的教程(適合初學者)