现在接触的项目是vue作为前端，Django作为后端的。二者之间的数据交互是二者连接起来的关键，这里以get为例，vue将后端拿到的数据进行展示。万事开头难，加油~
后端
数据库
这是数据库中的数据，我们从中以文章获得的stars为标准，选出star最多的五篇文章传到前端作为topArticle进行展示。（里面的数据随便造的，不要在意这些细节）
; models.py
这是文章的model
class Article(models.Model):
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.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
},
},
}
展示结果：
Original: https://blog.csdn.net/qq_44614115/article/details/113944002
Author: 沃特艾文儿～
Title: vue前端与Django后端数据交互
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/736888/
转载文章受原作者版权保护。转载请注明原作者出处！