前端模拟数据插件mockjs的使用

场景：模拟一个获取轮播图的数据

😺step1:模拟后端-生成模拟数据

src->mock

banner.json中是返回的模拟数据

[
    {
        "id":"1",
        "imgUrl":"/images/1.webp"

    },
    {
        "id":"2",
        "imgUrl":"/images/2.webp"

    },
    {
        "id":"3",
        "imgUrl":"/images/3.jpeg"

    },
    {
        "id":"4",
        "imgUrl":"/images/4.jpeg"

    }
]

mockServe.js中，生成模拟数据

import Mock from 'mockjs'
import banner from './banner.json'

Mock.mock("/mock/banner",{code:200,data:banner})

在总的main.js中注册虚拟服务器import '{你的地址}/src/mock/mockServe'

😺step2：前端工作-制作api接口

arc->api文件夹

mockAjax.js中封装axios命名为mockRequest

import axios from "axios";
import nprogress from "nprogress"; //引入进度条插件
import "nprogress/nprogress.css" //引入进度条样式
/**
 * 重新封装了axios
 * 主要是为了利用发送和请求拦截器
 */
var mockRequest = axios.create({
    baseURL:'/mock',
    timeout: 5000
})

mockRequest.interceptors.request.use(function(config){
    nprogress.start()//进度条开始
    return config
})

mockRequest.interceptors.response.use(function(response){
    nprogress.done()//进度条结束
    return response
}, function(error){
    return Promise.reject(error)
})

export default mockRequest;

在api->index.js中写入，进行统一接口管理

import mockRequest from './mockAjax'
export const reqGetBannerList = ()=>{return mockRequest.get('/banner');}

😺step3：vuex仓库获取数据

在store->home->index.js中获取这个数据

home表示的是主页，这样写清晰，其实写成home.js也行

import {reqGetBannerList} from '@/api';//这个封装后的axios函数返回的是一个promise对象


const state = {
    bannerList:[]
};
const mutations = {
    GETBANNERLIST(state,bannerList){
        state.bannerList = bannerList
    }
};
const actions = {

    //获取首页轮播图
    async getbannerlist({commit}){
        let result = await reqGetBannerList();
        // console.log("获取到轮播！");
        if(result.data.code==200){
            commit("GETBANNERLIST",result.data.data);
        }
        
    }
};
const getters= {};

export default{
    namespaced:true,//开启命名空间
    state,
    mutations,
    actions,
    getters
}

😺step4：vuex使用数据

...
  mounted() {
    this.$store.dispatch("home/getbannerlist");
  },
  computed: {
    ...mapState({
      bannerList: (state) => state.home.bannerList,
    }),
  },
 ...