antd pro学习入门笔记+todolist实例

AntD Pro零散笔记

antd pro 4.0是一个集成了前后端服务、mock模拟接口、dva容器、typescript、less的一个解决方案，有助于快速的二次开发（不过感觉脚手架真的很大）

糟心的初始化

安装初始化环境让我很头疼，弄了一下午

首先yarn creat umi这个写法是add到global环境之后再执行create-umi

但是由于我yarn的缓存位置没有使用默认位置，这里就疯狂报错，网上的环境配置和更改.cmd并没有起到帮助

之后通过cnpm create umi终于解决了，但是cnpm i一直在报错，然后我把依赖删掉重新用了官网推荐的tyarn

依赖包下了好久，然后第一次启动项目很慢很慢，不过一个下午终于还是启动了

记一下常用的目录和文件

/config/config.ts：配置路由和菜单

/mock/：要学习的模拟数据接口

/public/：静态资源目录

/src/assets/：前端引入资源目录

/src/components/：常用公共组件

/src/layouts/：常用布局

/src/locals/：国际化文件夹

/src/models/：数据模型

/src/pages/：页面和区块组件

/src/services/：接口函数获取数据

/src/utils/：工具文件夹：authorize（权限）、request（请求）、utils（工具函数）

/global.tsx：全局函数

使用区块模板

很简单的用右下角的浮窗启动资产页面

新加入页面之后由于路由config更新不及时的问题，需要断掉重新打开一次项目，才能加入区块组件到新页面

权限管理

打开Authorized.ts

看见getAuthority函数找到authority.ts有两个一个set一个get

设置权限主要是在model/login.ts中用到

具体细节还没看懂，但是肯定是根据接口拿到的数据来更新权限的

数据请求

首先是能看到mock是我们自己的模拟数据比如mock/user.ts

在页面附近的service.ts中可以看见自定义的调用接口的函数他们调用了mock或者_mock文件的数据

比如个人中心页面service.ts中定义的queryCurrent函数是用来请求根目录下mock/user.ts中的

'GET /api/currentUser'接口，queryCurrent函数被个人中心页面下的model.ts即模型引用了，最后是index.tsx中使用了connect连接了数据并用了Modalstate接口，整个页面的数据流反向入下面截图

然后因为使用了connect所以数据以及dispatch方法都会在组件的this.props中

model.ts中effect是我们获取数据的方式其中的yied类型函数中的put相当于调用了reducers方法

这种方式形如redux的dispatch，type对应reducers对象中的属性名

关于connect中的参数其中一个是获取数据的请求另一个loading不知道来源是哪里

然后百度一下看见了一个可能比较容易理解的解释

https://blog.csdn.net/sinat_36146776/article/details/106519540

loading.effects[‘accountAndcenter/fetchCurrent’]表示当调用完毕该effects方法之后由true变为false

好像是dva的东西集成在umi中的一个用法orz

至于connnect中的参数定义在了model文件夹中的connect.d.ts中，会给出loading和其他连接参数的接口定义

手动新建页面

1.不通过umi的导入而是自己编写页面和环境

2.在pages下新建一个自定义的mall文件夹，下面新建index.js

3.config.ts中配置路由

4.更新页面之后就能看到了

umi中mock怎么用？配合service文件

用json模拟然后mock产生数据接口，前端模拟请求

数据来源：https://pvp.qq.com/web201605/js/herolist.json

mock定义的接口可以直接调用不需要请求头http://localhost:8000/api/herolist

的确拿到了数据列表

import herolist from '../../herolist'
import {
   Request,Response} from 'express'
export default{
   
    //可以用GET和POST,可以返回对象或者生成对象的函数
    'GET /api/herolist':[
        ...herolist
    ],
    'GET /api/heros': function(req:Request,res:Response){
   
        //可以延迟
        setTimeout(()=>{
   
            res.json({
   herolist,state:"ok"})
        },3000)
        
    }
    
}

export default () => {
   
    fetch('/api/herolist').then(res=>{
   
        //console.log(res)
        return res.json()
    }).then(res=>{
   
        console.log(res)
    })
    fetch('/api/heros').then(res=>{
   
        //console.log(res)
        return res.json()
    }).then(res=>{
   
        console.log(res)
    })
  return (
    <>
      <h1>mall新页面</h1>
    </>
  );
};

现在目前为止都是测试mock，但是项目中真正应用接口应该配置service中的异步函数（然后在model中调用）

把index.js改成index.tsx，重新启动项目

import React from 'react';
import {
   getHeroList}from '../../services/heros'
export default () => {
   
    // fetch('/api/herolist').then(res=>{
   
    //     //console.log(res)
    //     return res.json()
    // }).then(res=>{
   
    //     console.log(res)
    // })
    // fetch('/api/heros').then(res=>{
   
    //     //console.log(res)
    //     return res.json()
    // }).then(res=>{
   
    //     console.log(res)
    // })
    getHeroList().then((res)=>{
   
      console.log(res)
    })
  return (
    <>
      <h1>mall新页面</h1>
    </>
  );
};

数据请求后放到状态管理model

全局数据放到全局model，单页面数据放到页面文件夹model（方便识别管理）

这里在model文件夹下面新建mall.ts

import {
   Effect,Reducer} from 'umi'
import{
   getHeroList}from '../services/heros'

const HerosModel:any={
   
    //命名空间
    namespace:'heros',
    //状态
    state:{
   
        herolist:[],
    },
    effects:{
   
        *fetchHeroList(_,{
   call,put}){
   
          const res= yield call(getHeroList)
          //console.log(res)
          yield put({
   
              type:'saveHerolist',
              payload:res
          })
        }
    },
    reducers:{
   
        saveHerolist(state:any,action:any){
   
            return{
   
                ...state,
                herolist:action.payload
            }
        }
    }
}
export default HerosModel

然后修改mall/index.tsx

import React, {
    useEffect } from 'react';
import {
    getHeroList } from '../../services/heros'
import {
    connect, Dispatch } from 'umi'
const HeroMall = (props: any) => {
   
  console.log(props)