Vue框架应用实战项目式教程 实训指导书 实训指导10 Axios库的使用——留言板服务器数据的调用并渲染.pdf

实训指导10Axios库的使用

——留言板服务器数据的调用并渲染

【任务陈述】

本任务实现在“留言板”项目中必威体育精装版岗位的本地数据改写为mock数据，并通过Axios

异步获取数据并渲染至页面中。同时将点赞数据通过Axios上传至服务器端数据接口中并渲

染。【任务分析】发

分为六步骤完成本任务。开

战

图4-7任务实施流程图

【任务实施】实

步骤二.通过Axios完成服务器数据的调用，并渲染到页面

1.安装Axios与vue-axios用

在终端命令行处，输入以下代码，安装Axios与vue-axios至项目的运行依赖。

npminstallaxiosvue-axios-–save

应

2.导入Axios与vue-axios。架

在main.js文件中中导入axios和vue-axios，并进行注册。

框

e

u

V

3.定义获取必威体育精装版岗位数据方法getComments()，在使用axios的页面设置。

4.调用getComments()方法获取必威体育精装版岗位数据

在Vue生命周期钩子中调用getComments方法请求必威体育精装版岗位数据。数据是越早获取越

发

方便后续的渲染，因此放在setup()函数中进行请求。开

战

实

用

应

5.刷新浏览器页面，可以看到页面中已经成功请求到接口地址上的mock数据。

架

框

e

u

V