Vue项目实战(八)：swiper轮播图的使用

1. 获取轮播图的数据
1.1. 模拟轮播图数据(前提是已经安装了mockjs),同时需要将对应的图片提前放入public文件夹下的images文件夹下

// src >>> mock >>> banner.json
{
   
    "code": 200,
    "msg": "success",
    "data": [
        {
   
            "id": "1",
            "imgUrl":"/images/banner1.png"
        },
        {
   
            "id": "2",
            "imgUrl":"/images/banner2.png"
        },
        {
   
            "id": "3",
            "imgUrl":"/images/banner3.png"
        }
    ]
}

1.2. 因为与之前的请求不一样，所以新建mockServe.js文件

//src >>> mock >>> mockServe.js

//引入mockjs模块
import Mock from 'mockjs'

//引入json数据(webpack默认对外暴露的：图片、JSON数据格式)
import banner from './banner.json'
import floor from './floor.json'

//mock数据(第一个参数是：请求地址，第二个参数是：请求数据)
Mock.mock("/mock/banner",{
   code:200,data:banner}) //模拟首页轮播图数据
Mock.mock("/mock/floor",{
   code:200,data:floor}) //模拟

1.3. 创建接口,和一般请求类似，稍加修改即可，代码如下：

//新建mockAjax.js
//src >>> api >>> mockAjax.js

//主要修改baseURL，由原来的/api调整为/mock
//对于axios进行二次封装，引入axios