about

Recently, I practiced the use of React hook and wanted to do data interaction. Since there is no background interface, I wanted to realize the interaction through simulated data. Jsonp was used before but the emulation server was manually enabled; Instead of using MockJS to randomly generate mock data, you can simply write the actual data you want.

Version is introduced

Mockjs (Yarn Add MockJS) MockJS (Yarn Add MockJS)Copy the code

Project start

# git clone https://github.com/livaha/ReactHook-mockjs.git
# cd ReactHook-mockjs
# yarn
# yarn start
Copy the code

Project Instructions

The first entry is a direct GET request

Enter the search content in the search box and send the POST request

Project presentations

Get indicates the simulated data obtained by the request

Project implementation overview

The use of hooks is not covered here, only the use of MockJS

1. Download MockJS

yarn add mockjs

2. Introduce MockJS in the configuration file

Here only in the development environment of webpack introduced in config/webpack config. Dev. Js

entry: [
      isEnvDevelopment &&
        require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appIndexJs,
+      paths.appIndexJs_dev,
    ].filter(Boolean),
    
    ....
    
    plugins: [
      new webpack.DefinePlugin({
          'process.env': {
              NODE_ENV: '"mork"'}}),... ] .filter(Boolean),Copy the code

Modify config/paths.js so that the MockJS file is only introduced in the development environment, in this case to create two index_dev.js, index_dev.js for production and index_dev.js for development


module.exports = {
   appIndexJs: resolveModule(resolveApp, 'src/index'),
+  appIndexJs_dev: resolveModule(resolveApp, 'src/index_dev'),};Copy the code

3. Introduce different index.js

Config/webpack config. Dev. Under the js is index_dev js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
+ process.env.NODE_ENV=='mork' && require('./data');

ReactDOM.render(<App />, document.getElementById('root'));

Copy the code

4. The SRC /data directory

SRC /data/index.js(can import multiple files)

require('./movie.js')
Copy the code

SRC /data/movie.js(omitted data below, note get and POST simulation data)

/ / use the Mocklet Mock = require('mockjs');
Mock.mock('init_movie'.'get', {
	Search: [
		{
			Title: 'Ice Age',
			Year: '2002',
			imdbID: 'tt0268380',
			Type: 'movie',
			Poster:
				'https://m.media-amazon.com/images/M/MV5BMmYxZWY2NzgtYzJjZC00MDFmLTgxZTctMjRiYjdjY2FhODg3XkEyXkFqcGdeQXVyNjk1Njg5NTA@._V 1_SX300.jpg',
		},
	],
	totalResults: '1107',
	Response: 'True'}); Mock.mock('search_movie'.'post', {
    "Search": [{"Title": "Iron Man"."Year": "2008"."imdbID": "tt0371746"."Type": "movie"."Poster": "https://m.media-amazon.com/images/M/MV5BMTczNTI2ODUwOF5BMl5BanBnXkFtZTcwMTU0NTIzMw@@._V1_SX300.jpg"},]."totalResults": "9592"."Response": "True"
})
Copy the code

You’re done

When you add data later, you can introduce multiple mock files like movie.js in SRC /data/index.js to distinguish the files.

Making the address