「网页开发｜前端开发｜Vue」07 前后端分离：如何在Vue中请求外部数据

本文主要介绍两种在Vue中访问外部API获取数据的方式，通过让Vue通过项目外部的接口来获取数据，而不是直接由项目本身进行数据库交互，可以实现前端代码和后端代码的分离，让两个部分的代码编写更独立高效。

本系列前文传送门

• 「网页开发｜前端开发｜Vue」01 快速入门：快速写一个Vue的HelloWorld项目
• 「网页开发｜前端开发｜Vue」02 从单页面到多页面网站：使用路由实现网站多个页面的展示和跳转
• 「网页开发｜前端开发｜页面布局」03 学会够用的CSS，实现任意你想要的页面布局
• 「网页开发｜前端开发｜Vue」04 快速掌握开发网站需要的Vue基础知识
• 「网页开发｜前端开发｜Vue」05 Vue实战：从零到一实现一个网站导航栏
• 「网页开发｜前端开发｜Vue」06 公共组件与嵌套路由：让每一个页面都平等地拥有导航栏

---

一、场景说明

我们的网站一般需要涉及到数据的展示，除了简单的个人信息网站，常见的比如博客网站、电商网站、视频网站、资讯网站等等，都是会涉及较多的数据，这些数据因为数量较多，会存储在数据库中以便于管理。而如果跟数据库进行交互的代码放在前端项目中，容易导致前端项目的代码过于复杂臃肿，在版本迭代中容易导致生产问题。

所以现在比较推崇的前后端分离的架构模式，就将数据处理部分单独放在另外的项目中，而前端项目专门负责在取到数据之后进行页面的渲染和数据的展示。

前端只通过跟后端约定好的数据接口来获取数据，于是我们就需要了解在前端的javascript代码中如何通过外部数据接口来获取数据的方式。本文将介绍两种在vue中访问外部接口的方式：

• 通过axios发送请求
• 通过fetch API发送请求

二、使用Axios获取接口数据

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。类似其他编程语言中的网络请求库。

安装Axios

为了使用这个库，我们需要先进行安装，运行如下命令即可：
npm i axios
如果是使用yarn进行包管理，可以运行：
yarn add axios

导入Axios

进到我们项目的入口src/main.js中，增加如下导入语句：

import axios from 'axios';
Vue.prototype.$http = axios;

然后我们就可以在我们项目的页面中获取数据并展示数据了。我们以首页为例，
我们将先在首页直接硬编码写两个内容卡片，后续使用访问数据接口的方式，改成将接口返回的数据渲染并展示成各个卡片，从而掌握数据接口的访问和展示流程和方式。

首先我们从element-ui中找到卡片组件的代码，然后在HelloWorld.vue中的