Articles11
Tags0
Categories0

关于Antd Pro

关于antd pro

1.安装:yarn create umi 或 npm create umi,选择antd-design-pro

或者直接从https://github.com/ant-design/ant-design-pro/releases/tag/2.1.0下载(没有typeScripe)

2.从服务器请求菜单

在src/layouts/BasicLayout.tsx中修改menuDataRender

const [menuData,setMenuData]=useState([])

useEffect(()=>{

  fetch('/api/example.json')

  .then(response=>response.json())

  .then(data=>{

    setMenuData(data||[]);

   });

  },[]);

......

return(

  <ProLayout

    ...

    menuDataRender={()=>menuData}

    ...

   />

)

3.build之后如何使用mock

全局安装umi-serve,再修改项目中的请求地址

4.使用图片静态资源:<img src={require(‘../assets/picture.png’)}/>

5.路由和菜单:统一在config.ts配置管理

===》

(1)。路由属性:name,icon,hideChildrenInMenu,hideInMenu,authority

(2)。菜单:根据config.ts生成

(3)。面包屑:由PageHeaderWrapper生成

====》菜单跳转到外部地址:

{

path:'https://pro.ant.design/docs/getting-started-cn',

target:'_blank',

name:"文档"

}

=====》新增页面

如果页面可以利用两种自带的布局:BasicLayout以及UserLayout

//app

{

  path:'/',

  component:'../layouts/BasicLayout',

  routes:[

   {path:'/',redirect:'/dashboard/analysis'}

   {path:'/dashboard/test',component:"./Dashboard/Test"},

  ...

   ]

}

加好后会默认生成相关的路由和导航

======》带参数的路由

{

path:'/dashboard/:page',

hideInmenu:true,

name:'analysis',

component:'./Dashboard/Analysis'

}

router.push('/dashboard/anyParams');

或:go

6.Ant Design布局组件

Grid组件 Layout组件

7.区块

========》查看区块:umi block list

========》添加区块:umi block add [block url]

========》添加到路由:umi block add ant-design-pro/analysis –path=your/path/here

–path:参数指定路由

8.样式

========》样式文件类别:

(1)全局

(2)工具:utils.less

(3)模块(通用模块)

(4)页面

(5)组件

========》覆盖组件样式::global{}

9.和服务端交互:统一放在services文件夹里,utils/request.ts 是基于 fetch 的封装,便于统一处理 POST,GET 等请求参数,请求头,以及错误提示信息等

=======》请求用户信息的例子:

//services/user.ts

import request from '../utils/request';

export async function query(){

  return request('/api/users')

 }

export async function queryCurrent() {
  return request('/api/currentUser');
}

//models/user.ts

import {queryCurrent} from '../services/user'

effects:{

  *fetch({payload},{call,put}){

  ....

  const response=yield call(queryCurrent)

}

}

处理异步请求

effects:{

  *fetch({payload},{call,put}){

     yield put({

       type:'changeLoading',

       payload:true

    });

//异步请求

const response=yield call(queryFakeList,payload);

   yield put({

        type:'save',

        payload:response,

   })

  }

}

10.mock

export default{

'GET /api/users':{users:[1,2]},

'/api/users/1':{id:1},

'POST /api/users/create':(req,res)=>{res.end('OK');},

};

=====》引入Mock.js

import mockjs from 'mockjs';

export default{

  'GET /api/tags':mockjs.mock({

  'list|100':[{ name: '@city', 'value|1-100': 50, 'type|0-2': 1 }]

  })

}

添加跨域请求头

‘POST /api/users/create':(req,res)=>{

  ...

  res.setHeader('Access-Control-Allow-Origin','*');

  ...

}

模拟延迟:

'POST /api/forms':(req,res)=>{

   setTimeout(()=>{

     res.send('ok');

    },1000);

}
import { delay } from 'roadhog-api-doc';
// 调用 delay 函数,统一处理
export default delay(proxy, 1000);

====》动态Mock数据

函数:

'/api/random':(req,res)=>{

res.send(Mock.mock({


// 每次请求均产生随机值


'number|1-100':100

}))

}

11.权限路由

只须在路由配置文件 config.ts 中设置 Routes 属性即可,代表该路由的准入权限。

Author:shuo
Link:http://yoursite.com/2019/08/28/关于antd pro/
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可