Git Product home page Git Product logo

lanif-ui / dva-boot-admin Goto Github PK

View Code? Open in Web Editor NEW
1.7K 63.0 461.0 88 MB

:cake: react admin dashboard ui LANIF-ADMIN --- react 16 + react-router 4 + dva 2 + antd 4 后台管理 脚手架

Home Page: https://lanif-ui.github.io/dva-boot-admin

License: MIT License

JavaScript 84.25% HTML 0.26% Shell 0.04% Less 15.45%
react redux react-router design desktop enterprise boilerplate admin admin-dashboard ant-design

dva-boot-admin's Introduction

English | 简体中文

dva-boot-admin

DVA Boot Admin

🍋 🍊 🍒 🍰 🍇 🍉 🍓 🌽 🍑 🍈

全新升级,已支持Ant.Design 4.0

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

GitHub主页 | 码云主页

目录

功能

  • 封装了dva框架的数据流转,简单的请求可以不用在model和service中定义
  • 封装了数据模拟,可以独立于后台开发前台功能
  • 封装了分页请求,简化并规范了分页逻辑
  • 封装了fetch请求,适应与后台多种交互请求, body参数 parameter参数 path参数,动态请求头,请求前后拦截
  • 路由按需加载,首屏加载超快
  • 扩展了antd写了许多实用的UI,通过一个配置即可生成,后台CRUD三件套(数据表格,搜索框,新增编辑表单)
  • 按业务模块划分的目录结构,开发独力功能时无需分心其它模块,做到最小耦合
  • 生产环境下打包,gzip后只有2.09 MB,只使用常用模块后不到1 MB
  • 一些常用的小部件用法
  • 许多精心设计的页面及交互场景
  • dva-boot脚手架封装的功能
  • 全局异常处理,全局请求拦截,公共配置提取
  • 代码自动配置工具boot-template-cli

工程结构

.
├── public                   # 不参与编译的资源文件
├── templates                # 为代码生成所准备的模板文件
├── src                      # 主程序目录
│   ├── index.js             # 程序启动和渲染入口文件
│   ├── config.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       # 全局样式

使用方法

$ git clone https://github.com/LANIF-UI/dva-boot-admin.git
$ cd dva-boot-admin
// 安装依赖
$ yarn
// 启动
$ yarn start
// 打包
$ yarn build
// 打包带图形化分析
$ yarn build --analyze

兼容性

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
>= IE11 last 2 versions last 2 versions last 2 versions last 2 versions

结尾

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

企鹅群 820881369 🐧

截图

dva-boot-admin's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

dva-boot-admin's Issues

启动报错

const { index, rules } = findIndexAndRules(rulesSource, ruleMatcher);
^

TypeError: Cannot destructure property index of 'undefined' or 'null'.

Please use `require("history").createHashHistory`

Warning: Please use require("history").createHashHistory instead of require("history/createHashHistory"). Support for the latter will be removed in the next major release.

使用dva创建的项目使用同样的方式为什么没有警告
import createHistory from 'history/createHashHistory';
const app = dva({
history: createHistory({
basename: ‘/’
})
});

缺少i18n国际化,希望能加入react-intl-universal进行国际化

我找到一个dvajs结合react-intl进行国际化的demo,但react-intl听说存在很致命的问题,不建议使用。dvajs官方都没国际化的例子,刚刚接触dvajs这个东西,完全不知道国际化初始化应该放在哪。最近折腾这个,找到了初始化位置,在模块加载时引入国际化app.model(require('../models/i18n').default); 打算在项目中练练手,没找到比较好的demo,还是搞不出来。所以希望能加入react-intl-universal进行国际化。

开发计划

  • 表单增加AutoComplete类型,支持异步datasource
  • 打印组件
  • 支持手动更改面包屑
  • 面包屑按实际路由级别自动生成(跟据title)
  • 增加Tabs布局 #17
  • 小屏时左侧菜单侧滑弹出
  • 表单组件增加upload类型
  • Banner-Manage 可用首页图片展示,轮播图片,适合少量图片、展示大图片的场景
  • 增加倒计时组件配合Coming页面
  • 精简视图页面中的代码
  • columns中的tableItem支持设置类型
  • 升级到antd 4.x
  • 仿element-ui 图片预览组件
  • 跟据columns中配置的内容生成代码
  • 整理典型页面场景复用
  • columns的formItem支持children嵌套布局
  • 菜单可以在顶部和左侧切换 #44
  • 提供路由权限&按钮权限支持

yarn_start报错

./node_modules/fetch-mock/es5/client.js
Module not found: Can't resolve 'core-js/modules/es7.string.pad-end' in '/Users/liangshuang/workspace/openproject/react/code/dva-boot-admin/node_modules/fetch-mock/es5'

table scroll fixed 样式错位

下面代码,在使用fixed列时,会出现样式错位,

    // 保存rowkey在record
      .concat({
        dataIndex: '_rowkey',
        width: 0,
        render(text, record, index) {
          record.rowKey = record[rowKey || colRowKey];
          return <div style={{ display: 'none' }}>{record.rowKey}</div>;
        }
      });

