vue项目搭建mock服务（利用MockJs）

一，mockjs模拟banner和floor接口操作，组件获取数据

1.在vue根目录下创建mock文件夹，创建banner.json和floor.json, mockServer.js(提供服务，模拟接口)    安装mockjs  npm  i  mockjs

mockServer.js 文件内容

//正儿八经的模拟接口
import Mock from 'mockjs'
import banner from './banner.json'  //json数据被引入之后会变为真正的数组，不再是json串了
import floor from './floor.json'  //json数据被引入之后会变为真正的数组，不再是json串了

//第一个参数，是以后我们要请求的模拟接口路径
//第二个参数，是访问这个接口后返回的数据
//   '/mock/banner'   /mock不能省，因为这个并不是去发送ajax请求,
// 发请求可以省，是因为我们在axios配置了baseUrl
// 这个不是发请求，是模拟整个接口
Mock.mock('/mock/banner',{code:200,data:banner})
Mock.mock('/mock/floor',{code:200,data:floor})

//最后切记在入口文件去引入一下，代表这个文件一开始就会执行

2.在入口文件main.js导入mock,    

import '@/mock/mockServer'

 

3.在 ajax文件夹中新建mockAjax.js, 二次封装关于mock的ajax

 

mockAjax.js文件内容

//对axios的二次封装
// 配置基础路径和超时限制
// 添加进度条信息  nprogress
// 返回的响应不再需要从data属性当中拿数据，而是响应就是我们要的数据
// 统一处理请求错误, 具体请求也可以选择处理或不处理
import axios from 'axios'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'


const service = axios.create({
  baseURL: '/mock',  // 配置基础路径
  timeout: 20000,  //和超时限制
});


//请求拦截器
//请求拦截器内部一般不会处理错误的信息
service.interceptors.request.use(config => {
  //config是发送请求的配置对象，必须处理完返回这个配置对象
  //开启我们的进度条
  NProgress.start()
  return config
});
// 响应拦截器
service.interceptors.response.use(
  response => {
    //停止进度条
    NProgress.done()
    //返回响应的时候，直接返回响应的data
    return response.data
  },
  error => {

    NProgress.done()

    alert('请求出错' + error.message || '未知错误')
    //以后不允许用户继续处理： 中断promise链
    return new Promise(() => {}) //返回pending状态的promise 中断
    //以后它允许用户继续对错误进行处理
    // return Promise.reject(error)
  }
);


export default service

 

4.在api---index.js中，使用mock的接口去请求 banner数据 

引入二次封装的ajax;    import mockAjax from '@/ajax/mockAjax'

// 使用mock的接口去请求 banner数据   get 请求     /banner
export const reqBannerList = () => mockAjax.get('/banner')
export const reqFloorList = () => mockAjax.get('/floor')

5.在入口文件main.js中导入mock接口函数

//这个是为了测试接口请求函数  后期也会使用这样的方式去使用

import * as API from '@/api'

//这个是为了测试接口请求函数  后期也会使用这样的方式去使用
import * as API from '@/api'
// console.log(API)
 API.reqBannerList().then(v=> console.log(v))
// API.reqFloorList()

请求mock服务数据，并不会在真正发送请求，而是假请求