umi ant design pro快速使用手册

1.环境准备

从代码库拉下代码之后进入，进入终端（vscode 菜单栏 > Terminal > New Terminal），输入命令。

cd 项目文件夹
#安装项目依赖
npm install
#依赖安装完之后，启动项目
npm start

如果能访问链接http://127.0.0.1:8080，进入登录页面说明项目启动成功。

2.新增页面

在src/pages下创建新的js less文件，这里最好统一放置在一个文件夹下，目录结构如下。

config
mock
src
	pages
+		NewPage
+			index.less
+			index.tsx
		...
	...

3.添加布局

config/routes.ts文件主要负责导航栏的目录。
如果需要增加一级目录

{
	path:'/newPage',
	name:'newPage',
	icon:'smile',
	//这里对应你需要添加的页面
	component:'./NewPage'
}

二级目录

{
	path:'/newPage',
	name:'newPage',
	icon:'smile',
	//用户权限控制
	access:'canAdmin',
	routes:[
		{
			path:'/newPage/sub-page',
			name:'sub-page',
			icon:'BellOutLined',
			component:'./NewPage',
		},
		{
			path:'/newPage/sub-page2',
			name:'sub-page2',
			icon:'BellOutLined',
			component:'./NewPage2',
		}
	]
}

此时页面导航栏应该有newpage的一级菜单和两个sub_page
子菜单。

4.网络请求

请求后台接口要注意跨域问题，umi框架提供了proxy的方式来解决跨域问题。具体步骤如下：
1.在src/service下创建自己的调用后台接口的方法

import {request} from '@umijs/max'
//要调的接口
export async function getMapList(value:any){
	return request('/api/list',{
		//value是传进来的请求参数
		params:values,
		method:''POST,
	})
}

2.设置代理
config/proxy.ts文件下

export defalut{
	dev:{
		//这个/api/是依据步骤1中的接口'/api/list'来设定的
		'/api/':{
			//要代理的地址（要调用的后台接口url）
			target:'url'
			changeOrigin:true
		}
	}
}

最后可以在浏览器调试界面的Nerwork>Header>Response Headers中的x-real-url中就是你需要访问的接口完整路径。
3.调用接口
pages/NewPage/index.ts

//获取表格数据
const getTableInfo = async (value:any)=>{
	try{
		//登录
		const msg = await getMapList(values)
		//获取接口数据后的逻辑
		console.log(msg)
	} catch(e){
		console.log(e)
	}
}
//umi一般调用接口是在React.FC函数中，useEfect函数参数二为[]时，仅在挂载和卸载时执行
//不写第二个参数，会不停调用参数一方法
useEffect(()=>{
	getTableInfo({page:1,limit:20})
},[])