AntdPro 入门分享beta

3 篇文章 0 订阅
1 篇文章 0 订阅

基础准备

按照常理需要对前端有一定的了解,尤其是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',
    },
  });
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值