vue项目请求服务器数据,Vue.js 3 应用开发学习指南（二）：请求服务端接口获取组件数据...

在 Vue 应用上处理数据要请求服务端应用接口，比如在内容列表组件上请求服务端的内容列表接口获取到内容列表数据，然后在组件的模板里循环绑定输出这组数据。Vue 应用也可以把用户在应用界面上生产出来的数据交给服务端应用接口，把数据永久的存储在应用的数据仓库里。

应用的客户端(Vue 应用)与服务端交换数据的时候，一般就是通过 HTTP  协议。客户端对服务端发出 HTTP 请求，服务端根据客户端请求的地址(接口)做出不同的响应，如果客户端请求获取数据，服务端会把客户端需要的数据放在响应的数据里，客户端收到了响应就可以从响应里拿到它需要的数据了。

如果客户端想把用户生产出来的数据交给服务端去处理，可以在发送请求的时候，把用户数据放在请求里，这样服务端收到请求以后，就可以从请求里拿到它需要的数据，服务端可以处理这些数据，比如把它放到数据仓库里保存起来。

如果你想开发一个完整的应用，你需要同时开发应用的客户端与服务端。客户端可以基于 Vue 框架开发，服务端可以基于 Node.js 开发。在宁皓网上有个系列课程介绍了怎么基于 Node.js 开发一个服务端应用，你可以从零开始做出一个能发布内容，评论，用户登录，上传文件，打标签，点赞的服务端应用。

服务端

下面我们会练习在 Vue 应用里请求服务端应用提供的接口获取数据。你可以参考这个课程(https://ninghao.net/course/8606)，在本地电脑上运行一个基于 Node.js 编写的服务端应用。

在本地准备好这个服务端应用，运行以后就可以使用 HTTP 客户端请求应用的服务接口了。下图展示了请求应用提供的内容列表接口返回的结果。一组内容，每个内容项目是一个对象，里面有内容的 id，title(标题)，content(正文)，user(内容作者) 等等。

HTTP 客户端(axios)

上图中展示了用一个 HTTP 客户端桌面软件，请求使用了内容列表接口。我们在自己的 Vue 应用里，也要准备一个 HTTP 客户端发送 HTTP 请求，axios 就是其中一种 HTTP 客户端，把它安装在 Vue 项目里，这样就可以导入使用它提供的方法来请求应用的服务端接口了。

安装

在终端， Vue 项目所在目录的下面，执行：

yarn add axios

或者

npm install axios

使用 Yarn 或者 NPM 都