PYTHON工业互联网应用实战16-前后端分离模式之EDIT和DELETE

1.1. 修改/查看页面分离

  修改/查看页面分离与列表的前后台分离会相对复杂一些,主要时是修改页面会涉及到通过POST向后台提交数据修改。基于模板的方式加载数据,技术上是通过view的change函数里增加POST分支来实现数据提交的,提交成功后重定向加载列表url,我们先沿用这一思路采用前后台分离的模式来重构我们的修改/查看页面。

1.1.1. 修改模板taskChange.html

 

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <h1>任务详情</h1>
    <div id="task_id"></div>
    <div id="task_num"></div>
    <form method="post" id="edit_form" hidden>
        <input name="source" id="id_source" value="" />
        <input name="target" id="id_target" value="" />
        <input type="submit" value="提交">
        {% csrf_token %}
    </form>
    <div id="source"></div>
    <div id="target"></div>
    <div id="state"></div>
    <div id="priority"></div>
    <div id="begin_date"></div>
    <div id="end_date"></div>
    <div id="job_count"></div>    
<script>
    task = {
        "TaskId": 2,
        "TaskNum": 102,
        "Source": "101",
        "Target": "05-01-02",
        "Barcode": "101001001010",
        "State": "处理成功",
        "Priority": "紧急",
        "BeginDate": null,
        "EndDate": null,
        "User": 1,
        "SystemDate": "2021-01-26 05:59:45",
        "JobCount": 10
    }
    getData()
function getData() { 
    #① 数据显示绑定的赋值代码
        $('#task_id').text(task.TaskId)
        $('#task_num').text(task.TaskNum)
        $('#source').text(task.Source)
        $('#target').text(task.Target)
        $('#barcode').text(task.Barcode)
        $('#state').text(task.State)
        $('#priority').text(task.Priority)
        $('#begin_date').text(task.BeginDate)
        $('#end_date').text(task.EndDate)
        $('#job_count').text(task.JobCount)
    }
</script>
</body>
</html>

 

标注①:getData函数里,数据显示绑定的赋值代码。

  运行效果

 

1.1.2. 改造任务获取后台

  接下来,我们通过增加taskGet函数通过传入对象pk来获取对象的json数据。获取数据的url“ http://localhost:8080/task/taskGet/1/”,获取pk=1的model对象数据。

   Task/urls.py文件

from django.urls import path,re_path
from Task import views 
urlpatterns = [   
   ...
    path('taskGetList/', views.taskGetList,name='taskGetList')
    re_path('taskGet/(?P<pk>\d+)/$',views.taskGet,name='taskGet'),#①
    
]
 

  标注①:通过传入pk参数来获取单个model的json格式数据。

  Task/urls.py文件

...
def taskGet(request,pk):
    model = get_object_or_404(Task, pk=pk)#①
    modelJson = model_to_dict(model)
    modelJson['SystemDate&
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值