Vue框架应用实战项目式教程 实训指导书 实训指导9 Axios库的使用——留言板模拟服务器接口数据环境搭建.pdf

实训指导9Axios库的使用

——留言板模拟服务器接口数据环境搭建

【任务陈述】

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

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

染。【任务分析】发

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

战

图4-7任务实施流程图

【任务实施】实

步骤一.使用json-server搭建模拟服务器接口数据环境

Json-server是一个npm管理包，字面上解释为一个在本地（前端）运行，可以存储json

用

数据的服务器。通俗来说，就是模拟服务端接口数据，一般用于前后端分离开发时，前端可

以不依赖后端API接口获取数据，而在本地搭建JSON服务器环境，自行产生测试数据来测

应

试前端开发代码。

1.安装json-server插件架

在vscode编辑器中将项目的根目录设为当前目录，并点击鼠标右键选择“在集成终端

中打开”，在打开的终端界面中输入以下命令后，将json-server插件安装至本项目的运行依

赖。框

npminstalljson-server--save

e

2.创建data.json数据文件

在项目根目录新建data.json文件，并在data.js中建立二级数据，一级数据为messageList、

u

articleList、article，它们对应着服务器端的文件路径名。将App.vue中的本地数据全部剪切

放至对应的data.json文件中。注意需要将数据的注释全部删除，并调整成json格式。data.json

V

文件格式如下：

{

messageList:[

{…},

…

],

”articleList”:[

{…},

…

],

article:[

{…},

…

]

}

发

开

战

实

用

应

架

框

e

3.设置mock数据

在终端中输入命令：json-serverdata.json或json-server.cmd--watchdata.json，将data.json

u

数据放在模拟服务器端，地址默认为http://localhost:3000，打开

http://localhost:3000/messageList可查看二级数据。当