vue项目之mock数据步骤（笔记）

一、装包

npm i mockjs

二、项目src文件夹中创建mock文件夹

三、准备JSON数据（mock文件夹中创建相对应的JSON文件，注：JSON文件需要格式化，不能流空格）

四、将mock数据需要的图片放置到public文件夹中（public文件夹在打包时，会把响应资源放在dist中）

五、 src/api/下创建mockAjax.js文件，封装axios

import axios from 'axios'
//引入进度条
import nprogress from 'nprogress'
//引入进度条样式
import 'nprogress/nprogress.css'
//1利用axios对象的方法create，去创建一个axios实例
//2request就是axios，只不过稍微配置一下
const requests = axios.create({
  //基础路径，发请求的时候，路径带有api
  baseURL: '/mock',
  //代表请求超时的时间5秒
  timeout: 5000,
})
//请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) => {
  //config：配置对象，对象里面有一个属性很重要，headers请求头
  //进度条开始
  nprogress.start()
  return config
})
//响应拦截器
requests.interceptors.response.use(
  (res) => {
    //成功的回调函数：服务器响应数据回来后，响应拦截器可以检测到，可以做一些事情
    //进度条结束
    nprogress.done()
    return res.data
  },
  (error) => {
    //响应失败的回调函数
    return Promise.reject(new Error('faile'))
  }
)

//对外暴露
export default requests

六、mock文件夹下创建mockServe.js 开始mock数据

// 先引入mockjs模块
import Mock from 'mockjs'
// 把JSON数据格式引入进来
// [JSON数据格式根本没有对外暴露，但是可以引入]，因为 webpack默认对外暴露的：图片、JSON数据格式
import banner from './banner.json'
import comparison from './comparison.json'

// 模拟首页大轮播图的数据
// mock数据:第一个参数：请求地址   第二个参数：请求数据（200代表请求成功，data代表数据）
Mock.mock('/mock/banner', {
  code: 200,
  data: banner,
})
Mock.mock('/mock/comparison', {
  code: 200,
  data: comparison,
})

mockServe.js文件在入口文件main.js中引入（至少需要执行一次，才能模拟数据）

main.js中

//引入mockserver.js---mock数据
import '@/mock/mockServe.js'

七、 src/api/index.js中写请求

import mockRequests from './mockAjax'

//获取轮播图的接口
export const reqGetBannerList = () =>
  mockRequests({
    url: '/banner',
    method: 'get',
  })

//获取双争评比接口
export const reqGetComparison = () =>
  mockRequests({
    url: '/comparison',
    method: 'get',
  })

八、 vuex仓库中获取数据保存到仓库中（这里可以不用vuex，直接在页面获取数据）

// state：仓库存储数据的地方
import { reqGetBannerList, reqGetComparison } from '@/api'
const state = {
  bannerList: [],
}
// mutations：修改state的唯一手段
const mutations = {
  GETBANNERLIST(state, bannerList) {
    state.bannerList = bannerList
  },
}
// actions：处理action，书写自己的业务逻辑、也可以处理异步
const actions = {
  async getBannerList({ commit }) {
    let result = await reqGetBannerList()

    if (result.code == 200) {
      commit('GETBANNERLIST', result.data)
    }
  },
  
}
// getters：计算属性，用于简化仓库数据，让组件获取仓库的数据更方便
const getters = {}

// 对外暴露
export default {
  state,
  mutations,
  actions,
  getters,
}

九、组件页面内拉取仓库数据

xxx.vue页面中，其中bannerList数组就是最终mock的数据。这样就可以脱离后端整页面啦~

import { mapState } from 'vuex'
export default {
  name: 'LeftArea',
  mounted () {
    //派发action：通过vuex发起ajax请求，将数据仓储在仓库当中
    this.$store.dispatch('getBannerList');   
  },
  computed: {
    ...mapState({
      bannerList: state => state.home.bannerList
    })
  }
}

vue项目之mock数据步骤（笔记）

猜你喜欢