阅读:54
现在接触的项目是vue作为前端,Django作为后端的。二者之间的数据交互是二者连接起来的关键,这里以get为例,vue将后端拿到的数据进行展示。万事开头难,加油~
这是数据库中的数据,我们从中以文章获得的stars为标准,选出star最多的五篇文章传到前端作为topArticle进行展示。(里面的数据随便造的,不要在意这些细节)
这是文章的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) # 被点赞次数
这是使用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
这里为前端创建了接口,数据从数据库取出并进行处理。
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操作,我们直接在浏览器中进行操作访问,数据可以拿到。
这里不进行赘述,具体可以参考这篇文章----->传送门
不同的版本,文件不同,在module.exports 中加入下面代码,即代理,Django的端口号默认为8000.
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
},
这个文件是自己建立的,名字默认为api,在src文件夹下
用于书写与后端交互的函数
import request from "@/utils/request"
export function getTopArticle() {
return request({
url: 'article/topArticles/',
method: 'get',
})
}
这里给出部分代码,因为涉及到其他地方。
<template>
<top-news class="news" :news="news"></top-news></template>
<script>
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;
})
}
}
}
</script>
<template>
<div>
<sui-card style="width: 90%;left: 5%">
<sui-card-content>
<div class="coders" style="margin-left: 0;">
<ai></ai>
<span class="title" style="margin-left: 0;"><strong>TOP ARTICLES</strong></span></div>
<div class="ui divider"></div>
<sui-list>
<sui-list-item v-for="(item, key) in topArticles">
<div style="display: flex">
<img src="https://himg.bdimg.com/sys/portraitn/item/72a1ced6ccd8b0accec4b6f94cdbed">
<div style="justify-items: center">
<span style="font-size: 18px">{{ item.title }}</span>
<br>
<span style="color:gray">Author:{{ item.author }}</span>
</div>
</div>
</sui-list-item>
</sui-list>
</sui-card-content>
</sui-card>
</div>
</template>
<script>
export default {
name: "topArticle",
props: {
topArticles: {
// 指定类型
Type: Array,
required: true
},
},
}
</script>
<style scoped>
</style>