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})
},[])