DVA-BOOT-ADMIN

我们使用React生态系统的最成熟的技术体系，搭建的一套开箱即用的后台管理系统，框架里包含了一些独有的定制组件，以及许多经过大量实践口碑良好的第三方组件，它不仅仅是一个简单的仪表盘展示界面，更是保证您下一个web项目所必需的所有工具，我们希望使用它的人可以快速、稳定的开发出健壮、美观、易用的web程序。

Table of Contents

• 功能
• 目录结构
• 开发
• 文档
  • 如何开始
  • 全局配置
  • modelEnhance用法
  • pageHelper用法
  • 组件
  • 接口数据模拟
  • FAQs
• 截图
• 更新日志
• 结尾

Feature

• 封装了dva框架的数据流转，简单的请求可以不用在model和service中定义
• 封装了数据模模拟，可以独立于后台开发前台功能
• 封装了分页请求，简化并规范了分页逻辑
• 封装了fetch请求，适应与后台多种交互请求, body参数 parameter参数 path参数，动态请求头，请求前后拦截
• 扩展了antd写了许多实用的UI，通过一个配置生成即可生成，后台CRUD三件套
• 按业务模块划分的目录结构，尽量做到最小耦合
• 一些常用的小部件用法
• 许多精心设计的页面及交互场景
• dva-boot脚手架封装的功能
• 全局异常处理，全局请求拦截，公共配置提取

Structure

.
├── public                   # 不参与编译的资源文件
├── src                      # 主程序目录
│   ├── index.js             # 程序启动和渲染入口文件
│   ├── components           # 全局公共组件
│   ├── layouts              # 页面结构组件
│   │   ├── BasicLayout      # 基本布局
│   │   └── OtherLayout      # 布局组件根据具体功能调整，在路由配置中引用
│   ├── routes               # 动态路由目录（每个功能一个文件夹的MVC结构）
│   │   ├── index.js         # 路由配置文件
│   │   ├── Home             # 功能模块
│   │   │   ├── index.js     # 路由配置文件
│   │   │   ├── assets       # 单独属于这个模块的静态资源文件
│   │   │   ├── components   # 页面组件
│   │   │   ├── model        # dva model
│   │   │   ├── service      # dva service
│   │   │   └── routes **    # 子路由(目录结构与父级相同)
│   │   └── Login            # 功能模块
│   │       ├── index.js     # 路由配置文件
│   │       ├── assets       # 单独属于这个模块的静态资源文件
│   │       ├── components   # 页面组件
│   │       ├── model        # dva model
│   │       ├── service      # dva service
│   │       └── routes **    # 子路由(目录结构与父级相同)
│   ├── utils                # 工具类
│   └── assets               # 资源文件
│           ├── fonts        # 字体 & 字体图标
│           ├── images       # 图片
│           └── styles       # 全局样式

Usage

$ git clone https://github.com/LANIF-UI/dva-boot-admin.git
$ cd dva-boot-admin
// 使用yarn
$ yarn
$ yarn start
// 使用npm
$ npm install
$ npm start

End

欢迎大家提问题，感谢大家的PR，如果觉得不错，还请帮忙加个哦

企鹅群 820881369

Change log

• 增加Ripple按钮效果，在UI元素 > 按钮页
• 增加结果展示页面，在页面>结果页
• 增加用户注册页面
• 增加500错误页面
• 增加一个CardLayout布局，适合嵌入到其它系统界面，可以修改src>routes>index.js，替换component: BasicLayout,为component: CardLayout,查看效果
• 增加Gallery示例页面，在页面>画廊下
• 增加LazyLoad（懒加载）组件与WaterFall（瀑布流）组件
• 增加ModalTable & Button
• 增加Notification通知页面，在UI元素>消息下
• 增加TableForm，使表单支持Table类型字段
• 增加ECharts Demo页面，在组件>图表>ECharts，EC组件修改自echarts-for-react
• 增加G2 Demo页面，在组件>图表>G2
• 修改菜单获取方式，之前是登录成功后获取，改为从BasicLayout中获取。之前，如果修改菜单json，需要重新登录，修改后直接刷新即可
• 升级Icon组件增加对unicode代码的支持 <Icon type={"&#xe734;"} font="iconfont" />
• 增加TransferTree支持查询功能，示例见组件的穿梭树
• 增加Form与SearchBar的TreeSelect增加异步数据支持
• 修改SearchBar组件，Form组件，可增加appendTo属性，解决滚动时弹出的下拉框不随容器移动问题appendTo可为true|function
• 增加SideLayout组件，可开关左侧面板，用法见数据表格最后‘左侧树联动’的例子
• 增加对布局样式的调整（在换肤栏里），可以对头部，侧边栏，面包屑进行设置，并修改了几处样式问题
• 修改Dashboard增加几个图表展示
• 修改原有Charts为G2，对其进行轻量化封装，本身已经很好用了(为了增加其它图表支持，进行区分)
• 新增Form 组件展示页面
• 新增DataTable 组件展示页面
• 新增CSSAnimate UI页面
• 更新CSSAnimate 原有属性animationName更名为type (之前名子太长不易记)
• 新增Editor（富文本）页面
• 更新Panel组件增加刷新，关闭功能
• 新增Mask UI页面
• 增增Icon UI页面
• 新增SearchBar页面
• 新增TransferTree页面（扩展自antd的Transfer组件，可支持左侧为树的穿缩框，并支持异步加载）
• 更新内置ICON图标
• 增加CRUD页面
• 增加全局响应式标示（ElementQueries）
• 增加BaseComponent页面
• 增加Toolbar页面
• 增加404页面
• 增加柱型图
• 增加G2图表组件
• 增加resizeMe，可监控dom大小变化
• 页面增加登录页
• 页面增加锁屏页
• 页面增加Coming Soon页
• 组件增加Clock组件
• 组件增加密码解锁组件
• 组件增加Coming Soon组件

Gallery