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

最新推荐文章于 2022-11-28 15:53:05 发布

Python之好！

最新推荐文章于 2022-11-28 15:53:05 发布

阅读量251

点赞数

分类专栏： Python 文章标签： python 编程语言数据库

本文链接：https://blog.csdn.net/weixin_56537083/article/details/117325271

版权

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.47元/天解锁文章

Python之好！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PYTHON工业互联网应用实战16-前后端分离模式之EDIT和DELETE

1.1.修改/查看页面分离　　修改/查看页面分离与列表的前后台分离会相对复杂一些，主要时是修改页面会涉及到通过POST向后台提交数据修改。基于模板的方式加载数据，技术上是通过view的change函数里增加POST分支来实现数据提交的，提交成功后重定向加载列表url，我们先沿用这一思路采用前后台分离的模式来重构我们的修改/查看页面。1.1.1.修改模板taskChange.html<!DOCTYPE html><html lang="en" xmlns="http...
复制链接

扫一扫