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

跨域配置

由于网站的安全机制，通常需要遵循同源策略，即协议、域名、端口三者都相同。然而，在前后端分离的项目中（本地环境）是无法实现同源的，所以就需要在后端中配置。

  1. 首先，进入虚拟环境，安装跨域配置的库：
    1
    pip3 install django-cors-headers
  2. 接着，在settings.py中配置：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    # backend/settings.py
    INSTALLED_APPS = [
        ...
    	'corsheaders' # 新增
    ]

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

    # 支持跨域配置开始
    CORS_ORIGIN_ALLOW_ALL = True
    CORS_ALLOW_CREDENTIALS = True
    到此，后端部分搞定。

前端请求数据

首先，命令行安装axios：

1
cnpm install axios

接着在前端的Home.vue里写入（JavaScript部分）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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部分内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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），打开控制台，检查有没有报错。如果没有，那么恭喜你，数据获取成功啦！

文章界面

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

1
2
3
4
5
6
7
<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