Django框架簡單搭建增刪改查頁面 Django請求生命週期流程圖

南柯unique發表於2023-04-25
Django框架流程圖

目錄

Django框架簡單搭建增刪改查頁面

一、前期的配置檔案以及連線MySQL的基本準備

二、在資料庫中準備好資料

image

三、將MySQL的資料展示到頁面（簡單認識HTML模板語法 for迴圈）

  • 在Django專案views.py檔案中利用ORM模型語法查詢所有的資料
def user_list(request):
    # 1.獲取user表中所有的資料展示到html頁面上
    user_data = models.UserInfo.objects.filter()  # 括號內不填篩選條件等價於查所有
    # QuerySet[物件1，物件2]   列表套物件
    # 2.利用模版語法傳遞資料到html頁面並完成處理最終返回給瀏覽器展示
    return render(request,'user_list.html',{'user_data':user_data})

四、建立使用者資料展示HTML頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
{#    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">#}
{#    <script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>#}
    {% load static %}

    <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <h1 class="text-center">資料展示頁</h1>
            <div class="col-md-8 col-md-offset-2">

                <table class="table table-hover table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Password</th>
                            <th>Age</th>
                            <th class="text-center">Operation</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for user_obj in user_data %}  # 接收Django提供的模板語法傳過來的字典資料 
                        <tr>
                            <td>{{ user_obj.id }}</td>
                            <td>{{ user_obj.name }}</td>
                            <td>{{ user_obj.password }}</td>
                            <td>{{ user_obj.age }}</td>
                            <td class="text-center">
                                <a href="" class="btn btn-primary btn-xs">編輯</a>
                                <a href="" class="btn btn-danger btn-xs">刪除</a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            <a href="/user_login/" class="btn btn-block btn-success">登入使用者</a>
            <a href="/user_register/" class="btn btn-block btn-danger">註冊使用者</a>

            </div>
        </div>

    </div>
</body>
</html>

五、在urls.py路由層中加入檢視函式的路徑，後面都是如此

image

六、在瀏覽器位址列輸入http://127.0.0.1:8010/user_list檢視資料展示頁面

image

增----註冊功能

  • 首先在views.py中寫好一個簡單的註冊檢視函式,記得寫好後去路由層寫一下功能路徑
def user_register(request):
    #2.根據不同的請求方式做不同的處理
    if request.method == 'POST':
        # 3.獲取使用者相關資料
        username_data = request.POST.get('name') # name age password是前端表單中name屬性定義的
        age_data = request.POST.get('age')        # 這裡的資料是前端頁面使用者資料的資料
        password_data = request.POST.get('password')
        # 繼續一些小的判斷
        if len(username_data) == 0 or len(password_data) == 0:
            return HttpResponse("使用者名稱或年齡不能為空")
        user_data = models.UserInfo.objects.filter(name=username_data)   # 使用者輸入的username拿去和資料庫中已經存在的使用者比較
        if user_data:
            return HttpResponse('使用者名稱已經存在')             # 不存在將用模型語法建立一個新使用者資料
        models.UserInfo.objects.create(name=username_data,age=age_data,password=password_data)
        # 重定向到資料展示頁
        return redirect('/user_list/')
    # 1.先返回一個獲取註冊新使用者資料的html頁面
    return render(request, 'register.html')
  • 然後寫一個註冊使用者的HTML頁面,注意修改表單的請求方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
{#    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">#}
{#    <script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>#}
     {% load static %}

    <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <h1 class="text-center">註冊使用者</h1>
            <div class="col-md-6 col-md-offset-3">
                <form action="" method="POST">
                    <p>使用者名稱:
                        <input type="text" name="name" class="form-control">
                    </p>
                    <p>年齡:
                        <input type="text" name="age" class="form-control">
                    </p>
                    <p>密碼:
                        <input type="text" name="password" class="form-control">
                    </p>
                    <input type="submit" value="註冊" class="btn btn-warning btn-block">
                </form>

            </div>

        </div>
    </div>

</body>
</html>
  • 然後去瀏覽器位址列輸入http://127.0.0.1:8010/register，就可以得到以下頁面，當然在資料展示頁面點選註冊也可以跳到當頁面
    image
  • 在輸入框輸入新使用者，則會看到新使用者增加
    image
    image

ps:注意這裡的a是get請求
image

查----登入功能

  • 首先在views.py中寫好一個簡單的登入檢視函式,記得寫好後去路由層寫一下路徑
def user_login(request):
    # 2.根據不同的請求方式做不同的處理
    if request.method == 'POST':
        # 3.獲取使用者相關資料
        username_data = request.POST.get('name')   # 這裡傳的是input中name的值
        age_data = request.POST.get('age')
        password_data = request.POST.get('password')
        # 繼續一些小的判斷
        if len(username_data) == 0 or len(password_data) == 0:
            return HttpResponse("使用者名稱或年齡不能為空")
        user_data = models.UserInfo.objects.filter(name=username_data,password=password_data)    # 這裡是拿出資料庫的值（等號前面）和瀏覽器的值比較
        if user_data:
            return HttpResponse('登入成功')
        return HttpResponse('該使用者不存在')
        # models.UserInfo.objects.create(name=username_data, age=age_data, password=password_data)
        # 重定向到資料展示頁
        # return redirect('/user_list/')
    # 1.先返回一個獲取註冊新使用者資料的html頁面
    return render(request, 'login.html')
  • 然後寫一個登入使用者的HTML頁面,注意修改表單的請求方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
{#    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">#}
{#    <script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>#}
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <h1 class="text-center">登入使用者</h1>
            <div class="col-md-6 col-md-offset-3">
                <form action="" >
                    <p>使用者名稱:
                        <input type="text" name="name" class="form-control">
                    </p>
                    <p>密碼:
                        <input type="text" name="password" class="form-control">
                    </p>
                    <input type="submit" value="登入" class="btn btn-danger btn-block">
                </form>

            </div>
        </div>
    </div>
</body>
</html>

  • 然後去瀏覽器位址列輸入http://127.0.0.1:8010/login，就可以得到以下頁面，當然在資料展示頁面點選登入也可以跳到當頁面
    image

  • 在輸入框輸入存在的使用者名稱和密碼，則會看到頁面會返回到HttpResponse結果
    image

改----編輯功能 （稍微複雜一丟丟）

  • 首先在views.py中寫好一個簡單的編輯檢視函式,記得寫好後去路由層寫一下功能路徑
def user_edit_func(request):
    # 1.獲取使用者想要編輯的資料主鍵值
    target_edit_id = request.GET.get('edit_id')
    # 4.根據不同的請求處理不同的邏輯
    if request.method == 'POST':
        name_data = request.POST.get('name')
        age_data = request.POST.get('age')
        if len(name_data) == 0 or len(age_data) == 0:
            return HttpResponse('使用者名稱或年齡不能為空')
        models.User.objects.filter(pk=target_edit_id).update(name=name_data, age=age_data)
        # 5.重定向到資料展示頁
        return redirect('/user_list/')
    # 2.根據主鍵值獲取對應的資料
    target_edit_obj = models.User.objects.filter(pk=target_edit_id)[0]  # QuerySet [物件1,物件2,...]
    # 3.返回一個編輯資料的頁面 並且該頁面上需要提前展示出原來的資料
    return render(request, 'userEditPage.html', {'target_edit_obj': target_edit_obj})
  • 然後寫一個編輯使用者的HTML頁面,注意修改表單的請求方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
</head>
<body>
        <div class="container">
        <div class="row">
            <h1 class="text-center">資料編輯頁</h1>
            <div class="col-md-6 col-md-offset-3">
                <form action="" method="post">
                    <p>name:
                        <input type="text" name="name" class="form-control" value="{{ target_edit_obj.name }}">
                    </p>
                    <p>age:
                        <input type="text" name="password" class="form-control" value="{{ target_edit_obj.password }}">
                    </p>
                    <input type="submit" value="編輯使用者" class="btn btn-primary btn-block">
                </form>
            </div>
        </div>
    </div>
</body>
</html>

ps:這裡需要注意的兩個點，也是我第一次寫的時候，由於邏輯沒有理清，少寫了edit_id引數在user_list.html檔案中需要用get請求傳的引數，所以出現了IndexError: list index out of range錯誤
image

  • 解決方法
    image
    這裡注意傳點選的id引數
  • 在瀏覽器位址列搜尋編輯頁面的時候，不能直接http://127.0.0.1:8010/user_edit/因為沒有id，拿不到一個物件，所以列表為空，索引超出了範圍
    image
  • 只需要在位址列輸入http://127.0.0.1:8010/user_edit/?edit_id=2即可，展示頁面如下
    image

刪----刪除功能 （複習前端js的冒泡事件）

  • 首先在views.py中寫好一個簡單的編輯檢視函式,記得寫好後去路由層寫一下功能路徑
def user_delete(request):
    target_delete_id = request.GET.get('delete_id')
    models.UserInfo.objects.filter(pk=target_delete_id).delete()
    return redirect('user_list')
  • 然後去user_list.html頁面修改一下刪除按鈕a便籤的href屬性,注意修改表單的請求方式，給該便籤繫結一個點選事件
 <td class="text-center">
	 <a href="/user_edit/?edit_id={{ user_obj.pk }}" class="btn btn-primary btn-xs">編輯</a>
	 <a href="/user_delete/?delete_id={{ user_obj.pk }}" class="btn btn-danger btn-xs delBtn">刪除</a>
</td>

ps: 二次確認冒泡事件

 <script>
        $('.delBtn').click(function () {
          let res = confirm('你確定要刪除嘛？')
          if (res){
                                {# 如果點選確定 則執行事件冒泡 #}
          }else{
              return false   {# 如果點選取消 則阻止事件冒泡 #}
          }
        })
    </script>

image

Django請求生命週期流程圖

1.Django請求的生命週期的含義

  • Django請求生命週期是指：當使用者在瀏覽器上輸入URL到使用者看到網頁的這個時間段內，Django後臺所發生的事情。

2.Django請求的生命週期圖解及流程

image
image

瀏覽器
	傳送請求(HTTP協議)
 
web服務閘道器介面
	1.請求來的時候解析封裝
		響應走的時候打包處理
 
	2.django預設的wsgiref模組不能承受高併發 最大隻有1000左右
		上線之後會替換成uwsgi來增加併發量
	
	3.WSGI跟wsgiref和uwsgi是什麼關係
		WSGI是協議
		wsgiref和uwsgi是實現該協議的功能模組
 
django後端
	1.django中介軟體
		類似於django的保安 門戶
		
	2.urls.py  路由層
		識別路由匹配對應的檢視函式
	
	3.views.py	檢視層
		網站整體的業務邏輯
		
	4.templates資料夾		模版層
		網站所有的html檔案
	
	5.models.py			   模型層
		ORM

相關文章