vue+django 前后端数据同步

最新推荐文章于 2022-12-30 13:40:06 发布

weixin_44079503

最新推荐文章于 2022-12-30 13:40:06 发布

阅读量1.2k

点赞数

文章标签： django vue.js python

本文链接：https://blog.csdn.net/weixin_44079503/article/details/124283645

版权

本文介绍如何使用Vue的v-model实现与Django后端的数据双向绑定。首先在views.py中创建数据字典，然后通过API的GET方法获取并显示在Vue的index.html页面上。当用户修改数据并点击提交，数据以JSON字符串形式通过axios.post发送回Django，利用simplejson.loads解析并更新后端数据。

摘要由CSDN通过智能技术生成

目标：在views.py中，准备好数据后，通过Vue的v-model双向绑定功能在index.html中显示。当数据修改后，点击按钮提交后，以对象的形式向views.py传递并更新后端数据。

总体思路：

views.py用字典存数据
暴露api的get方法，在页面加载时双向绑定数据
修改数据提交后，点按钮把数据对象用json字符串传过来
用simplejson.loads还原对象后，更新字典值

步骤：

准备数据

class DotDict(dict):
    def __init__(self, *args, **kwargs):
        dict.__init__(self, *args, **kwargs)
        self.__dict__ = self

    def toDotDict(data):
        if isinstance(data, dict):
            for k, v in data.items():
                if isinstance(v, dict):
                    data[k] = DotDict(v)
                    DotDict.toDotDict(data[k]