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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手把手教你创建Ant Design Pro的React项目相关的知识,希望对你有一定的参考价值。

参考技术A 介绍

主要是使用 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)interfaceHomeParamscurrentPage:number;pageSize:number;exportasyncfunctionqueryGetMyHomeData(payload:HomeParams)returnrequest(`/api/home`,method:'GET',params:// 填写你需要传给后端的字段...payload,/**        * 如果是 POST 请求,请将 params 修改成 data        **/)

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

importqueryGetMyHomeDatafrom'@/services/home'importEffect,Reducerfrom'umi';exportinterfaceDataItem// 暂且假设后端回给你的只有(ID、博客标题、发布日期(毫秒数)、摘要)id:number;title:string;createdDate:number;brief:string;// state 对应的类型(接口)exportinterfaceHomeStatecurrentPage:number;data:Array<DataItem>;exportinterfaceHomeModelTypenamespace: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,useEffectfrom'react';importconnect,Dispatchfrom'umi';importHomeStatefrom'@/models/home'interfaceHomePropsdispatch:Dispatch;home:HomeState;constHome:React.FC<HomeProps>=(props)=>// 拿到的内容可以直接使用constdispatch,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 的修改,见下图

以上是关于手把手教你创建Ant Design Pro的React项目的主要内容,如果未能解决你的问题,请参考以下文章

手把手教你封装一个ant design的审核框组件

Ant Design Pro V5 包含演示效果创建方法

安装 ant design pro

创建页面---基于Ant-Design-Pro-2-0-的CMS管理后台入门系列

如何创建Pull Request,以开源项目ant design pro为例

Ant Design Pro V5 从零开始到用户登录鉴权(javascript版)