vue前端与Django后端数据交互

2024-06-29 08:50| 来源: 网络整理| 查看: 265

现在接触的项目是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', }) } 前端页面

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

import TopArticles from "@/components/home/components/TopArticles"; import {getTopArticle} from "@/api/data"; export default { name: "HomeComponents", components: {TopCoders, TopArticles, ComingCompetitions, TopNews}, data() { return { topArticle: [] } }, created() { this.getData(); }, methods: { getData() { getTopArticle().then(res => { this.topArticle = res.data; }) } } } topArticles.vue TOP ARTICLES

{{ item.title }} Author:{{ item.author }} export default { name: "topArticle", props: { topArticles: { // 指定类型 Type: Array, required: true }, }, } 展示结果：

在这里插入图片描述

【本文地址】

公司简介

联系我们