WEB框架之-Django入門

時間 2019-11-11

標籤 web 框架 django 入門欄目 HTML 简体版

原文原文鏈接

安裝Django

pip3 install diangocss

安裝好以後， python安裝目錄下的Scripts目錄下會有：django-admin.exehtml

添加 C:\Program Files\Python36\Scripts 到環境變量path中python

建立project

注意：如上所示，若是不切換指定目錄，則會在當前目錄C:\Users\Administrator下建立名爲mysite的工程jquery

建立成功後，會在C:\Program Files\Python36\Scripts目錄下生成一個mysite目錄，mysite目錄結構以下：nginx

mysite
        -mysite
                -__init__.py
                -settings.py      #配置文件
                -urls.py          #url對應關係
                -wsgi.py          #遵循WSGI規範，實際用uwsig+nginx
        -manage.py                #管理Django規範，這裏能夠執行：
                                            --python manage.py
                                            --python manage.py start xx
                                            --python manage.py makemigrations
                                            --python manage.py migrate

啓動django工程

經過python manage.py runserver 就能夠啓動上述建立的mysite，這裏也能夠加參數 127.0.0.1:8001，這樣就能定義啓動的端口，啓動過程以下：數據庫

而後登錄http://127.0.0.1:8000/django

也能夠經過Pycharm建立Django工程，步驟以下：app

Pycharm啓動Django工程，步驟以下：post

也能夠先指定端口單元測試

啓動Django工程

建立app

python manage.py startapp app名稱

也能夠在pycharm的console中去建立

建立完後生成以下的目錄結構：

在views.py裏添加以下代碼：

from django.shortcuts import HttpResponse

def home(request):
    return HttpResponse('<h1>CMDB</h1>')

同時在mysite目錄下urls.py裏添加以下：

from cmdb import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('ab.html/', views.home),
]

登陸成功界面顯示以下：

關於app目錄的解釋：

migrations 存放修改表結構時的記錄

admin.py Django爲咱們提供的後臺管理

apps.py 配置當前app

models.py ORM，寫指定的類經過命令就能夠建立數據庫結構

tests.py 用於作單元測試

views.py 業務代碼

寫一個簡單的例子

首先註釋掉settings.py配置文件中的一行內容：

在cmdb下的views.py裏寫以下代碼：

from django.shortcuts import render

def login(request):
    return render(request,'login.html')

能夠把login.html文件放到templates目錄下

這裏的login.html文件不用指定絕對路徑，只須要在settings.py配置文件中配置一下路徑便可：

在mysite目錄下的urls.py寫以下代碼：

from cmdb import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/', views.login),
]

整個目錄以下：

登陸效果以下：

關於靜態文件的存放

目錄結構以下：

將css以及js放在一個static目錄下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/common.css" />
    <style>
        label{
            width: 80px;
            text-align: right;
            display: inline-block;
        }
    </style>
</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" value="提交" />
        </p>
    </form>
    <script src="/static/jquery-1.12.4.js"></script>
</body>
</html>

static目錄下common.css文件中配置樣式：

body{
    background-color: darkgray;
}

settings.py配置文件中的配置：

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),    #這是一個元組，因此逗號必定要加，不加Django就啓動不了
)

效果圖以下：

獲取用戶的信息

views.py中的代碼以下：

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

def login(request):
    print(request.method)
    error_msg= ""
    if request.method == "POST":
        user = request.POST.get("user",None)
        pwd = request.POST.get("pwd",None)
        print(user,pwd)
        if user == "root" and pwd == "123":
            return redirect('http://www.baidu.com')
        else:
            error_msg = "用戶名或密碼錯誤"
    return render(request,'login.html',{'error_msg':error_msg})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/common.css" />
    <style>
        label{
            width: 80px;
            text-align: right;
            display: inline-block;
        }
    </style>
</head>
<body>
    <form action="/login/" method="post">
        <p>
            <label for="username">用戶名：</label>
            <input id="username" name="user" type="text" />
        </p>
        <p>
            <label for="password">密碼：</label>
            <input id="password" name="pwd" type="text" />
            <input type="submit" value="提交" />
            <span style="color: red;">{{ error_msg }}</span>
        </p>
    </form>
    <script src="/static/jquery-1.12.4.js"></script>
</body>
</html>

效果以下：

若是輸入的用戶名或密碼不匹配，則

若是正確，則會跳轉到百度。

下面是一個完整的例子

views.py中的代碼以下：

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

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


USER_LIST =[
    {"username":"tom","gender":"男","email":"tom@163.com",},
    {"username":"jack","gender":"男","email":"jack@126.com",},
    {"username":"lucy","gender":"女","email":"lucy@163.com",}
]

def home(request):
    if request.method == "POST":
        u = request.POST.get('username')
        g = request.POST.get('gender')
        e = request.POST.get('email')
        temp = {"username":u,"gender":g,"email":e}
        USER_LIST.append(temp)
    return render(request,'home.html',{'user_list':USER_LIST})

urls.py中的代碼以下：

from django.contrib import admin
from django.urls import path
from cmdb import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/', views.login),
    path('home/', views.home),

]

home.html代碼以下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin: 0">

    <div style="height: 48px;background-color: #dddddd"></div>
    <div>
        <form action="/home/" method="POST">
            <input type="text" name="username" placeholder="用戶名">
            <input type="text" name="gender" placeholder="性別">
            <input type="text" name="email" placeholder="郵箱">
            <input type="submit" value="添加">
        </form>
    </div>
    <div>
        <table border="1">
            <thead>
            <tr>
                <th>姓名</th>
                <th>性別</th>
                <th>郵箱</th>
            </tr>
            </thead>
            <tbody>
                {% for row in user_list %}
                    <tr>
                        <td>{{ row.username }}</td>
                        <td>{{ row.gender }}</td>
                        <td>{{ row.email }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/common.css" />
    <style>
        label{
            width: 80px;
            text-align: right;
            display: inline-block;
        }
    </style>
</head>
<body>
    <form action="/login/" method="post">
        <p>
            <label for="username">用戶名：</label>
            <input id="username" name="user" type="text" />
        </p>
        <p>
            <label for="password">密碼：</label>
            <input id="password" name="pwd" type="text" />
            <input type="submit" value="提交" />
            <span style="color: red;">{{ error_msg }}</span>
        </p>
    </form>
    <script src="/static/jquery-1.12.4.js"></script>
</body>
</html>