经过前几天的介绍，我们现在已经对 Umi 部分体系有了一定的了解，今天我们就来编写一个中后台中比较简单的页面，先上效果图吧。
需求
先停下来思考 3 秒，如果是你拿到这个需求，你要开始编写这个页面，你会怎么做，大概是怎么编写页面的，样式布局之类的你会怎么设计？
3
2
1
新建页面
新建文件 src/pages/listcard/index.tsx
import React from "react"; const ListCard = () => { return <div>ListCard Page</div>; }; export default ListCard;
全局布局中增加菜单配置
修改 src/layouts.tsx 文件中的 menuHash 加上我们新增的页面“卡片列表”。
- import { PieChartOutlined, UserOutlined, } from "@ant-design/icons"; + import { PieChartOutlined, UserOutlined, TableOutlined } from "@ant-design/icons"; const menuHash: any = { "/": { label: "首页", icon: <PieChartOutlined />, }, user: { label: "用户", icon: <UserOutlined />, }, + listcard: { + label: "卡片列表", + icon: <TableOutlined />, + }, };
很容易看出来，就算我们没有修改上面的 menuHash 数据，我们的菜单也会出现 lastcard 的选项。这是我们上节课在菜单与权限上，将菜单与路由关联起来的好处。
整个流程是新建页面文件，通过约定式路由的能力，自动生成了新的路由配置，路由配置通过我们的方法类转换成菜单数据绑定到 Layout 中的 Menu 组件。
模拟页面数据
我们通过简单的循环生成我们需要的数据。用于列表页面的渲染。
const list: any[] = []; for (let i = 1; i < 10; i += 1) { list.push({ id: i, title: "卡片列表", description: "Umi@4 实战教程，专门针对中后台项目零基础的朋友，不管你是前端还是后端，看完这个系列你也有能力合理“抗雷”，“顶坑”", }); }
重度使用 Antd 组件
在中后台项目中，一定要非常重度的使用 Antd 的组件，因为这会让你少写非常多的样式，特别是在你的客户还没有审美疲劳的前提下，没改任何一处 Ant Design 的设计规范时。
列表页面我们都可以通过使用 Antd 的 List 来渲染。
<List rowKey="id" grid={{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 4, }} dataSource={[{}, ...list]} renderItem={(item) => { return <div>item</div> }} />
这里需要注意的是 dataSource 我们并不是直接取 list，而是在 list 的前面放了一个空的对象，这是为了来渲染前面的 新增 卡片而添加的。
然后我们就只要关注 renderItem 需要返回的内容了。
Item 项我们需要返回的是一个卡片
<Card hoverable actions={[<a key="option1">操作一</a>, <a key="option2">操作二</a>]} > <Card.Meta avatar={ <Avatar size={48} src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png" /> } title={<a>卡片列表</a>} description={ <Paragraph ellipsis={{ rows: 3 }}>Umi@4 实战教程，专门针对中后台项目零基础的朋友，不管你是前端还是后端，看完这个系列你也有能力合理“抗雷”，“顶坑”</Paragraph> } /> </Card>;
如果是第一个空对象的时候，我们要渲染成我们的新增卡片。
<Button type="dashed" style={{ width: "100%", height: "201px" }}> <PlusOutlined /> 新增产品 </Button>;
简单的整理之后，就可以得到我们的 renderItem
renderItem={(item) => { if (item && item.id) { return ( <List.Item key={item.id}> <Card hoverable actions={[ <a key="option1">操作一</a>, <a key="option2">操作二</a>, ]} > <Card.Meta avatar={ <Avatar size={48} src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png" /> } title={<a>{item.title}</a>} description={ <Paragraph ellipsis={{ rows: 3 }}> {item.description} </Paragraph> } /> </Card> </List.Item> ); } return ( <List.Item> <Button type="dashed" style={{ width: "100%", height: "201px" }}> <PlusOutlined /> 新增产品 </Button> </List.Item> ); }}
值得注意的是以上所有的代码，关于样式我们只写了 style={{ width: "100%", height: "201px" }}。甚至我们都没有新建样式文件。
回过头去看整个需求和实现，是不是发现非常的简单了？所以有一个好的组件库对于能否早点下班是非常关键的，你一定要有一个你非常喜欢并且非常熟悉的组件库，你甚至可以不用理会它的实现，但是它长什么样子，有什么效果，你一定要熟记于心。当然并不一定非要是 Antd，你可以选择的你自己喜欢的组件库取深入了解，但是我很推荐 Antd ，他是我觉得 React 社区质量最高的组件库，没有之一。
