专栏首页编程软文前端UI框架Ant Design Pro

前端UI框架Ant Design Pro

一直忙于工作,也没时间总结。现在有点零散时间把之前做的笔记整理一下。 目前项目使用的技术栈是,前端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

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

Ant Design Pro 的布局

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

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

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

BlankLayout:空白的布局

如何使用 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 目前提供的两套布局组件工具:Layout 和 Grid。

Grid 组件#

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

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

Layout 组件#

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

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

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

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

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

具体可以参考官方文档:

本文分享自微信公众号 - 编程软文(zhuyuansj),作者:zhuyuansj

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-09-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • app支付宝快速入门

    编程软文
  • 分布式阿波罗Apollo配置中心

    为什么要使用apollo,在我们开发分布式微服务项目的时候,那些配置一旦变更,就需要重启服务,这样非常不友好。因此我们考虑动态更改配置文件当中的配置,所以把那些...

    编程软文
  • redis的使用和安装,redis基础和高级部分

    编程软文
  • 用PHP实现的四则运算表达式计算

    这个实现方式中使用了两个堆栈,一个用来存储数字,一个用来存储运算符,遇到括号以后就递归进入括号内运算,实现方式有点笨拙,后面补充一下“逆波兰表达式”的算法实现。...

    大江小浪
  • Word的这七种实用小技巧,你知道哪几个?

    首先选择文件-选项-常规,然后在Office主题颜色中,选择一个即可。具体操作如下:

    半夜喝可乐
  • TA 来了!山东互联网技术大会免费报名中...

        回归技术初心,相信因聚而变的力量,在这里,我们不空谈趋势,不盲追热点,用技术人的态度去给你一场精彩的分享。本次活动互联网公司技术大咖为我们带来架构设计和...

    云加小助手
  • 让网站用上https

    个人认为让一个没什么流量的网站支持https是没什么意义的,第一,支持https后访问速度会变慢 而且浪费服务器资源,但是没办法,一切为了装逼,为了装逼的一切...

    bboysoul
  • FastAPI--参数提交Request Body(3)

    一般对于Request Body不会通过get提交,对于get提交的参数一般称为是查询参数。所以,如果是通过POTS,PUT等方式提交的参数信息,我们一般是放到...

    py3study
  • 【HFT系列】基于机器学习的动态高频限价订单簿框架(Tick数据)

    量化投资与机器学习微信公众号
  • R中时间序列分析-趋势预测ARIMA

    时间序列预测(time series forecasting) ARIMA模型(Autoregressive Integrated Moving Average...

    Erin

扫码关注云+社区

领取腾讯云代金券