希望增加可编辑table多记录批量提交

谢谢能提供这么好的项目!

类似图上销售订单明细,全部明细记录输入好后,点击确认订单后,能将明细数据批量提交给后台
image

另:autocomplete不能输入中文,输入的是字母,过去的版本没有这个问题。时间字段提交给后台是moment,每次提交要转换,希望能有个统一处理转换。Form表单不够紧凑,留白还是太多了,做一个像上面的订单界面感觉一页容不下。

dva-boot-admin-2.1.0 有错

backend.js:9159 Uncaught TypeError: Cannot read property 'displayName' of null
at getDisplayName (backend.js:9159)
at getDataFiber (backend.js:9880)
at enqueueMount (backend.js:10137)
at mountFiber (backend.js:10225)
at backend.js:10285
at Set.forEach ()
at Object.walkTree (backend.js:10283)
at backend.js:8534
at :52:32
at Array.map ()
at Object.emit (:51:66)
at setupBackend (backend.js:8621)
at module.exports (backend.js:8567)
at Agent. (backend.js:116)
at Agent.g (backend.js:981)
at Agent.EventEmitter.emit (backend.js:894)
at backend.js:302
at backend.js:7619
at Array.forEach ()
at backend.js:7618
at Array.forEach ()
at Bridge._handleMessage (backend.js:7611)
at listener (backend.js:92)

columns

您好,如何在columns.js 里表单上绑定任意一种event,比如说,我要跟一表单添加onfocus事件弹出一个modal框。 如果绑定成功,这个modal框组件写哪里,如何引用

文档编译

请问docs目录应该是文档,应该使用什么命令打包和启动。

引入 bootstrap css问题

Hi
我一引入bootstrap.css整个布局就乱掉了,Content组件貌似就不起作用了,你们引入bootstrap会有问题吗

我用cnpm执行install正常,执行start就出错了

