# 課程鏈接
全新 django3 入門到項目實戰（零基礎學django、項目開發實踐、大學畢業設計均可用）_哔哩哔哩_bilibili
# 課程覆蓋
任務訂單模塊_（5-1 ~ 5-4 的課程）
# （1）Django 的內容回顧。
1）知識點回顧，直接上圖就好了。
2）配置數據庫的知識回顧。
3）路由和視圖函數，以及中間件。
4）orm 操作
5）任務列表、提交數據的第一種實現方法，就是以往的。這裡不贅述。
#
# （1）表結構設計
這一個部分直接上代碼。
# （2）前端頁面的代碼
1）模態響應框。我們打開 bootstrap 的官網，再插件處可以找到模態響應框，我們選擇動態的。我們直接復制到我們的 html 代碼即可。具體代碼如下。鏈接：JavaScript 插件 · Bootstrap v3 中文文檔 | Bootstrap 中文網
2）前端的 js 代碼。
3）測試前端的模態響應框。
# （1）對話框內容的編寫
1）前端的 html 代碼的編寫。
2）我們還是基於 JQuery 綁定事件來編寫。詳細代碼如下：
{% block js %} <script type="text/javascript"> //基於 jQuery 寫的，等待頁面加載完成，然後自動執行下面的函數 $(function () { bindAddEvent(); formAddEvent(); //發送ajax數據到後台 errorShowEven(); //顯示錯誤信息 }) function bindAddEvent() { //觸發點擊事件，則執行函數內容 $("#btnAdd").click(function () { //官方文檔給的點擊顯示模態對話框的方法 $('#myModal').modal('show'); }) } function formAddEvent() { $("#btnSave").click(function () { $(".error-msg").empty() $.ajax({ url: '/order/add/', type: "post", data: $("#formAdd").serialize(), dataType: "JSON", success: function (res) { if (res.status) { alert("保存成功") }else { $.each(res.error, function (name, err){ {#console.log(name, err)#} $("#id_" + name).next().text(err[0]) }) } } }) }) } </script> {% endblock %}3）視圖函數的編寫。這裡主要說一下 datetime 模塊，datetime.now() 是獲取當前時間的，如果想要轉換為字符串和標准格式就要調用 datetime.now().shrftime("%Y%m%d%H%M%S")，這樣子的話時間格式就能變成 202206140101430，分別對應年月日時分秒。還有一點，就是如果我們想添加一個不准用戶填寫，但又不能為空的數據，就可以給 form.instance.字段名，進行賦值。這樣子 form 就多了一個數據字段。
# -*- coding=utf-8 -*- # github: night_walkiner # csdn: 潘迪仔 import json from app01 import models from django.shortcuts import render from django.http import JsonResponse from django.views.decorators.csrf import csrf_exempt from app01.utils.bootstrap import BootStrapModelForm class OrderModelForm(BootStrapModelForm): class Meta: model = models.Order fields = "__all__" exclude = ["oid"] # 如果想要排除某個字段，就可以使用這個變量,我們排除掉 oid，因為我們要隨機生成 # 顯示訂單列表 def order_list(request): form = OrderModelForm() context = { "form": form } return render(request, "order_list.html", context) import random from datetime import datetime # 請求添加 @csrf_exempt def order_add(request): ret = { "code": 1000, "status": True } form = OrderModelForm(data=request.POST) if form.is_valid(): # 添加 oid 的值 # datetime.now() 是獲取當前時間, .strftime() 方法就是將時間轉化為字符串 oid = datetime.now().strftime("%Y%m%d%H%M%S") + str(random.randint(1000, 9999)) # 給 form 的某個字段加值, 就是 form.instance.字段名 form.instance.oid = oid form.save() return JsonResponse(ret) ret["code"] = 1002 ret["status"] = False ret["error"] = form.errors return JsonResponse(ret)
# （1）排除管理員
1）在創建訂單的時候，其實大部分時候，我們可以直接將負責人指向當前登錄的用戶，因此可以不用用戶自己填寫。那麼我們在利用 ModelForm 來生成前端標簽的時候，可以將 admin 字段給排除了。代碼很簡單，和上面排除 oid 一樣，在元類下 exclude=["oid"，"admin"] ，這裡就不給代碼了。直接切換到前端，看界面效果，如下圖所示。
2）在視圖函數中，我們如何將當前登錄的用戶綁定為負責人呢，這裡就得用到我們先前做登錄的時候，存儲在數據表中的是 request.session["info"] 裡面的 id 了（因為我們存儲的時候，request.session["info"] = {"id": admin_info.id， "name": admin_info.username}，這裡忘記了可以看看之前的 login 模塊的筆記）。設 admin_id = request.session["info"]["id"]，那麼我們只需要設置 form.instance.admin_id = admin_id 即可。這裡特別說明下，設計表的時候，明明是 admin ，為什麼改成了 admin_id，我們要特別注意，因為我們設計的 admin 是有外鍵的，因而系統會自動加上 _id 也就是 admin_id 字段。有不理解可以去查看員工表的數據表設計。如下圖所示：
# （2）提交成功後，清空表內數據
1）這裡就可以使用 js 來清空表單了，這裡涉及的
2）保存成功之後，自動關閉模態對話框。這裡需要用到官網的屬性。即如下圖所示，也就是說，我們只要在置空的表單函數後面接著這個官方的隱藏方法即可。
那麼具體的代碼如下：
# （3）訂單列表顯示
1）就是從數據庫中取出來數據。那麼還是老規矩了直接從數據庫中獲取，然後添加相應的分頁功能。首先從原來的模板中 copy 下訂單列表的 html 代碼。然後在視圖函數的寫法如下：
2）然後我們在前端頁面中，設置相應的值，這裡得注意如果像狀態這種二選一的，需要使用 obj.get_status_display 方法，這裡記住就行。
3）當然了，在每次新建保存成功後，我們想要動態的刷新數據，可以調用 js 的location.reload() 方法來刷新頁面。
# （4）刪除操作初步
1）我們可以給刪除操作專門弄一個對話框，那麼具體的可以去 bootstrap 裡面拿。但是要注意把原來的 id 值改了。代碼如下：
2）我們統一給刪除按鈕進行更改，不用單獨的去寫。為了不讓頁面跳轉，我們改用 input 標簽來做。然後添加 btn-delete 屬性。
3）那麼相應的 js 代碼如下，這裡不贅述了。
4）點擊刪除後的效果如下圖所示：
#
