Plusieurs façons d'utiliser les données fictives dans le projet

Plusieurs façons d'utiliser les données fictives dans le projet

• Contexte de la demande : dans un environnement de grande taille avec un serveur principal et un serveur principal séparés, le serveur principal doit obtenir les données de l'interface principale pour afficher la page. Dans ce cas, lorsque la progression du développement principal est en retard, le développement frontal est également entravé. Par conséquent, le frontal a besoin de données de simulation statiques pour le débogage.

• Méthode de génération de données simulées (données de simulation) :       

       Créez manuellement. Cependant, le problème avec cette méthode est également évident, en particulier lorsque le contenu des données est plus complexe ou lorsque le volume de données est important, la création de données factices prend beaucoup de temps.

       Utilisez des mockjs. Mockjs peut générer des données fictives selon le modèle de données. De nombreux développeurs utilisent désormais des mockjs pour générer des données fictives. La méthode décrite dans cet article est également basée sur des mockjs.

       Utilisez une plate-forme fictive en ligne tierce. Par exemple: Easy Mock

• Combat simulé de données

        1. Installez npm install mockjs

        2. Créez un nouveau dossier fictif dans le répertoire du projet et placez ici le contenu lié aux données fictives.

    3. Construire des données factices

//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. Activez le service de données factices:

        Première méthode:

               Importez des fichiers de données fictives dans le fichier d'entrée et demandez des données fictives

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>
        )
    }
}

À ce moment, la sortie des données factices peut être vue sur la console et la page. Cependant, cette méthode d'utilisation doit être référencée dans chaque fichier qui utilise des données fictives. Si vous n'utilisez pas de données fictives après le débogage conjoint, vous devez également commenter manuellement.

Il y a deux autres points à noter:

1. Les données fictives demandées de cette manière ne sont pas capturées dans le réseau du navigateur car il s'agit d'un faux ajax
2. Il est impossible de demander des données lors de l'envoi de ajax avec fetch. Mockjs peut ne pas prendre en charge le fetch pour le moment.

            Méthode 2: configurez le fichier package.json du projet et démarrez le service fictif via le nœud.

            Créer un fichier 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");
});

            Modifiez la configuration package.json, puis ne devez exécuter npm mock qu'après l'exécution du projet.

//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服务
  }

La demande de données factices de cette manière peut capturer les informations de demande dans le réseau du navigateur.

Cependant, cette méthode présente également un inconvénient: le chargement à chaud ne peut pas être atteint. Chaque fois que les fichiers liés aux données fictives sont modifiés, le service fictif actuel doit être supprimé et le service fictif redémarré à nouveau pour prendre effet, ce qui ajoutera également des problèmes au développement.

Bien sûr, il existe certainement d'autres meilleures façons d'utiliser des données fictives dans le projet, et je les mettrai à jour après avoir appris!