drf + vue全栈教程: 前后端联调实现简单的文章列表

作者:jacky
浏览:197

摘要:axios获取后端数据

这篇文章将教大家使用axios获取简单地文章列表,让我们开始吧!

跨域配置

由于网站的安全机制,通常需要遵循同源策略,即协议、域名、端口三者都相同。然而,在前后端分离的项目中(本地环境)是无法实现同源的,所以就需要在后端中配置。 1. 首先,进入虚拟环境,安装跨域配置的库:

pip3 install django-cors-headers
  1. 接着,在settings.py中配置:
# backend/settings.py
INSTALLED_APPS = [
    ...
    'corsheaders' # 新增
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # 需注意与其他中间件顺序,这里放在最前面即可
    ...
]

# 支持跨域配置开始
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True 

到此,后端部分搞定。

前端请求数据

首先,命令行安装axios

cnpm install axios

接着在前端的Home.vue里写入(JavaScript部分):

import axios from 'axios';
...
data () {
        return {
            articles: '',
        }
    },
    methods: {
        getArticles () {
            axios.get('http://127.0.0.1:8000/api/articles/')
            .then(this.getArticlesSucc)
        },
        getArticlesSucc (res) {
            this.articles = res.data
        }
    },
    mounted () {
        this.getArticles()
    },

需要注意,这里是两个script标签中的JavaScript部分,并且前面还省略了一段内容,完整js部分内容如下:

<script>
import axios from 'axios';
export default {
    name: 'Home',
    data () {
        return {
            articles: '',
        }
    },
    methods: {
        getArticles () {
            axios.get('http://127.0.0.1:8000/api/articles/')
            .then(this.getArticlesSucc)
        },
        getArticlesSucc (res) {
            this.articles = res.data
        }
    },
    mounted () {
        this.getArticles()
    },
}
</script>

这一部分很有难度,如果读者运行后报错,或者看不懂代码,建议移步至vue官方文档axios官方文档,进一步学习。

好了,说说这里我们干了什么。 1. 我们通过axios从后端获取了数据 2. 我们定义了获取数据的函数 3. 我们将数据储存在了articles变量中,方便在模板里使用

接下来让我们测试一下。 1. 重启前端项目,启动后端项目 2. 访问http://127.0.0.1:8080 3. 不要看节目,输入快捷键:Ctrul+shift+i,打开开发者工具(俗称f12),打开控制台,检查有没有报错。如果没有,那么恭喜你,数据获取成功啦!

文章界面

接下来,我们开始编写文章列表界面,将数据运用在界面中。

<template>
<div v-for="article in articles" :key="article.id">
    <h3>{{ article.title }}</h3>
    {{ article.main }}
    <hr>
</div>
</template>

这里只是实现了一个十分简单的列表,其他字段都没有写在页面中,也没有做任何美化,在后面的文章中会实现更复杂的列表。

  1. v-for:循环,将数据生成一个列表
  2. {{ article.title }}:文章的标题,json数据里面的一部分

重启项目,如果没有任何错误,会展示出简单的文章列表。

错误的排查

然而,一切总不会这么顺利,很可能无法展示出文章列表,这里说说可能有哪些错误。

后端api问题

首先,我们就要检查后端的api里面是否有数据,如果没有数据,前端岂能获得数据?如果没有数据,就要检查项目是否启动,序列化,模型和视图是否正确等等。

前端axios问题

接着,让我们用Ctrul+shift+i快捷键打开开发者工具-->控制台,查看是否有报错,有报错就要检查前端代码。

最后

博主说:本章内容最难,最有挑战性,最关键,最容易出错,你需要参考各类文档,博主后续也会专门写一篇文章,为大家讲解vue的基础,通读文档是很重要的!

有任何疑问欢迎加QQ群:Python学习交流 1140464262












登录后回复








共有2条评论


jacky 3个月前 评论:

谢谢提醒


pi-dal 3个月前 评论:

> 重启项目,__入过__没有任何错误,会展示出简单的文章列表。

打错字了吧。





CopyRight © 2020 Jacky的编程空间

Powered by Django & Bootstrap  沪ICP备20019721号-1 本站总访问量