Varias formas de usar datos simulados en el proyecto

Varias formas de usar datos simulados en el proyecto

• Antecedentes de la demanda : en un entorno grande con front-end y back-end separados, el front-end necesita obtener los datos de la interfaz de back-end para representar la página. En este caso, cuando el progreso del desarrollo del back-end está retrasado, el desarrollo del front-end también se ve obstaculizado. Por lo tanto, el front-end necesita datos de simulación estáticos para la depuración.

• Método de generación de datos simulados (datos de simulación) :       

       Crear manualmente. Sin embargo, el problema con este método también es obvio, especialmente cuando el contenido de datos es más complejo o cuando el volumen de datos es grande, la creación de datos simulados consume mucho tiempo.

       Usa mockjs. Mockjs puede generar datos simulados de acuerdo con la plantilla de datos. Muchos desarrolladores ahora usan mockjs para generar datos simulados. El método descrito en este artículo también se basa en mockjs.

       Use una plataforma simulada en línea de terceros. Por ejemplo: Easy Mock

• Simulacro de combate de datos

        1. Instalar npm install mockjs

        2. Cree una nueva carpeta simulada en el directorio del proyecto y coloque los contenidos relacionados con los datos simulados aquí.

    3. Construir datos simulados

//mock/data/index.js
const Mock = require("mockjs");
module.exports = [
  Mock.mock("/mock/getData", {
    "data|10": [
      {
        "key|+1": 1,
        "words|1": ["哈哈", "嘿嘿", "biubiu", "啾啾", "喵喵","啦啦"],
        "activity|1": ["吃饭", "睡觉", "打豆豆"]
      }
    ]
  })
];

    4. Active el servicio de datos simulados:

        Método uno:

               Importe archivos de datos simulados en el archivo de entrada y solicite datos simulados

import React,{Component} from "react";
import axios from "axios";
import '../mock/data/index';

class App extends Component {
    constructor(props) {
    	super(props);
    	this.state = {
      		mockData: ""
    	};
  	}
    componentDidMount(){
        axios.get("/mock/getData").then(res => {
      		console.log("This is mock data : ", res.data);
             this.setState({
        		mockData: res.data
     		});
    	});
    }
    render() {
        return (
        	<div>
            <h2>mock数据：</h2>
            <div>{this.state.mockData}</div>
            </div>
        )
    }
}

En este momento, la salida de datos simulados se puede ver en la consola y en la página. Sin embargo, es necesario hacer referencia a este método de uso en todos los archivos que utilizan datos simulados. Si no utiliza datos simulados después de la depuración conjunta, también debe realizar comentarios manualmente.

Hay otros dos puntos a tener en cuenta:

1. Los datos simulados solicitados de esta manera no se capturan en la red del navegador porque es un ajax falso
2. Es imposible solicitar datos al enviar ajax con fetch. Mockjs puede no admitir fetch en este momento.

            Método 2: Configure el archivo package.json del proyecto e inicie el servicio simulado a través del nodo.

            Crear archivo mockServer.js

//mock/server/mockServer.js
let express = require("express"); //引入express
let Mock = require("mockjs"); //引入mock
let app = express(); //实例化express
//设置允许跨域
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  next();
});

app.get("/mock/getData", function(req, res) {
  res.json(
    Mock.mock({
    "data|10": [
      {
        "key|+1": 1,
        "words|1": ["哈哈", "嘿嘿", "biubiu", "啾啾", "喵喵","啦啦"],
        "activity|1": ["吃饭", "睡觉", "打豆豆"]
      }
    ]
  })
});
app.listen("4000", () => {
  console.log("监听端口 4000");
});

            Modifique la configuración de package.json, y luego solo necesita ejecutar npm simulacro después de que se ejecute el proyecto.

//package.json部分代码
"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start && npm run mock",
    "type-check": "tsc",
    "pm2:start": "npm run build && pm2 startOrRestart ecosystem.config.js --env production",
    "pm2:stop": "pm2 stop linkchain",
    "pm2:deploy": "pm2 deploy ecosystem.config.js dev",
    "mock": "node ./mock/server/mockServer"//开启mock服务
  }

Solicitar datos simulados de esta manera puede capturar la información solicitada en la red del navegador.

Sin embargo, este método también tiene una deficiencia: no se puede lograr la carga en caliente. Cada vez que se modifican los archivos relacionados con los datos simulados, se debe eliminar el servicio simulado actual y reiniciar el servicio simulado nuevamente para que surta efecto, lo que también agregará algunos problemas al desarrollo.

Por supuesto, definitivamente hay otras formas mejores de usar datos simulados en el proyecto, ¡y los actualizaré después de aprender!