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服務數據，並不會在真正發送請求，而是假請求