react项目mock工具（react模块）

本篇文章给大家谈谈react项目mock工具，以及react模块对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享react项目mock工具的知识，其中也会对react模块进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、基于umi的React项目结构介绍
• 2、手把手教你创建Ant Design Pro的React项目
• 3、umi框架的使用

基于umi的React项目结构介绍

本项目是基于umi搭建react项目mock工具的react项目mock工具，具体可以参考 Ant Design 实战教程（beta 版）

以下命令顺序执行react项目mock工具，用来完成umireact项目mock工具的初始化

然后，我们开始建项目的文件目录

修改package.json

我们运行 npm run dev 就能看到hello world.

现在我们使用的都是umi的默认配置，我们还需要自己的配置

添加 umi-plugin-react 插件

配置 config/config.js 文件

首先我们使用antd的Layout布局，修改src/pages/index.js

重新运行 npm run dev，页面就会显示出当前的界面

在pages下新建home.js文件

修改文件

保存后页面就会发生变化，Content中就会显示 Home的内容

在umi中可以直接使用css，但是并不支持scss，我们需要加两个loader，
直接npm安装 node-sass和sass-loader 即可，剩余的事情umi已经帮我们做好了。

在src/assets下新建文件夹

在src/pages/index.js 引用style.scss

在home.js同级新建home.scss 文件

在home.js引用，并修改render

用第二种方法的情况：

刷新页面发现并没有变化，打开浏览器调试窗口，查看sources

找到引用的css文件，搜索可以看到好像我们的样式确实是存在的，只不过被加上了其他的后缀(为了保证不会出现全局污染)

ps:这个问题当时我找了好久

这个是umi自己默认加上，我们并不想要这个东西，在config/config.js文件中添加配置

现在我们的项目只有一个home页面，我们多加几个，来实现跳转的功能

在home.js同级添加文件 center.js

修改home.js

修改config.js

点击页面的"个人中心"，即可跳转到个人中心页面

除了点击Link跳转页面外，我们还有其他的跳转需求，比如：返回上一个页面，或者登录后跳转。这些都可以算是事件跳转，

修改center.js

在umi中，redux是封装在dva中的，但是我们想用原始的那种redux (仅仅是个人原因)，我们就不去使用dva的模式。

在项目中actions文件主要用于处理请求、异步等，reducers文件则是处理数据以及其他的改变

在reducers目录下新建文件

因为在umi中会自动导入redux和react-redux包，所以我们不需要在安装，可以直接使用

store文件创建好了之后，修改pages/index.js

这样我们可以在所有的页面都使用store内容

修改 pages/home.js

重新启动 npm run dev

此时页面上看不到详情内容，
手动修改一下reducers/home.js 的isShowDesc值为true，保存之后在页面上就能看到详情内容
手动修改只是测试一下

下面我们来利用dispatch修改isShowDesc的值(这里不使用更简单的组件state属性来处理)

给home页面添加一个button，点击button来显示/隐藏详情

这样我们就能够点击按钮来改变详情的状态

网络请求使用fetch,使用mock模拟数据

安装 fetch、mockjs

封装一下请求方法，并使用mockjs模拟请求

在home.js中使用

保存，刷新页面后就能看到数据

Antd的主题定制有好几种方法，该项目是基于umi的，所以就是用umi配置的方法来定制。

在config/config.js 文件中添加配置

在src/assets/css 下新建theme.js文件

这里只修改一个属性值 (其他属性可以参考 文档 )

编译后，home页面的按钮主题就被修改了

至此一个基于umi的react项目结构就讲完了。

手把手教你创建Ant Design Pro的React项目

介绍

主要是使用 React 和 TypeScript 以及 Ant Design Pro 开发中后台项目，那么就会有人问“可不可开发前台”，回答是“可以”；Ant Design 是蚂蚁金服的UI框架，发展历程可以说是从 saga-redux - dva - umi - ant design ，说 ant design 是 react 的最佳实践确实是名副其实；其中我最喜欢或者说是 dva 最显著的地方就是修缮了 redux 的不足之处。

搭建

安装 cnpm，yarn，tyarn

```

npm i -g cnpm --registry=https://registry.npm.taobao.orgcnpm i yarn -gyarn global add tyarn

```

2.  Ant Design Pro 立足于 umijs 、dva，需要安装 umi

```
yarn global add umi

```

3.  创建 Ant Design Pro 项目（先创建test文件夹）

```
mkdir test

cd test

yarn create umi （这里选择 ant design pro - typescript - simple）tyarn

yarn start

```

+ config

    - config.ts  路由设计

    - proxy.ts  代理（打包后无效）

+ mock          模拟数据

+ src

    - assets    放一些静态资源文件（png，svg等）

    - component  主要放全局组件

    - layouts    权限、token获取

    - models    详细内容见dva，换言之是redux （interface、数据交互）

    - pages      页面

    - serives    请求（get,post）

    - utils      放一些公用方法

/* 以上为本人对ant design pro各个模块的理解，不足之处还请指教 */

举个栗子（dva）

TypeScript 最突出的就是类型注解，其目的就是减少对类型的试错，从而达到优化

