vue前端与Django后端数据交互

现在接触的项目是vue作为前端，Django作为后端的。二者之间的数据交互是二者连接起来的关键，这里以get为例，vue将后端拿到的数据进行展示。万事开头难，加油~

后端

数据库

这是数据库中的数据，我们从中以文章获得的stars为标准，选出star最多的五篇文章传到前端作为topArticle进行展示。（里面的数据随便造的，不要在意这些细节）

models.py

这是文章的model

# 文章
class Article(models.Model):
    # author_id = models.IntegerField(default=0)  # 创建者id
    # algorithm_id = models.IntegerField(default=0)  # 文章类型id
    content = models.TextField(max_length=32765)  # 发布文章内容
    title = models.CharField(max_length=100)  # 文章题目
    author = models.CharField(max_length=100)  # 默认为创建者
    date = models.DateTimeField(auto_created=True)  # 默认为创建的时间
    last_alter = models.DateTimeField(auto_created=True, default=timezone.now)  # 默认为最后一次提交修改
    algorithm = models.CharField(max_length=20)  # 文章类型
    stars = models.IntegerField(default=0)  # 被点赞次数

serializers.py

这是使用drf框架需要进行新创建的文件

class ArticleModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = Article
        fields = '__all__'

    def create(self, validated_data):
        return Article.objects.create(**validated_data)

    def update(self, instance, validated_data):
        instance.content = validated_data.get('content', instance.content)
        instance.title = validated_data.get('title', instance.title)
        instance.author = validated_data.get('author', instance.author)
        instance.date = validated_data.get('date', instance.date)
        instance.last_alter = validated_data.get('last_alter', instance.last_alter)
        instance.algorithm = validated_data.get('algorithm', instance.algorithm)
        instance.stars = validated_data.get('stars', instance.stars)
        # instance.author_id = validated_data.get('author_id', instance.author_id)
        # instance.algorithm_id = validated_data.get('algorithm_id', instance.algorithm_id)
        instance.save()
        return instance

views.py

这里为前端创建了接口，数据从数据库取出并进行处理。

class ArticleViewSet(ModelViewSet):
    parser_classes = [MultiPartParser, JSONParser, FormParser]
    """视图集"""
    queryset = models.Article.objects.all()
    serializer_class = ArticleModelSerializer
    # 搜索
    search_fields = ('id')

    @action(methods=['get'], detail=False)
    def topArticles(self, request, *args, **kwargs):
        obj = models.Article.objects.all().order_by('stars')[:5]
        if obj:
            ser = ArticleModelSerializer(instance=obj, many=True)
            return JsonResponse({
                'code': '200',
                'msg': '获取数据成功',
                'data': ser.data
            })
        else:
            return JsonResponse({
                'code': '1002',
                'msg': '获取失败',
            })

后端测试

因为是get操作，我们直接在浏览器中进行操作访问，数据可以拿到。

前端

前后端代理问题

这里不进行赘述，具体可以参考这篇文章----->传送门

vue.config.js

不同的版本，文件不同，在module.exports 中加入下面代码，即代理，Django的端口号默认为8000.

devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8000',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },

api 文件

这个文件是自己建立的，名字默认为api，在src文件夹下

data.js

用于书写与后端交互的函数

import request from "@/utils/request"

export function getTopArticle() {
    return request({
        url: 'article/topArticles/',
        method: 'get',
    })
}

前端页面

这里给出部分代码，因为涉及到其他地方。

topArticles.vue

展示结果：