Vue —— mockjs 模拟数据、轮播图插件 Swiper

mockjs 的使用

• 项目安装 mockjs ： cnpm install mockjs
• 使用步骤

(1)在项目 src 下创建 mock 文件夹。
(2)mock 文件夹准备相应的 JSON 数据文件(一定要格式化，别留有空格，不然跑不起来)
(3)把 mock 数据所需要的图片放在 public 文件夹中【 public 文件夹在打包时，会把相应资源打包到 dist 文件夹中】

向服务器发请求的全过程

• 1、编写 mockAjax.js

//对 axios 进行二次封装
import axios from "axios";

//引入进度条 nprogress 以及样式(可修改) 并在请求和响应拦截器中 调用 star 和 done 方法
import nprogress from 'nprogress';
import "nprogress/nprogress.css"


//1.利用axios对象的create,去创建一个axios实例
//2.request就是axios，只不过稍微配置一下
const requests = axios.create({
   
    //配置对象
    //基础路径，发请求的时候，路径当中会出现api
    baseURL:"/mock", ===> 前置路径这里一定要改，根据实际请求路径来改
    timeout:5000,
});

//请求拦截器
requests.interceptors.request.use((config)=>{
   
    //config：配置对象，对象里面有一个属性很重要，headers请求头
    //进度条开始
    nprogress.start();
    return config;
});

//响应拦截器
requests.interceptors.response.use(
    (res)=>{
   
        //响应成功的回调函数
        //进度条结束
        nprogress.done();
        return res.data;
    },
    (error)=>{
   
        //响应失败的回调函数
        return Promise.reject(new Error('faile'));
    })

    //暴露
    export default requests;

• 2、在 api/index.js 中获取虚拟 mock 后端请求

......
import mockRequests from "./mockAjax";
......

export const reqGetBannerList = () =>{
   
    //发请求：axios发请求返回结果 Promise 对象
    // 因为 api/request.js 中配置了 baseURL:"/api",所以下面不需要加 /api
    return mockRequests({
   url:'/banner',method:'get'});
}

• 3、在相应组件 mounted 中发起请求，获取数据

<s