Mock data steps of vue project (notes)

1. Packing

npm i mockjs

2. Create a mock folder in the project src folder

3. Prepare the JSON data (create the corresponding JSON file in the mock folder, note: the JSON file needs to be formatted, spaces cannot be entered)

4. Put the pictures required by the mock data into the public folder (when the public folder is packaged, the response resources will be placed in the dist)

5. Create a mockAjax.js file under src/api/ and encapsulate 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

6. Create mockServe.js under the mock folder to start mock data

// 先引入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,
})

The mockServe.js file is introduced in the entry file main.js (it needs to be executed at least once to simulate data)

main.js

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

7. Write request in src/api/index.js

import mockRequests from './mockAjax'

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

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

8. Get the data in the vuex warehouse and save it in the warehouse (here you can get the data directly on the page without using 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,
}

9. Pull warehouse data from the component page

In the xxx.vue page, the bannerList array is the final mock data. In this way, you can get rid of the whole page at the back end~

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

Mock data steps of vue project (notes)

Guess you like