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)  # 文章类型idcontent = 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 = Articlefields = '__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',})
}

前端页面

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

<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>

topArticles.vue

<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>

展示结果：

vue前端与Django后端数据交互相关推荐

前端vue和django后端数据交互，跨域问题的解决
一:前言再前后端的数据交互问题上,经常会遇到跨域问题.即这个错误 Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/test/' from ...
vue前端与Django后端查询一定时间段内的数据
在开发过程中经常会遇到筛选查询之类的功能,比如查询某一个时间段内的数据而非所有数据. 这样我们就需要向后端发送时间段的参数,然后在后端处理查询. 这里以Django后端和vue前端的简单例子来记录大致 ...
Vue前端与Django后端实现前后端分离连接
1.前端部分前端要触发一个事件,使得前端将信息发送给后端.例如一个登录事件,用户输入账号密码,点击登录按钮,即可将前端输入的信息发送给后端.该按钮绑定了一个事件,该事件放在methods配置项里边. ...
Ajax 前端后端数据交互
Ajax 前端/后端数据交互一概述同步: 一请求一响应,全局刷新异步: 多请求多响应,局部刷新 (默认为异步,效率高) 场景: 浏览网页时,未全局刷新,能更新数据的页面基本都使用了 ...
java后端与前端的交互_前端和后端数据交互的基本知识和常见方式
一.首先了解前端,后端,数据三者的关系. 1.前端常常是是html,css,js三者的构成的页面的总称.运行在客户端.以浏览器为例. 2.后端常常是后端语言.比如php,java等写的一些脚本.来操作 ...
前端和后端数据交互的基本知识
一.首先了解前端.后端.数据三者的关系 1) 前端通常是html,css,js三者构成的页面的总称.运行在客户端.以浏览器为例. 2) 后端是指后端程序.比如java,php等编写的一些服务.用来操作 ...
python的前端和后端_python前端和后端数据交互，tornado框架入门，初学小试牛刀！...
Python前端和后端是如何交互的,怎么用tornado框架快速搭建前端和后端数据交互? 前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前 ...
干货 | 万字长文全面解析GraphQL，携程微服务背景下的前后端数据交互方案
作者简介古映杰,携程研发高级经理,负责前端框架和基础设施的设计.研发与维护.开源项目react-lite和react-imvc作者. 前言随着多终端.多平台.多业务形态.多技术选型等各方面的发展, ...
前后端数据交互|分页查询|表格-双向绑定|get和post的区别
目录 1 前后端数据交互 1.1 前端代码部署在前端服务器 1.2 前端代码在浏览器展示(只展示页面,没有数据)----自给自足 1.3 前端/浏览器请求后端数据 (后端死数据)----给 ...