/**  * 假设你现在要做一个博客网站，现在你要搭建的是你的博客首页 * 1. 现在你的 page 已经写好了（src/home/index.tsx和src/home/index.less） * 2. 你的后端接口也已经写好了，提供的接口就是 home (GET) * 3. 你也已经在 config/proxy.ts 中写好了代理，代理名 api **/

现在你需要创建一个 src/services/home.ts 去对接后台的接口。

import request from '@/utils/request'// ant design pro 自带（无须修改，每次请求自动携带 token）interfaceHomeParams{currentPage:number;pageSize:number;}exportasyncfunctionqueryGetMyHomeData(payload:HomeParams){returnrequest(`/api/home`,{method:'GET',params:{// 填写你需要传给后端的字段...payload,}/**        * 如果是 POST 请求，请将 params 修改成 data        **/})}

接下来，你需要创建一个 src/models/home.ts 去调用上面那个接口 （详细教程看 dva），我这是临时起意边想边写的（俗称瞎编乱造）。

import{queryGetMyHomeData}from'@/services/home'import{Effect,Reducer}from'umi';exportinterfaceDataItem{// 暂且假设后端回给你的只有（ID、博客标题、发布日期(毫秒数)、摘要）id:number;title:string;createdDate:number;brief:string;}// state 对应的类型（接口）exportinterfaceHomeState{currentPage:number;data:Array<DataItem;}exportinterfaceHomeModelType{namespace:string;// 说好听点叫做 "命名空间"state:HomeState;// 就是 stateeffects:{// effects 里面的可以调用 reducers 里面的getData:Effect,changePage:Effect,};reducers:{setData:Reducer<HomeState,setPage:Reducer<HomeState,};}constHomeModel={namespace:'home',state:{currentPage:1,data:[],},effects:{*getData({payload},{call,put}){constres=yieldcall(queryGetMyHomeData,payload);// payload 要对应 queryGetMyHomeData 的形参，否则另当别论constarr=Array.isArray(res.data)?res.data:[];// 我这里假设返回的 res.data 就是我们所需要的数据yieldput({// 将数据放到 state 里面type:'setData',payload:{data:arr,}})},*changePage({payload},{call,put}){yieldput({type:'setPage',payload});// yield take( 'setPage/@@end' );    // 阻塞等待完成再往下执行，当然我们这里并不存在一步造成的问题yieldput({type:'getData',payload});},},reducers:{setData(state,{payload}){return{...state,...payload,}},setPage(state,{payload}){return{...state,...payload,}},}}exportdefaultHomeModel;

让 src/pages/home/index.tsx 去 connect HomeModel

importReact,{useEffect}from'react';import{connect,Dispatch}from'umi';import{HomeState}from'@/models/home'interfaceHomeProps{dispatch:Dispatch;home:HomeState;}constHome:React.FC<HomeProps=(props)={// 拿到的内容可以直接使用const{dispatch,home:{currentPage,data,}}=props;// 获取数据，或者说是初始化数据useEffect(()={dispatch({type:'home/getData',payload:{currentPage,pageSize:8,}})},[]);// 页码改变事件functionpageChange(page){/**        * page的修改是两个操作        * 1. 修改 page        * 2. 获取数据        * 3. 如果面临异步问题（我们这里用阻塞）-- 这里不存在此问题        **/dispatch({type:'home/changePage',payload:{currentPage:page,pageSize:8,}})}return(// ... 这里我就省略不写了);}exportdefaultconnect(home:HomeState=home)(Home);

还有一点要 提醒 ，effects 里面的 和 reducers 里面的函数名不能一样。

有关于 Dva 对 Redux 的修改，见下图

umi框架的使用

umi官方文档

对比以往使用的 create-react-app 搭建react项目，根据需要react项目mock工具我们还得集合webpack打包，或者引入redux状态管理器等，而umi ---
通过 create-umi提供脚手架能力，
然后我们可以选择需要生成的项目类型react项目mock工具：

确定后，会根据选择自动创建好目录和文件

安装依赖， yarn start 启动项目。

umi 以路由为基础的，支持类 next.js 的 约定式路由 ，以及各种进阶的路由功能，并以此进行功能扩展，比如支持 路由级的按需加载 。

(1) 无需手动配置路由
根据pages目录自动生成路由配置，会根据 src / pages 下 文件名自动生成路由
（也可以配置.umirc.js中的 routes 属性，此配置项存在时则不会对 src/pages 目录做约定式的解析）
(2) 其react项目mock工具他基础知识react项目mock工具：

(3)常用的路由操作

(1)全局layout
约定 src/layouts/index.js 为全局路由，返回一个 React 组件，通过 props.children 渲染子组件。
比如：

(2)不同的全局layout
可以在 layouts/index.js 对 location.path 做区分，渲染不同的 layout 。
比如想要针对 /login 输出简单布局:

(3)尝试
要求： 登录页和首页显示不同的布局

同样对 location.path 做区分，但是如果是动态路由或者嵌套路由这样的匹配是有漏洞的。

优化后：
配置路由对应的布局，默认使用NavigatorLayout

根据正则判断

用之前先把mock使用示例看看== mock.js文档
(1)在umi中使用mock： 关于react项目mock工具和react模块的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 react项目mock工具的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于react模块、react项目mock工具的信息别忘了在本站进行查找喔。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。