cnpm版本:
[email protected] (/data/app/nodejs/node-v10.8.0-linux-x64/lib/node_modules/cnpm/lib/parse_argv.js)
[email protected] (/data/app/nodejs/node-v10.8.0-linux-x64/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
[email protected] (/data/app/nodejs/node-v10.8.0-linux-x64/bin/node)
[email protected] (/data/app/nodejs/node-v10.8.0-linux-x64/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/data/app/nodejs/node-v10.8.0-linux-x64
linux x64 4.17.0-1.el7.elrepo.x86_64
registry=https://registry.npm.taobao.org
错误信息:
[root@centos dva-boot-admin]# cnpm run start

[email protected] start /data/codes/antdesign/dva-boot-admin
react-app-rewired start

/data/codes/antdesign/dva-boot-admin/node_modules/_react-app-rewire-less-modules@1.1.0@react-app-rewire-less-modules/index.js:25
const { index, rules } = findIndexAndRules(rulesSource, ruleMatcher);
^

TypeError: Cannot destructure property index of 'undefined' or 'null'.
at findRule (/data/codes/antdesign/dva-boot-admin/node_modules/_react-app-rewire-less-modules@1.1.0@react-app-rewire-less-modules/index.js:25:28)
at /data/codes/antdesign/dva-boot-admin/node_modules/_react-app-rewire-less-modules@1.1.0@react-app-rewire-less-modules/index.js:60:37
at Object.override [as webpack] (/data/codes/antdesign/dva-boot-admin/config-overrides.js:33:4)
at Object. (/data/codes/antdesign/dva-boot-admin/node_modules/_react-app-rewired@1.6.2@react-app-rewired/scripts/start.js:13:13)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
at startup (internal/bootstrap/node.js:266:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:596:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: react-app-rewired start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2018-09-26T02_32_54_007Z-debug.log

0 info it worked if it ends with ok
2 1 verbose cli [ '/data/app/nodejs/node-v10.8.0-linux-x64/bin/node',
3 1 verbose cli '/data/app/nodejs/node-v10.8.0-linux-x64/lib/node_modules/cnpm/node_modules/.bin/npm',
4 1 verbose cli '--userconfig=/root/.cnpmrc',
5 1 verbose cli '--disturl=https://npm.taobao.org/mirrors/node',
6 1 verbose cli '--registry=https://registry.npm.taobao.org',
7 1 verbose cli 'run',
8 1 verbose cli 'start' ]
9 2 info using [email protected]
10 3 info using [email protected]
11 4 verbose run-script [ 'prestart', 'start', 'poststart' ]
12 5 info lifecycle [email protected]prestart: [email protected]
13 6 info lifecycle [email protected]
start: [email protected]
14 7 verbose lifecycle [email protected]start: unsafe-perm in lifecycle true
15 8 verbose lifecycle [email protected]
start: PATH: /data/app/nodejs/node-v10.8.0-linux-x64/lib/node_modules/cnpm/node_mo dules/npm/node_modules/npm-lifecycle/node-gyp-bin:/data/codes/antdesign/dva-boot-admin/node_modules/.bin:/data/app/nodejs/n ode-v10.8.0-linux-x64/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/usr/local/go/bin:/root/bin
16 9 verbose lifecycle [email protected]start: CWD: /data/codes/antdesign/dva-boot-admin
17 10 silly lifecycle [email protected]
start: Args: [ '-c', 'react-app-rewired start' ]
18 11 silly lifecycle [email protected]start: Returned: code: 1 signal: null
19 12 info lifecycle [email protected]
start: Failed to exec start script
20 13 verbose stack Error: [email protected] start: react-app-rewired start
21 13 verbose stack Exit status 1
22 13 verbose stack at EventEmitter. (/data/app/nodejs/node-v10.8.0-linux-x64/lib/node_modules/cnpm/node_module s/npm/node_modules/npm-lifecycle/index.js:301:16)
23 13 verbose stack at EventEmitter.emit (events.js:182:13)
24 13 verbose stack at ChildProcess. (/data/app/nodejs/node-v10.8.0-linux-x64/lib/node_modules/cnpm/node_module s/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
25 13 verbose stack at ChildProcess.emit (events.js:182:13)
26 13 verbose stack at maybeClose (internal/child_process.js:962:16)
27 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:249:5)
28 14 verbose pkgid [email protected]
29 15 verbose cwd /data/codes/antdesign/dva-boot-admin
30 16 verbose Linux 4.17.0-1.el7.elrepo.x86_64
31 17 verbose argv "/data/app/nodejs/node-v10.8.0-linux-x64/bin/node" "/data/app/nodejs/node-v10.8.0-linux-x64/lib/node_module s/cnpm/node_modules/.bin/npm" "--userconfig=/root/.cnpmrc" "--disturl=https://npm.taobao.org/mirrors/node" "--registry=http s://registry.npm.taobao.org" "run" "start"
32 18 verbose node v10.8.0
33 19 verbose npm v6.4.1
34 20 error code ELIFECYCLE
35 21 error errno 1
36 22 error [email protected] start: react-app-rewired start
37 22 error Exit status 1
38 23 error Failed at the [email protected] start script.
39 23 error This is probably not a problem with npm. There is likely additional logging output above.
40 24 verbose exit [ 1, true ]

在childRoutes的组件里面再创建子路由

你好,我想在childRoutes子路由里面,再创建一个,子路由,我是按照router/index.js里面写的。createRoutes,但提示我Each child in an array or iterator should have a unique "key" prop.
我看了一下是react-router里面需要一个唯一标识KEY。但是这个KEY不是已经封装好生成了么。能不能完善一个子路由的例子,比如,我想在列表中,对一条数据进行编辑,那肯定是要再从这个模块的里面跳转一层的。如何实现这个。

sidebar中Link a标签字体颜色问题

当使用light或者gray侧边栏皮肤时,存在两个问题:
1,单级menu和submenu的字体颜色存在区别
differencolor
2,清空缓存初次开启页面时,在sidebar collapse状态下未加载标签的hover tooltip颜色异常
unnormal

经调试发现样式被assets/index.less中的a标签相关样式覆盖
fix

注释以上样式代码中
a,
a:link {
text-decoration: none;
color: #333;
}
可修复,不确定是否会影响框架其他功能

有关标签页的问题

老铁好,
我看现在的标签页是记录了打开的routeDate, 但是每次点击的时候他都会重新render,页面上的内容是记录不了的,这样子不也就失去了标签页的意义了么。
不知道是不是我理解的有问题,目前是这样子吗?可以进行调整吗?

"git clone https://github.com/LANIF-UI/dva-boot-admin.git" is not end until error!

output is:
git clone https://github.com/LANIF-UI/dva-boot-admin.git
Cloning into 'dva-boot-admin'...
remote: Counting objects: 4326, done.
remote: Compressing objects: 100% (95/95), done.
Receiving objects: 45% (1986/4326), 43.78 MiB | 35.00 KiB/s

and next is:
error: RPC failed; curl 18 transfer closed with outstanding fread data remaining
atal: The remote end hung up unexpectedly
fatal: early EOF
fatal: index-pack failed

modelEnhance actionType

actionType: 'typeName', // 表示自已处理reducer, 值为 actionType + ('_SUCCESS' | '_ERROR'),有此属性不必设置 valueField

这句话没明白什么意思,值是reducer函数名吗?为什么要+ ('_SUCCESS' | '_ERROR')。整个代码中也没看见actionType的例子

ie10下运行报错

调试窗口报错
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function"); //此处跑出错误
}
}
控制台报错
Warning: The component appears to have a render method, but doesn't extend React.Component. This is likely to cause errors. Change DynamicComponent to extend React.Component instead.
SCRIPT5022: 引发了异常但未捕获

如何 优雅的拿掉mock

Hi 大佬
我看到登录 /api/user/login 和菜单导航 /api/user/menu 是走mock,怎么才能把mock全部拿掉,特别是菜单导航,我是想写在js或者json文件里面的

请教下搜索问题

请教下,table搜索,怎么把搜索条件带到浏览器地址 ?a=&b=,用这种形式呢?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.