番外篇 Vue和Django 前后端交互

在这个例子中，我们将使用Vue.js作为前端框架，Django作为后端框架，并通过Django REST framework来创建REST API。

前端Vue.js部分：

<template>
  <div>
    <input v-model="message" placeholder="输入一条消息" />
    <button @click="sendMessage">发送</button>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    async sendMessage() {
      try {
        const response = await axios.post('http://localhost:8000/api/messages/', {
          message: this.message
        });
        console.log(response.data);
        this.message = '';
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

后端Django部分：

# models.py
from django.db import models
 
class Message(models.Model):
    message = models.CharField(max_length=200)
 
# serializers.py
from rest_framework import serializers
from .models import Message
 
class MessageSerializer(serializers.ModelSerializer):
    class Meta:
        model = Message
        fields = ['message']
 
# views.py
from rest_framework import generics
from .models import Message
from .serializers import MessageSerializer
 
class MessageListCreate(generics.ListCreateAPIView):
    queryset = Message.objects.all()
    serializer_class = MessageSerializer
 
# urls.py
from django.urls import path
from .views import MessageListCreate
 
urlpatterns = [
    path('api/messages/', MessageListCreate.as_view()),
]

在这个例子中，我们创建了一个简单的Message模型，并使用Django REST framework的ModelSerializer来序列化和反序列化这个模型。然后，我们创建了一个MessageListCreate视图，它继承自ListCreateAPIView，这个视图处理HTTP GET请求来列出所有的消息，并处理HTTP POST请求来创建新的消息。

前端Vue.js代码中，我们使用axios库来发送POST请求到Django后端的/api/messages/路径，发送一条消息。后端Django代码中，我们定义了API的URL模式，使其可以接收和处理前端发送的请求。