vue+django 前后端数据同步

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

总体思路：

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

步骤：

1. 准备数据

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])
        else:
            return data

        return DotDict(data)
# 仿真参数字典
pars=DotDict()
pars.n_uav=5
pars.n_jammer=2
pars.n_channel=3
pars.epsilon=0.1
pars.ETA=0.8
pars.GAMMA=0.8
pars.NUM_DIZITIZED=6
pars.NUM_EPISODES=3
pars.MAX_STEPS=2000
pars.PT=0.4
pars.PJ=0.4
pars.sigma=1

2. 暴露api，用get传数据，post接收数据
   views.py中

def params(request):
    if request.method=='POST':
        new_par=simplejson.loads(request.POST['sim_param'])
        print(new_par['n_uav'])
        pars.update(new_par)
        print(pars.n_uav)

        return JsonResponse({'ret':True})

    if request.method=='GET':
        return JsonResponse(pars)

3. index中v-model双向绑定

<script>
    var app1=new Vue({
        el:"#sim_params",
        delimiters:["[[","]]"],
        data:{
          sim_params:{}
        },
        mounted:function(){
            this.fetchData();
        },
        methods:{
            fetchData (){
                {#var params=new URLSearchParams();#}
                {#params.append('id',123458);#}
                {#params.append('idd','dede');#}
                axios.get("/uav/api/params/").then(response=>{
                   this.sim_params=response.data;
                }),err=>{
                    console.log(err);
                };
            },
            submit_params:function(event){
                var params=new URLSearchParams();
                params.append('sim_param',JSON.stringify(this.sim_params));
                console.log(params)
                axios.post('/uav/api/params/',params).then(alert('ok'));
            },
        }
    });
</script>

    <div class="field">
      <label>信道数量</label>
      <input type="text" v-model="sim_params.n_channel" placeholder="3">
    </div>

5. 按钮监听事件

<div class="ui grid centered">
    <button class="ui primary button" v-on:click="submit_params">
        Save
    </button>
</div>

6. 数据发后台之前，先放到URLSearchParams（）中，再JSON.stringify字符串化，再用axios.post发给后台
7. 后台用simplejson.loads变对象后，再更新字典数据
   new_par=simplejson.loads(request.POST[‘sim_param’])
   pars.update(new_par)