AntdPro 入门分享beta

基础准备

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

1. https://www.runoob.com/w3cnote/es6-tutorial.html    ES6，js新的标准，目前有更为新的标准，目前大家普遍解析比较好的还是ES6这个版本
2. 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',
    },
  });
}