其他分享
首页 > 其他分享> > mock插件使用

mock插件使用

作者:互联网

mock插件使用

[官网]

1、下载插件mockjs

npm install mockjs --save-dev

2、在src中,创建mock文件

3、准备json假数据 (在mock中创建相应的.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"
    }
]

4、mock虚拟数据,mock文件中新建mockServer.js

import Mock  from 'mockjs'
//把json数据格式引入进来
//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})	
//记得要在main.js中引入一下
import '@/mock/mockServer'

5、配置mock请求路径---api文件

//对axios进行二次封装
import axios from "axios";
import nProgress from "nprogress";
//引入进度条。。看文档
import nprogress from "nprogress";
//要引入进度条样式
import "nprogress/nprogress.css"
// nprogress  start 进度条开始。done进度条结束

//1、利用axios对象的方法create,去创建一个axios实例
const requests =axios.create({
    //配置对象
    //基础路径,requests发出的请求在端口号后面会跟改baseURl
    baseURL:"/mock",
    //代表请求超时的时间5s
    timeout:5000,
})
//请求拦截器,在请求发出之前做些事情
requests.interceptors.request.use((config)=>{
   //config:配置对象,对象里面有个属性很重要,header请求头
   //进度条开始
   nProgress.start();
   return config
})
//响应拦截器
requests.interceptors.response.use((res)=>{
    //成功回调函数,服务器响应数据回来以后,响应拦截器可以检测到,可以做一些事情
    //进度条结束
    nprogress.done();
    return res.data
},(error)=>{
    //响应失败回调函数,如终结Promise链
    return Promise(new Error('fail'));
})
//对外暴露
export default requests;
//当前这个模块:AIP进行统一管理
import requests from "./request";
import mockRequests from './mockAjax'

//三级联动的接口
export const reqCategoryList=()=>requests({url:'/product/getBaseCategoryList',method:'get'})

//获取banner
export const reqBannerList=()=>mockRequests({url:'/banner',method:'get'})

标签:插件,json,nprogress,使用,import,requests,banner,mock
来源: https://www.cnblogs.com/jiajia-hjj/p/15865199.html