基础准备

按照常理需要对前端有一定的了解，尤其是es6和React的了解，以AntdPro为模板快速开启项目，可以发挥模仿的功夫照着做，我认为大概了解的有如下2个文档

https://www.runoob.com/w3cnote/es6-tutorial.html ES6，js新的标准，目前有更为新的标准，目前大家普遍解析比较好的还是ES6这个版本
https://www.runoob.com/react/react-tutorial.html React，大致了解，项目就是基于这个开发

开发流程介绍，没有前后顺序，都是必须且互相配合的模块

1.路由

本项目路由配置位于config/router.config.js文件中，框架基于umi创建，配置文件约定式的读取根目录下的.umirc.ts或者config/config.js，如果想知道为什么这样定义，可以去查看umi的源码，他的很多文件或者路由都是约定好的目路或者文件，再往下不在说这个事情，想不通的大概都是定义好的位置。下面介绍一个例子：

// user
{

authority: ['admin', 'user'],// 权限配置
path: '/user',// 路由的名称
component: '../layouts/UserLayout',// 模板页面
routes: [// 子路由，页面A里面可能包含的BCD页面
{ path: '/user', redirect: '/user/login' },
{ path: '/user/login', component: './User/Login' },//component，路由指向的页面，默认读取src/pages下的页面
{ path: '/user/register', component: './User/Register' },
{ path: '/user/register-result', component: './User/RegisterResult'，name: 'dashboard', icon: 'dashboard', },// name:多语言配置，文件在src/locales下面，icon:菜单的图标

],
},

2.页面开发

这个模仿src/pages下的页面即可，有大量的实例

3.数据请求

数据请求大致为页面--》redux--》fetch--》redux--》页面，大致是这样一个过程，redux是状态管理的库，fetch是浏览器支持的数据请求的接口，和ajax、axio差不多，可自行去查询相关资料，下面详细介绍下数据的调用

3.1.页面

如下是src/pages下的一个页面里的代码，做一下解释

import { connect } from 'dva'; // dva是umi里包含的功能，antdpro是基于umi开发，关系解释

@connect(({ chart, loading }) => ({//@connect 这种@**是一种装饰器，装饰器的意思修改类的行为
chart,//chart仅仅是一个名字，可以是src/models或者当前页面根目录的models的文件中，下一步说明下这个名字怎么来的
loading: loading.effects['chart/fetch'],// 请求的状态，可以打印loading这个属性，自己查看下他包含的值有哪些
}))

// 通过装饰器就可以把React和Redux联系在一起了，通过dispatch触发Redux事件就可以完成数据请求和状态的管理
class Analysis extends Component {
render(){
return <></>
}
}
export default Analysis;

3.2.redux文件

src/models下的文件为例：

import { queryNotices } from '@/services/api'; //引用的接口请求，@代表src目路，熟悉webpack的就能很容易懂，可以自定义任意的标识符对应任意的目录
export default {
namespace: 'chart',//命名空间，对应页面介绍里的@connect(({ chart, loading })

state: {// state状态管理，存储当前的状态值，可以通过reducers改变
collapsed: false,
notices: [],
loadedAllNotices: false,
},
effects: {
*fetchNotices(_, { call, put, select }) {
const data = yield call(queryNotices);//yield 关键字使生成器函数暂停执行，并返回跟在它后面的表达式的当前值。等待接口值的返回
const loadedAllNotices = data && data.length && data[data.length - 1] === null;
yield put({//触发reducers，更新state，有的接口还会使用callback，直接返回值给页面的发起者，那么开始的定义会变为*fetchNotices({callback}, { call, put, select })
type: 'setLoadedStatus',// 对应reducers里的"setLoadedStatus"
payload: loadedAllNotices,
});},
reducers: {
'setLoadedStatus',(state, { payload }) {
return {
...state,
collapsed: payload,
};
},
};

以上是大致解释，通常这些处理简单的需求足够

3.3.接口请求

这一步比较简单，就是对fetch封装后的函数的调用，位置在src/services下的文件，对应redux介绍中的api接口的引用，方法只介绍post和 get方法，下面拿其中一个例子说明：

import { stringify } from 'qs';//把对象转换成比如：param1=1&param2=2 这种拼接到url后面的参数的函数
import request from '@/utils/request'; // fetch封装后的函数，进行数据请求

export async function queryRule(params) {
return request(`/api/rule?${stringify(params)}`);//get形式，method:"GET"，这个就可以省略，比如下面的post就不能省略
}

export async function removeRule(params) {
return request('/api/rule', {
method: 'POST',
body: {//常规的body参数，默认封装后的'Content-Type': 'application/json; charset=utf-8',如果是FormData就不设置请求类型，通常不用修改这里，当然如果需要可以对src/utils/request.js文件进行更改适合业务的需要
...params,
method: 'delete',
},
});
}

AntdPro 入门分享beta相关推荐

编程小白入门分享三：Spring AOP统一异常处理
编程小白入门分享三:Spring AOP统一异常处理参考文章: (1)编程小白入门分享三:Spring AOP统一异常处理 (2)https://www.cnblogs.com/lxk12345/p ...
python 经典ppt_python入门分享.ppt
您所在位置:网站首页 > 海量文档 &nbsp>&nbsp计算机&nbsp>&nbspPython python入门分享.ppt24页本文档一共被下 ...
[Unity3D入门]分享一个自制的入门级游戏项目坦克狙击手
[Unity3D入门]分享一个自制的入门级游戏项目"坦克狙击手" 我在学Unity3D,TankSniper(坦克狙击手)这个项目是用来练手的.游戏玩法来自这里(http://ww ...
web 开发入门分享
分享一: 如今,各种互联网的Web应用程序层出不穷,那么如何快速入门,成长为一个优秀的Web开发工作者呢? 这个问题不容易回答,几乎所有的培训机构都不能清晰地解答. 所以对于Web开发刚刚入门的菜鸟们 ...
搞一下TDA4 | 02 TDA4VM的SDK使用入门分享
前言本系列请点击:<搞一下TDA4> 所有系列请点击:<汽车电子系列分享> 本文将会分享TDA4VM的SDK的安装和使用的一些入门经验,便于读者上手和开发这个SDK.主要内容 ...
Python小白入门分享
前话从去年7月就开始学Python语言了,直至现在快有一年时间了,在这段艰苦的时间里非常感谢CSDN,每当我遇到问题的时候都可以为我给出答案,CSDN可以称得上我这个自学狗的全能老师.在这一年里的P ...
扫盲：单片机入门分享晶振复位电路与电源
学单片机走过许多弯路,挖过许多坑,浪费了很多时间,做过实际产品后回顾过去的学习经历,发现很多坑其实是可以避免的,单片机的入门应该可以更轻松一点,借CSDN论坛一方宝地,写写我的一些学习经历,希望对刚入 ...
业余无线电入门分享 --- 考试执照
前言本篇博客主要是对Technician考试知识点的汇总. 目的是为了通过美国业余无线电管理协会 FCC(Federal Communications Commision)组织的业余无线电爱好者 ...
tk.mybatis 的入门分享
我的入门tk.mybatis的项目已放在github上,欢迎下载:链接地址.... ---------------------------------------------------------- ...

AntdPro 入门分享beta