前端UI框架Ant Design Pro

作者: zhuyuansj | 来源:发表于2018-09-22 14:03 被阅读856次

    一直忙于工作,也没时间总结。现在有点零散时间把之前做的笔记整理一下。
    目前项目使用的技术栈是,前端UI框架Ant Design Pro,数据交互使用react,后端使用的是springcloud,离线存储数据使用hadop(刚搭完还没开始用).后端的技术栈世面上基本稳定都用微服务这套,因为spring全家桶一直非常稳定。
    Ant Design Pro目前蚂蚁金服和阿里巴巴内部上百个项目正在尝试 Pro 的研发模式

    1.安装node和git

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

    $ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
    $ 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
    
    image.png
    启动完成后会自动打开浏览器访问 http://localhost:8000,你看到下面的页面就代表成功了。 image.png

    Ant Design Pro 的布局

    在 Ant Design Pro 中,我们抽离了使用过程中的通用布局,都放在 layouts 目录中,分别为:

    BasicLayout:基础页面布局,包含了头部导航,侧边栏和通知栏:

    image.png

    UserLayout:抽离出用于登陆注册页面的通用布局

    BlankLayout:空白的布局

    image.png

    如何使用 Ant Design Pro 布局#

    通常布局是和路由系统紧密结合的,Ant Design Pro 的路由使用了 Umi 的路由方案,为了统一方便的管理路由和页面的关系,我们将配置信息统一抽离到 config/router.config.js 下,通过如下配置定义每个页面的布局:

    module.exports = [{
      path: '/',
      component: '../layouts/BasicLayout',  // 指定以下页面的布局
      routes: [
        // dashboard
        { path: '/', redirect: '/dashboard/analysis' },
        {
          path: '/dashboard',
          name: 'dashboard',
          icon: 'dashboard',
          routes: [
            { path: '/dashboard/analysis', name: 'analysis', component: './Dashboard/Analysis' },
            { path: '/dashboard/monitor', name: 'monitor', component: './Dashboard/Monitor' },
            { path: '/dashboard/workplace', name: 'workplace', component: './Dashboard/Workplace' },
          ],
        },
      ],
    }]
    

    映射路由和页面布局(组件)的关系如代码所示,完整映射转换实现可以参看 router.config.js

    更多 Umi 的路由配置方式可以参考:Umi 配置式路由

    Pro 扩展配置#

    我们在 router.config.js 扩展了一些关于 pro 全局菜单的配置。

    ···
    {
    name: 'dashboard',
    icon: 'dashboard',
    hideInMenu: true,
    hideChildrenInMenu: true,
    hideInBreadcrumb: true,
    authority: ['admin'],
    }
    ···

    • name: 当前路由在菜单和面包屑中的名称,注意这里是国际化配置的 key,具体展示菜单名可以在 /src/locales/zh-CN.js 进行配置。

    • icon: 当前路由在菜单下的图标名。

    • hideInMenu: 当前路由在菜单中不展现,默认 false

    • hideChildrenInMenu: 当前路由的子级在菜单中不展现,默认 false

    • hideInBreadcrumb: 当前路由在面包屑中不展现,默认 false

    • authority: 允许展示的权限,不设则都可见,详见:权限管理

    Ant Design 布局组件#

    除了 Pro 里的内建布局以为,在一些页面中需要进行布局,可以使用 Ant Design 目前提供的两套布局组件工具:LayoutGrid

    Grid 组件#

    栅格布局是网页中最常用的布局,其特点就是按照一定比例划分页面,能够随着屏幕的变化依旧保持比例,从而具有弹性布局的特点。

    而 Ant Design 的栅格组件提供的功能更为强大,能够设置间距、具有支持响应式的比例设置,以及支持 flex 模式,基本上涵盖了大部分的布局场景,详情参看:Grid

    Layout 组件#

    如果你需要辅助页面框架级别的布局设计,那么 Layout 则是你最佳的选择,它抽象了大部分框架布局结构,使得只需要填空就可以开发规范专业的页面整体布局,详情参看:Layout

    根据不同场景区分抽离布局组件#

    在大部分场景下,我们需要基于上面两个组件封装一些适用于当下具体业务的组件,包含了通用的导航、侧边栏、顶部通知、页面标题等元素。例如 Ant Design Pro 的 BasicLayout

    通常,我们会把抽象出来的布局组件,放到跟 pagescomponents 平行的 layouts 文件夹中方便管理。需要注意的是,这些布局组件和我们平时使用的其它组件并没有什么不同,只不过功能性上是为了处理布局问题。

    除了 Ant Design 官方提供的布局组件,也可以试试 社区精选 里推荐的布局组件。

    具体可以参考官方文档:

    image.png image.png

    相关文章

      网友评论

      • 1a875bc7fe4d:坑多不😂,不想填太多坑
        zhuyuansj:@Amo_lnk 坑自然会有,不过这框架在阿里很多项目都在用.证明这框架已经经历过市场的校验了,是一个成熟的框架.

      本文标题:前端UI框架Ant Design Pro

      本文链接:https://www.haomeiwen.com/subject/gixxoftx.html