Mock.js 使用

目录

1、官网地址：Mock.js

2、作用：生成随机数据，拦截 Ajax 请求

 3、Mock.js 入门案例：商城前台项目首页轮播图案例

3-1、安装命令

3-2、在src下准备一个mock文件夹，mock下准备index.js、banner.json文件

3-2-1、src/mock/index.js

3-2-2、src/mock/banner.json

 3-2-3、main.js 入口文件中引入mock接口，保证接口至少执行一次

3-3、以下测试接口是否能正常使用

3-3-1、src/utils/requestMock.js

3-3-2、src/api/index.js

3-4、以上测试接口可正常使用，使用返回的数据进行界面的渲染

3-4-1、src/pages/home/List/index.vue

3-4-2、src/store/modules/home.js

3-4-3、src/pages/home/List/index.vue

1、官网地址：Mock.js

2、作用：生成随机数据，拦截 Ajax 请求

（mock接口发的请求，在浏览器 Network 看不到；mock的数据上线后依旧展示）

 3、Mock.js 入门案例：商城前台项目首页轮播图案例

3-1、安装命令

npm i mockjs

安装完成后，package.json文件中会有展示。

3-2、在src下准备一个mock文件夹，mock下准备index.js、banner.json文件

3-2-1、src/mock/index.js

//利用mockjs插件创建接口
import Mock from 'mockjs';
//引入接口需要数据（JSON、CSS文件默认对外暴露）
import banner from './banner.json';
//造接口: 第一个参数:请求接口地址  第二个参数:发请求响应的数据
//接口默认是GET请求
Mock.mock("/mock/banner", { code: 200, data: banner });

3-2-2、src/mock/banner.json

[
    {
        "id": 1,
        "imgUrl": "/images/banner1.jpg"
    },
    {
        "id": 2,
        "imgUrl": "/images/banner2.jpg"
    },
    {
        "id": 3,
        "imgUrl": "/images/banner3.jpg"
    },
    {
        "id": 4,
        "imgUrl": "/images/banner4.jpg"
    }
]

注意：mock接口的静态资源必须放在public文件夹内

 3-2-3、main.js 入口文件中引入mock接口，保证接口至少执行一次

import '@/mock';

3-3、以下测试接口是否能正常使用

3-3-1、src/utils/requestMock.js

//axios二次封装
import axios from "axios";
//引入进度条插件
import nprogress from 'nprogress';
//引入样式
import 'nprogress/nprogress.css'
//关闭右侧加载小球
nprogress.configure({ showSpinner: false });
//利用axios对象create方法:创建axios对象
let request = axios.create({
    baseURL: "/mock",//基础路径
    timeout: 5000//超时的设置
});

//请求拦截器
request.interceptors.request.use((config) => {
    //config:配置对象,请求头config.headers,携带公共请求参数
    //请求之前进度条开始动
    nprogress.start();
    return config;
});

//响应拦截器
request.interceptors.response.use((res) => {
    //根据状态码进行其他判断
    let data = res.data;
    //请求成功进度条消失
    nprogress.done();
    //简化数据
    return data;
}, (error) => {
    //返回一个失败的promise对象
    return Promise.reject(error)
});

//对外暴露
export default request;

3-3-2、src/api/index.js

//引入二次封装的axios：requestMock
import requestMock from '@/utils/requestMock';

//首页banner图接口
export const reqBanner = () => requestMock({ url: '/banner', method: 'get' });

3-4、以上测试接口可正常使用，使用返回的数据进行界面的渲染

3-4-1、src/pages/home/List/index.vue

// 组件挂载完毕,通知vuex发请求->vuex存储数据
mounted() {
    this.$store.dispatch("getBanner");
}

3-4-2、src/store/modules/home.js

//首页的小仓库
//引入请求函数API
import { reqBanner } from "@/api";
//小仓库存储数据的地方
const state = {
    //首页轮播图的数据
    bannerArr: []
};
//修改数据地方
const mutations = {
    GETBANNER(state, bannerArr) {
        state.bannerArr = bannerArr;
    }
};
//书写逻辑|异步语句地方
const actions = {
    //首页轮播
    async getBanner({ commit, state, dispatch, getters }) {
        let result = await reqBanner();
        if (result.code == 200) {
            commit('GETBANNER', result.data);
        }
    }
};
//计算属性
const getters = {};
export default {
    state,
    mutations,
    actions,
    getters
}

3-4-3、src/pages/home/List/index.vue

// 通过辅助函数 mapState 捞数据展示数据
import { mapState } from "vuex";
computed: {
    ...mapState({
      banner: (state) => state.home.bannerArr,
    }),
  },

<!--banner轮播-->
<Swiper :options="options" ref="swiper">
 <SwiperSlide v-for="(item, index) in banner" :key="item.id">
  <img :src="item.imgUrl" alt="" />
 </SwiperSlide>
 <div slot="button-prev" class="swiper-button-prev"></div>
 <div slot="button-next" class="swiper-button-next"></div>
 <div slot="pagination" class="swiper-pagination"></div>
</Swiper>

<script>
export default {
data() {
    return {
      //轮播图配置项
      options: {
        //导航前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        //自动轮播图
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        //无缝衔接
        loop: true,
        //分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        //切换效果
        effect: "coverflow",
      },
    };
  },
//组件挂载完毕,通知vuex发请求->vuex存储数据
  mounted() {
    this.$store.dispatch("getBanner");
    //鼠标进入
    this.$refs.swiper.$el.onmouseenter = () => {
      this.$refs.swiper.$swiper.autoplay.stop();
    };
    //鼠标移出
    this.$refs.swiper.$el.onmouseleave = () => {
      this.$refs.swiper.$swiper.autoplay.start();
    };
  },
}
</script>

vue-awesome-swiper 具体实现步骤