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

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

2023-04-25 18:02:04

目錄

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

一、前期的組態檔以及連線MySQL的基本準備

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

三、將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路由層中加入檢視函數的路徑，後面都是如此

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

增----註冊功能

  • 首先在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，就可以得到以下頁面，當然在資料展示頁面點選註冊也可以跳到當頁面
  • 在輸入框輸入新使用者，則會看到新使用者增加

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

查----登入功能

  • 首先在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，就可以得到以下頁面，當然在資料展示頁面點選登入也可以跳到當頁面

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

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

  • 首先在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錯誤

  • 解決方法

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

刪----刪除功能 （複習前端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>

Django請求生命週期流程圖

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

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

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


瀏覽器
	傳送請求(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