ant design pro V2 学习笔记

该笔记分为两部分,前面部分为官方文档介绍,后面为实际项目改造的历程

本文档不定时更新,你想要的在实战部分

如果你对react、dva等一些概念不是很清晰,建议先看以下概念:

react:https://www.runoob.com/react/react-tutorial.html
dva:https://dvajs.com/guide/concepts.html

最终效果

最终实现了增删改查、刷新、批量删除、分页功能,并集成了登录功能,如下图所示:

  1. 下图演示登录、增删改查
    在这里插入图片描述
  2. 下图演示全字段搜索,分页
    在这里插入图片描述

Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈,我们将持续迭代,逐步沉淀和总结出更多设计模式和相应的代码实现,阐述中后台产品模板/组件/业务场景的最佳实践,也十分期待你的参与和共建。

我们基于上述目标和提供了以下的典型模板,并据此构建了一套基于 React 的中后台管理控制台的脚手架,它可以帮助你快速搭建企业级中后台产品原型。

- Dashboard
  - 分析页
  - 监控页
  - 工作台
- 表单页
  - 基础表单页
  - 分步表单页
  - 高级表单页
- 列表页
  - 查询表格
  - 标准列表
  - 卡片列表
  - 搜索列表(项目/应用/文章)
- 详情页
  - 基础详情页
  - 高级详情页
- 结果
  - 成功页
  - 失败页
- 异常
  - 403 无权限
  - 404 找不到
  - 500 服务器出错
- 个人页
  - 个人中心
  - 个人设置
- 帐户
  - 登录
  - 注册
  - 注册成功

谁在使用

目前蚂蚁金服和阿里巴巴内部上百个项目正在尝试 Pro 的研发模式,如果你和你的组织使用了这个产品,欢迎到 Ant Design Pro Users 留言。

For 设计者

如果你是产品或设计师,你可以找到和 Pro 一一配套的 Axure/Sketch 设计资源,大幅度提升设计效率和沟通效率。

For 开发者

如果你是工程师,在接下来的文档中,我们将具体介绍如何使用这个脚手架。如果你是蚂蚁金服的内网用户,请直接跳到文档 开始使用(蚂蚁金服用户)。

#前序准备
你的本地环境需要安装 node 和 git。我们的技术栈基于 ES2015+、React、UmiJS、dva、g2 和 antd,提前了解和学习这些知识会非常有帮助。

安装

从 GitHub 仓库中直接安装最新的脚手架代码。

$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project -b v2
$ cd my-project

目录结构

我们已经为你生成了一个完整的开发框架,提供了涵盖中后台开发的各类功能和坑位,下面是整个项目的目录结构。

├── config                   # umi 配置,包含路由,构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.js            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

本地开发

安装依赖。

npm install

如果网络状况不佳,可以使用 cnpm 进行加速。

npm start

启动完成后会自动打开浏览器访问 http://localhost:8000,你看到下面的页面就代表成功了。

首页截图

在这里插入图片描述

实战

关闭 mock

当本地开发完毕之后,如果服务器的接口满足之前的约定,那么只需要关闭 mock 数据或者代理到服务端的真实接口地址即可。

$ npm run start:no-mock

模拟动态菜单

  • 先看效果图:
    在这里插入图片描述
  1. 修改步骤:
[
    {
        "name": "分析页", 
        "path": "analysis", 
        "children": [
            {
                "name": "分析页1", 
                "path": "analysis1", 
                "children": [
                    {
                        "name": "分析页11", 
                        "path": "analysis11"
                    }
                ]
            }
        ]
    }, 
    {
        "name": "监控页", 
        "path": "monitor"
    }, 
    {
        "name": "工作台", 
        "path": "workplace"
    }, 
    {
        "name": "工作台1", 
        "path": "workplace/1"
    }
]

在这里插入图片描述

  • 修改src/services/api.js,加入这个请求,用于模拟后台获取菜单,如图:
export async function queryMenu() {
  return request(`http://www.mocky.io/v2/5d831fb83400003322f4a212`);
}

