vue前端与Django后端数据交互_django+vue实现前后端交互

现在接触的项目是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)  # 被点赞次数
1
2
3
4
5
6
7
8
9
10
11

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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': '获取失败',
            })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

后端测试

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

前端

前后端代理问题

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

vue.config.js

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

devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8000',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
1
2
3
4
5
6
7
8
9
10
11
12

api 文件

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

data.js

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

import request from "@/utils/request"

export function getTopArticle() {
    return request({
        url: 'article/topArticles/',
        method: 'get',
    })
}
1
2
3
4
5
6
7
8

前端页面

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

展示结果：