Prefacio : Cuando el front-end y el back-end están interactuando con el back-end, cuando no se obtienen los datos del back-end, los datos deben ser simulados por sí mismos para mostrarlos en la página, lo que mejora nuestra eficiencia de desarrollo. Al mismo tiempo, también solicitamos el formato de datos que queremos del back-end, y finalmente obtenemos el Los datos finales solo necesitan cambiar la interfaz. En este momento, usamos nuestros poderosos datos para simular
datos simulados: datos simulados
1. Datos simulados: datos simulados
sitio web oficial de mockjs : http://mockjs.com/
Documentación oficial de mockjs : https://github.com/nuysoft/Mock/wiki/Getting-Started
Método de uso específico
El primer paso es instalar mockjs
npm instalar mockjs
El segundo paso es crear un directorio simulado para generar datos simulados
例如：course.js
import Mock from "mockjs";
//mock课程数据
var result=Mock.mock({
code: 200,
msg: "操作成功",
data: {
current_page: 1,
last_page: 18,
total: 178,
"list|10": [
{
id: "@id", //模拟id
"price|100-200.1-2": 100, //模拟小数，在计算机中也称浮点数
"has_buy|1": [0, 1], //模拟状态值,0,1,2,
title: "@ctitle", //模拟中文标题
address: "@county(true)", //模拟省市县
"teachers_list|1": [
{
course_basis_id: "@id",
id: "@id",
teacher_avatar: "@image('150x120', '#ff0000', '1909A')", //模拟图片
teacher_name: "@cname" //模拟中文姓名
}
]
}
]
}
});
export default result;
//创建mock的入口文件，并配置请求的接口地址，提交方式，返回的假数据
import Mock from 'mockjs'
//导入的模拟数据
import courseData from "./course";
/**
* Mock.mock( rurl, rtype, template )
* rurl:请求的接口地址
* rtype:提交方式
* template:返回数据
*/
Mock.mock("http://www.1909A.com/coureslist", "get", courseData);
Paso 3: inyecte los datos simulados en main.js
//注入mock
import './mock'
Paso 4: Solicite datos en el componente a solicitar
axios.get('http://www.1909A.com/coureslist').then(res=>{
console.log(res)
})
二 、 simulacro fácil
easy-mock: Genera datos falsos en línea basados en mockjs. Es una herramienta que puede editar datos en línea.
Sin embargo, el motivo de la solicitud es el acceso inestable. No se recomienda su uso.