Acerca de las operaciones de mockjs

　　En el modo de desarrollo con el front-end y el back-end separados, el front-end necesita solicitar datos del back-end (solicitud ajax), pero en el proceso de desarrollo real, el front-end y el back-end estarán de acuerdo. en un documento de interfaz, pero el progreso de desarrollo del front-end y el back-end no es consistente, cuando el back-end no tiene funciones de interfaz perfectas, el front-end necesita simular la devolución de datos localmente, y mockjs necesita ser utilizado en este momento.

Instalar en pc

npm instalar mockjs --save-dev

Estructura de directorios

configurar

1. config.js bajo api: configure el procesamiento de intercepción de axios

import axios from 'axios'

// 创建一个axios实例
const service = axios.create({
    //请求超时配置
    timeout:3000
})
//添加请求拦截器
service.interceptors.request.use(
    config => {
        return config
    },
    err => {
        console.log(err)
    }
)
//添加响应拦截器
service.interceptors.response.use(
    response => {
        let res = {}
        res.status = response.status
        res.data = response.data
        return res
    },
    err => {
        console.log(err)
    }
)

export default service

Otro escenario de aplicación, secuestrar la solicitud, obtener el token y agregar el token a la solicitud:

// 请求拦截器
axios.interceptors.request.use(config => {
    const token = localStorage.getItem('userToken');
    if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
      config.headers.accessToken = token;
    }
    return config;
  }, 
  error => {
    return Promise.reject(error);
  })

2. index.js en el directorio simulado

import Mock from 'mockjs'
import homeApi from './home'
import userApi from './user'


// 设置200-2000毫秒延时请求数据
// Mock.setup({
//   timeout: '200-2000'
// })

// 首页相关
// 拦截的是 /home/getData
Mock.mock(/\/home\/getData/, 'get', homeApi.getStatisticalData)

// 用户相关
Mock.mock(/\/user\/getUser/, 'get', userApi.getUserList)
Mock.mock(/\/user\/del/, 'get', userApi.deleteUser)
Mock.mock(/\/user\/batchremove/, 'get', userApi.batchremove)
Mock.mock(/\/user\/add/, 'post', userApi.createUser)
Mock.mock(/\/user\/edit/, 'post', userApi.updateUser)
Mock.mock(/\/home\/getData/, 'get', homeApi.getStatisticalData)

casa.js

usuario.js

maquetas

Mock.mock(rurl, rtype, function(opciones)) 
Mock.mock(rurl, rtype, plantilla) 
indica que cuando se interceptan solicitudes ajax de rurl y rtype, se generarán datos simulados de acuerdo con la plantilla de datos y se devolverán como datos de respuesta . 

Mock.mock(rurl, rtype, function(opciones)) 
registra la función utilizada para generar los datos de respuesta. Cuando se intercepta una solicitud de Ajax que coincida con rurl y rtype, se ejecutará la función función (opciones) y el resultado de la ejecución se devolverá como datos de respuesta. 
Entre ellos: 
rurl opcional 
Indica la url que se interceptará, que puede ser una cadena o un 
rtype normal Opcional 
Indica el método de solicitud ajax que se interceptará, como get, post 
template opcional 
Plantilla de datos, que puede ser un objeto o una 
función de cadena ( opción) opcional 
Indica la función utilizada para generar los datos de respuesta

3.principal.js


import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'


//全局配置
import http from '@/api/config'
import './mock'

//第三方包

Vue.prototype.$http = http
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')


4、组件中的方法如何使用：

      this.$http.get('/home/getData').then(res => {
        //
      })

Acerca de las operaciones de mockjs

Supongo que te gusta