Datos falsos usando Mockjs en el proyecto Vue

Escenario de demanda: para obtener la interfaz de solicitud '/ api / userInfo / list'

 

Preparación del proyecto:

Primero, instale el paquete mockjs y los axios en el proyecto

npm install mockjs axios

 

Entonces, la raíz src directorio de la nueva carpeta y mock.js simulacros inferior, urls.js

 

(La estructura del directorio no es obligatoria, depende principalmente de la división de su proyecto. También puede crear un archivo de solicitud por separado, poner axios.js, mock.js y url.js para una interfaz de acabado especial

En el archivo user.vue , el código de solicitud de interfaz (tomando axios como ejemplo):

<template> 
  <div class = "api-element"> 
    <div class = "area"> 
      <el-table: data = "userTableData"> 
        <el-table-column fixed label = "日期" prop = "date" width = "150"> </el-table-column> 
        <el-table-column label = "姓名" prop = "name" width = "120"> </el-table-column> 
        <el-table-column label = "省份" prop = "provincia" width = "120"> </el-table-column> 
        <el-table-column label = "市区" prop = "city" width = "120"> </ el- table-column> 
        <el-table-column label = "地址" prop = "address" width = "300"> </ el-table-column> 
        <el-table-column label = "邮编" prop = "zip" width = "120"> </el-table-column> 
      </el-table> 
    </div> 
  </ div > 
</template> 
<script>
importar axios desde 'axios' // Introducir urios de 
importación axios desde '@ / mock / urls'   // Introducir la configuración relevante de la solicitud de interfaz preparada 
exportar default { 
  nombre: 'MockTest' , 
  data () { 
    return { 
      userTableData: [] // Definir los datos requeridos 
    } 
  }, 
  montado () { 
    //     Mock de datos, solicitar interceptar 
axios [urls.userTableData.type] (urls.userTableData.url) 
      .then ((respuesta) => {
         this .userTableData = respuesta && response.data 
        log ( el este .userTableData); 
      })
      . catch ( function (error) { 
        log (error); 
      }); 
  }, 
}
 </script>

 

Archivo de configuración relacionado con la interfaz urls.js:

Registre principalmente la dirección (requerida) y el método de solicitud (obtener, etc. para una fácil administración) requerido por cada interfaz

export default { 
    userTableData: { 
        url: '/ api / userInfo / list' , 
        escriba: 'get' 
    } 
}

 

 

Dentro del archivo mock.js:

Primero, introduzca mockjs y los valores de variables requeridos urls.js

import Mock, {Random} de 'mockjs' 
importa urls de './urls'

Luego, defina los primeros datos falsos userTableData, que es una matriz de longitud 10. Cada elemento de la matriz es un objeto, y la clave del objeto se configura de acuerdo con la tabla en vue.

let params = Mock.mock ({ // Grupo de datos 
    'userTableData | 10': [{ // Datos necesarios para el filtrado de gráficos 
        'nombre': '@cname' ,
         'fecha': '@date' ,
         'provincia': ' @province ' ,
         ' city ':' @city ' ,
         ' address ':' @county (true) @ctitle () @natural (1000,9999) number ' ,
         ' zip ':' @zip ' 
    }] 
}) 
/ / Establezca la duración de la solicitud en 200-600 milisegundos, simulando el escenario de solicitud de interfaz real 
Mock.setup ({ 
    timeout: '200-600' 
}) 
// Intercepte la solicitud de la dirección correspondiente a urls.userTableData.url, método urls.userTableData.type, valor de retorno Para params.userTableData
Mock.mock (urls.userTableData.url, urls.userTableData.type, params.userTableData) // Al solicitar esta interfaz, intercepte la solicitud y devuelva los datos correspondientes

 

Finalmente, observe la solicitud ajax en el archivo vue, y los datos devueltos en response.data son los datos falsos de params.userTableData de nuestro simulacro. Ya terminaste, puedes concentrarte en escribir lógica.

 

 

Dirección de origen

 

Registros relacionados de envío de código