1. 首页

React Hook demo + mockjs 数据模拟

关于

最近练习react hook的使用,同时想做数据交互,因为没有后台接口,因此想通过模拟数据实现交互;之前使用jsonp但需要手动启用模拟服务器; 本次模拟数据使用mockjs,不需要用它随机生成的模拟数据,简单粗暴的把想要的实际数据写上即可。

版本介绍


react使用16.8以上版本(为支持react hook) 下载mockjs (yarn add mockjs)

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文手册
专注分享前端知识,你想要的,在这里都能找到

项目启动


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

项目使用说明

首次进来是直接发送get请求

在搜索框输入搜索内容发送post请求

项目演示

get请求得到的模拟数据

React Hook demo + mockjs 数据模拟

post请求得到的模拟数据

React Hook demo + mockjs 数据模拟

项目实现概览

这里不介绍hook的用法,只介绍mockjs的使用

1、下载mockjs

yarn add mockjs

2、在配置文件引入mockjs

这里只在开发环境的webpack中引入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),

修改config/paths.js,使得只在开发环境中才会引入mockjs文件,这里是为了创建2个index.js,index.js为生产环境用,index_dev.js为开发环境用


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

3、引入不同的index.js

config/webpack.config.dev.js下的是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'));

4、src/data目录

src/data/index.js(可以引入多个文件)


require('./movie.js')

src/data/movie.js(以下为省略的数据,注意get和post模拟数据)


// 使用 Mock let 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@._V1_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" })

大功告成

以后添加数据,为了区分出文件,可以在src/data/index.js中引入多个类似movie.js等模拟文件。


github地址

作者:livaha
链接:https://juejin.im/post/5ddd12bde51d4532fa6dbdb3

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:React Hook demo + mockjs 数据模拟

链接:https://www.javascriptc.com/3826.html

« Vue 的数据响应式原理
除了负载均衡,Nginx还可以做很多,限流、缓存、黑白名单等»
Flutter 中文教程资源

相关推荐

QR code