尝试使用外部数据

当你应用的 UI 层面已经趋于完善的时候，接下来你就需要去获取动态的数据来实现真实的应用场景。那么动态数据从哪里来呢？前端主要还是通过接口的形式获取。

如果有专业的接口开发人员和你一起完成一个应用，那么你只需要和他定义好接口的入参和出参，然后进行调用就好了，这也是公司中前端与后台的常见合作方式。

而在以下场景下，你可能并不需要或者并没有后台工程师提供接口给你：

  • 你个人开发的项目

  • 你的应用数据来源于外部

这时候你就需要通过调用第三方接口来实现应用的数据交互与展现。那么接下来我们就来介绍下第三方接口的使用。

介绍

大多数情况下，我们调用的第三方接口都是完全或者部分开源及免费的，因此只要在合理的范围内使用我们便可以实现一些简单的数据交互。本文将以聚合数据提供的第三方接口 API 为例进行讲解。

聚合数据

聚合数据是国内领先的基础数据服务商， 以自有数据为基础，各种便捷服务整合以及第三方数据接入，为互联网开发全行业提供标准化 API 技术支撑服务的 DaaS 平台。

在官网 API 首页（https://www.juhe.cn/docs）我们可以选择你想要的接口类型进行调用，如下图所示：

其中包含了免费及付费的接口类型，如果只是用于单个的调用或测试，建议大家使用免费接口就可以了（非会员只能申请一个免费接口，比较坑），但如果你的应用准备上架或发布，你最好付费以获得更多的调用和使用接口的次数。

点击你想使用的接口后你便可以查看该接口的 API 文档，包括接口地址、请求方式、请求示例及返回示例等，比如这里我点击“笑话大全”：

其他第三方接口

除了整合型的第三方接口聚合数据外，其他比较实用的第三方接口还有：

结语

第三方接口的使用能够帮助我们快速的获取数据并实现应用的动态交互，同时也有助于解决接口开发的人力及服务器资源消耗，为部分 Vue 项目开发提供数据保障。

至此，本小册的开发部分章节也将告一段落。在这部分的内容中我们一起学习了 Vue 项目开发的实用技巧、方法和工具，并在构建出的项目基础上了解并实践了 Vue 开发的相关技术要点。希望这部分内容的介绍能够巩固大家对于 Vue 开发的基础知识，弥补 Vue 开发的技能空白。

思考 & 作业

自己通过调用外部数据完成一个页面动态的数据渲染

devServer 的 proxy 代理是如何实现接口转换和重定向的？各配置项的作用是什么？

参考资料

https://www.kancloud.cn/sllyli/vueproject/1244267