Django rest 框架 websockets 自动更新答案

【问题标题】：Django rest framework websockets auto updateDjango rest 框架 websockets 自动更新
【发布时间】：2021-02-16 12:48:15
【问题描述】：

我的 API 使用 django rest 框架，前端使用 vue，并且，当我更改某些内容时可以自动更新我的前端状态？它的完全基本的 vue 和 django 代码，例如

Vue

<template>
  <div>
    <div class="numbers">{{ state.numbers }}</div>
    Number pk <input type="text" v-model="state.pk" /> Number value
    <input type="text" v-model="state.inputValue" />
    <button v-on:click="changeNumber">change !</button>
  </div>
</template>
<script>
import axios from "axios";
import { reactive, onMounted } from "vue";
export default {
  name: "HelloWorld",
  setup() {
    const state = reactive({
      numbers: [],
      inputValue: 1,
      pk: 1,
    });
    function changeNumber() {
      const data = {
        number: state.inputValue,
      };
      console.log(data);
      axios.patch(`http://127.0.0.1:8000/api/number-update/${state.pk}/`, data);
    }
    onMounted(() => {
      axios
        .get("http://127.0.0.1:8000/api/numbers-list/")
        .then((res) => (state.numbers = res.data));
    });
    return {
      changeNumber,
      state,
    };
  },
};
</script>

在浏览器中的表现如何

我想，当我点击更改按钮时，自动更新后端数据，而不刷新。

后台

序列化器.py

from rest_framework import serializers
from .models import Number


class NumberSerializer(serializers.ModelSerializer):
    class Meta:
        model = Number
        fields = '__all__'

Views.py

from django.shortcuts import render
from .serializers import NumberSerializer
from rest_framework import generics
from .models import Number


class NumbersList(generics.ListAPIView):
    queryset = Number.objects.all()
    serializer_class = NumberSerializer


class NumberUpdate(generics.UpdateAPIView):
    queryset = Number.objects.all()
    serializer_class = NumberSerializer

网址.py

from django.urls import path
from mynumbers.views import NumbersList, NumberUpdate
urlpatterns = [
    path('numbers-list/', NumbersList.as_view(), name='numbers-list'),
    path('number-update/<int:pk>/', NumberUpdate.as_view(), name='number-update'),
]

模型.py

from django.db import models
class Number(models.Model):
    number = models.DecimalField(max_digits=5,
                                 decimal_places=2)

如何使用 websockets 或任何其他技术来做到这一点？对不起我的英语。

【问题讨论】：

您应该能够使用您已经在项目中使用的 axios，在单击更改按钮时进行 AJAX 样式的 API 调用。

标签： python django vue.js django-rest-framework

【解决方案1】：

你只需要在patch方法后更新数据

export default {
  name: "HelloWorld",
  setup() {
    const state = reactive({
      numbers: [],
      inputValue: 1,
      pk: 1,
    });
    const updateData = () => {
      return axios
        .get("http://127.0.0.1:8000/api/numbers-list/")
        .then((res) => (state.numbers = res.data));
    }
    function changeNumber() {
      const data = {
        number: state.inputValue,
      };
      console.log(data);
      axios
        .patch(`http://127.0.0.1:8000/api/number-update/${state.pk}/`, data)
        .then(updateData);
    }
    onMounted(updateData);
    return {
      changeNumber,
      state,
    };
  },
};

【讨论】：