《Vue应用开发》课件-7.1.4Axios图书列表案例

先定一个小目标！掌握Axios图书列表案例的实现，能够使用Axios完成网络请求7.1.4Axios图书列表案例7.1.4Axios图书列表案例使用Axios实现图书列表案例，图书列表页面初始效果如下图所示。7.1.4Axios图书列表案例单击上图中“请求数据”按钮，数据请求成功页面效果如下图所示。图书列表案例的实现分为以下2步。模拟数据1请求数据27.1.4Axios图书列表案例模拟数据：为了方便演示，使用mockjs模拟后端接口，下面讲解如何安装mockjs，以及编写模拟数据和配置模拟数据的相关信息。7.1.4Axios图书列表案例步骤1在my-axios目录下，使用yarn安装mockjs。步骤3步骤4步骤2使用mockjs模拟后端接口7.1.4Axios图书列表案例yarnaddmockjs@1.1.0--save创建src\mock\books.json文件，该文件用于存放模拟的数据。(加一项自己姓名)[{"id":1,"name":"西游记","author":"吴承恩"},{"id":2,"name":"红楼梦","author":"曹雪芹"},步骤3步骤4步骤1步骤27.1.4Axios图书列表案例使用mockjs模拟后端接口>>接上页代码

{"id":3,"name":"三国演义","author":"罗贯中"},{"id":4,"name":"水浒传","author":"施耐庵"}]步骤3步骤4步骤1步骤27.1.4Axios图书列表案例使用mockjs模拟后端接口创建src\mock\mockServer.js文件，该文件用于配置模拟数据的相关信息。importMockfrom'mockjs'importbooksfrom'./books.json'Mock.mock('/mock/getBooks','get',{code:200, //请求成功的状态码

data:books //模拟的请求数据})步骤3步骤4步骤1步骤27.1.4Axios图书列表案例使用mockjs模拟后端接口修改src\main.js文件，在创建Vue应用实例前导入mockServer.js文件。import'./mock/mockServer.js'步骤3步骤4步骤1步骤27.1.4Axios图书列表案例使用mockjs模拟后端接口请求数据：后端接口和模拟数据准备好之后，就可以请求接口、获取数据了。下面讲解如何在页面中请求接口并获取数据。7.1.4Axios图书列表案例步骤1清空src\App.vue文件中的内容。步骤3步骤4步骤2步骤5在页面中请求接口并获取数据7.1.4Axios图书列表案例<template>

<divclass="box">

<button>请求数据</button>

<tablewidth="90%"class="table">

<caption>

<h2>图书列表</h2>

</caption>

<thead>

<tr>

<th>编号</th>

<th>书名</th>步骤1>>接上页代码步骤3步骤4步骤2步骤5在页面中请求接口并获取数据7.1.4Axios图书列表案例

<th>作者</th>

</tr>

</thead>

<tbody>

<!--主体内容-->

</tbody>

</table>

</div></template>在src\App.vue文件中编写样式代码。<style>body,html{

width:100%;

height:100%;}#app{

width:100%!important;}table{

border-collapse:collapse;

margin:0auto;

text-align:center;步骤3步骤4步骤5步骤1步骤27.1.4Axios图书列表案例在页面中请求接口并获取数据

}tabletd,tableth{

border:1pxsolid#cad9ea;

color:#666;

height:30px;}tabletheadth{

background-color:#CCE8EB;

width:100px;}步骤3步骤4步骤5步骤1步骤27.1.4Axios图书列表案例在页面中请求接口并获取数据>>接上页代码tabletr:nth-child(odd){

background:#fff;}tabletr:nth-child(even){

background:#F5FAFA;}</style>步骤3步骤4步骤5步骤1步骤27.1.4Axios图书列表案例在页面中请求接口并获取数据>>接上页代码为“请求数据”按钮绑定单击事件处理方法。<button@click="getData">请求数据</button>步骤3步骤4步骤5步骤1步骤27.1.4Axios图书列表案例在页面中请求接口并获取数据在src\App.vue文件中请求接口数据。步骤3步骤4步骤5步骤1步骤27.1.4Axios图书列表案例在页面中请求接口并获取数据步骤3步骤