在这里插入图片描述

  • 修改src/models/menu.js,增加import { queryMenu } from ‘@/services/api’;
import { queryMenu } from '@/services/api';

在这里插入图片描述

  • 修改src/models/menu.js,改为网络请求获取菜单,如图:
    *getMenuData({ payload }, {call, put }) {
      // const { routes, authority, path } = payload;
      // const originalMenuData = memoizeOneFormatter(routes, authority, path);
      // console.log("originalMenuData",originalMenuData);
      // const menuData = filterMenuData(originalMenuData);
      const menuData = yield call(queryMenu);
      console.log("menuData",menuData);
      const breadcrumbNameMap = memoizeOneGetBreadcrumbNameMap(menuData);
      console.log("breadcrumbNameMap",breadcrumbNameMap);
      yield put({
        type: 'save',
        payload: { menuData, breadcrumbNameMap },
      });
    },
  },

在这里插入图片描述

  • 这时候再刷新页面,有动态菜单了,可以随时修改模拟请求,菜单也随着变化,嘻嘻

后台获取动态菜单

后台获取动态菜单和模拟动态菜单操作一样,只需要将请求路径改为真实的后端路径,并返回一个菜单树

新增一个组件

  • 在src/components路径下,新建一个目录 MartinCRUD,然后在该目录下新建 index.js,内容为如下,这样就新增了一个名为MartinCRDU的组件
import React, { createElement } from 'react';
import { Table } from 'antd';


class MartinCRUD extends React.PureComponent {


  render() {
    const columns = [
      {
        title: 'Full Name',
        width: 100,
        dataIndex: 'name',
        key: 'name',
        fixed: 'left',
      },
      {
        title: 'Age',
        width: 100,
        dataIndex: 'age',
        key: 'age',
        fixed: 'left',
      },
      { title: 'Column 1', dataIndex: 'address', key: '1' },
      { title: 'Column 2', dataIndex: 'address', key: '2' },
      { title: 'Column 3', dataIndex: 'address', key: '3' },
      { title: 'Column 4', dataIndex: 'address', key: '4' },
      { title: 'Column 5', dataIndex: 'address', key: '5' },
      { title: 'Column 6', dataIndex: 'address', key: '6' },
      { title: 'Column 7', dataIndex: 'address', key: '7' },
      { title: 'Column 8', dataIndex: 'address', key: '8' },
      {
        title: 'Action',
        key: 'operation',
        fixed: 'right',
        width: 100,
        render: () => <a>action</a>,
      },
    ];

    const data = [
      {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York Park',
      },
      {
        key: '2',
        name: 'Jim Green',
        age: 40,
        address: 'London Park',
      },
    ];
    return <Table columns={columns} dataSource={data} scroll={{x: 1300}}/>;
  }
}

export default MartinCRUD;

新增一个页面

  • 在src/pages下,新建一个目录 Table,,然后在该目录下新建 Table.js,内容为如下,这样就新增了一个名为Table的页面
import React from 'react';
import MartinCRUD from "@/components/MartinCRUD";

const Table = () => (
  <MartinCRUD />
);

export default Table;
  • 目前新增的页面还无法生效,需要修改config/router.config.js,加上该页面的路由信息,如图
    在这里插入图片描述
  {
        name: 'table',
        icon: 'highlight',
        path: '/table',
        routes: [
          {
            path: '/table/table',
            name: 'table',
            component: './Table/Table',
          },
        ],
      },
  • 到这里,访问浏览器:http://localhost:8000/table/table,就可以看到新增的页面,如图
    在这里插入图片描述

自定义国际化

所有国际化配置,都在src/locales目录下,目前共有四种国际化配置,现在新增一个自定义国际化配置

  • 在src/locales/zh-CN下新建button.js,内容为
export default {
  'app.table.curd.add': '新增',
  'app.table.curd.delete': '删除',
  'app.table.curd.update': '修改',
  'app.table.curd.batch.delete': '批量删除',
}

  • 修改src/locales/zh-CN.js,引入button.js,
    在这里插入图片描述
import button from './zh-CN/button';
  • 在src/locales/zh-CN.js末尾加上button
    在这里插入图片描述
  ...button,
  • 按照上面步骤,修改其他三种国际化
  • 最后在js里面直接使用自定义的国际化配置即可,如图
    在这里插入图片描述
  <Button type="primary" onClick={this.setAgeSort}>{formatMessage({ id: 'app.table.curd.add' })}</Button>
  <Button type="primary" onClick={this.clearFilters}>{formatMessage({ id: 'app.table.curd.batch.delete' })}</Button>
  • 最终效果如图,注意左上角两个按钮的变化
    在这里插入图片描述

最终效果

最终实现了增删改查、刷新、批量删除、分页功能,并集成了登录功能,如下图所示:

  1. 下图演示登录、增删改查
    在这里插入图片描述
  2. 下图演示全字段搜索,分页
    在这里插入图片描述
    有任何问题,可以随时沟通我
  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
SystemVerilog的听课学习笔记,包括讲义截取、知识点记录、注意事项等细节的标注。 目录如下: 第一章 SV环境构建常识 1 1.1 数据类型 1 四、二值逻辑 4 定宽数组 9 foreach 13 动态数组 16 队列 19 关联数组 21 枚举类型 23 字符串 25 1.2 过程块和方法 27 initial和always 30 function逻辑电路 33 task时序电路 35 动态 静态变量 39 1.3 设计例化和连接 45 第二章 验证的方法 393 动态仿真 395 静态检查 397 虚拟模型 403 硬件加速 405 效能验证 408 性能验证 410 第三章 SV组件实现 99 3.1 接口 100 什么是interface 101 接口的优势 108 3.2 采样和数据驱动 112 竞争问题 113 接口中的时序块clocking 123 利于clocking的驱动 133 3.3 测试的开始和结束 136 仿真开始 139 program隐式结束 143 program显式结束 145 软件域program 147 3.4 调试方法 150 第四章 验证的计划 166 4.1 计划概述 166 4.2 计划的内容 173 4.3 计划的实现 185 4.4 计划的进程评估 194 第五章 验证的管理 277 6.1 验证的周期检查 277 6.2 管理三要素 291 6.3 验证的收敛 303 6.4 问题追踪 314 6.5 团队建设 321 6.6 验证的专业化 330 第六章 验证平台的结构 48 2.1 测试平台 49 2.2 硬件设计描述 55 MCDF接口描述 58 MCDF接口时序 62 MCDF寄存器描述 65 2.3 激励发生器 67 channel initiator 72 register initiator 73 2.4 监测器 74 2.5 比较器 81 2.6 验证结构 95 第七章 激励发生封装:类 209 5.1 概述 209 5.2 类的成员 233 5.3 类的继承 245 三种类型权限 protected/local/public 247 this super 253 成员覆盖 257 5.4 句柄的使用 263 5.5 包的使用 269 第八章 激励发生的随机化 340 7.1 随机约束和分布 340 权重分布 353 条件约束 355 7.2 约束块控制 358 7.3 随机函数 366 7.4 数组约束 373 7.5 随机控制 388 第九章 线程与通信 432 9.1 线程的使用 432 9.2 线程的控制 441 三个fork...join 443 等待衍生线程 451 停止线程disable 451 9.3 线程的通信 458 第十章 进程评估:覆盖率 495 10.1 覆盖率类型 495 10.2 功能覆盖策略 510 10.3 覆盖组 516 10.4 数据采样 524 10.5 覆盖选项 544 10.6 数据分析 550 第十一章 SV语言核心进阶 552 11.1 类型转换 552 11.2 虚方法 564 11.3 对象拷贝 575 11.4 回调函数 584 11.5 参数化的类 590 第十二章 UVM简介 392 8.2 UVM简介 414 8.3 UVM组件 420 8.4 UVM环境 425
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ERD Online

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值