pmg1989 / dva-admin

dva admin antd dashboard

dva-admin

目的

• 期望打造一套基于react，ant-design，dva于一体的、企业级后台管理系统
• 期望可以单纯由前端来解决用户权限，后端提供权限数据支持的一套完善的权限管理功能后台管理系统
• 期望可以在antd与dva的基础上，再次封装简单且可复用的基类组件，方便使用者简单接入，简单使用，简单拓展

演示地址

https://pmg1989.github.io

登录账号

• 管理员账号：admin，密码：admin
• 游客账号：guest, 密码：guest
• 由于gitpage是静态服务器，刷新后会出现404是正常现象，部署正式服务器即可，具体服务端配置可参见dva issues 180

特性

• 基于react，ant-design，dva，Mock 企业级后台管理系统最佳实践
• 基于Mock实现脱离后端独立开发
• 基于Antd UI 设计语言，提供后台管理系统常见使用场景
• 浅度响应式设计
• webpack打包处理路由时，实现Javascript模块化按需动态dynamic加载
• 已实现基本完善的权限管理功能
• 完善的后端分页与前端分页功能
• 封装好可扩展的上传控件与音视频控件
• 用roadhog本地调试和构建，其中Mock功能实现脱离后端独立开发。

开发及构建

目录结构

├── /dist/           # 项目输出目录
├── /src/            # 项目源码目录
│ ├── /public/       # 公共文件，编译时copy至dist目录
│ ├── /components/   # UI组件及UI相关方法
│ │ ├── skin.less    # 全局样式
│ │ └── vars.less    # 全局样式变量
│ ├── /routes/       # 路由组件
│ │ └── App/index.js       # 路由入口
│ ├── /models/       # 数据模型
│ ├── /services/     # 数据接口
│ ├── /themes/       # 项目样式
│ ├── /mock/         # 数据mock
│ ├── /utils/        # 工具函数
│ │ ├── config.js    # 项目常规配置
│ │ ├── menu.js      # 菜单及面包屑配置
│ │ ├── config.js    # 项目常规配置
│ │ ├── request.js   # 异步请求函数
│ │ └── theme.js     # 项目需要在js中使用到样式变量
│ ├── route.js       # 路由配置
│ ├── index.js       # 入口文件
│ └── index.html     
├── package.json     # 项目信息
├── .eslintrc        # Eslint配置
└── .roadhogrc.js    # roadhog配置

快速开始

克隆项目文件:

git clone [email protected]:pmg1989/dva-admin.git

进入目录安装依赖:

npm install 或者 yarn 或者 yarn install

开发：

npm run build:dll #第一次npm run dev时需运行此命令，使开发时编译更快
npm run dev

打开 http://localhost:8000

构建：

npm run build

将会打包至dist/{version}目录 #package.json里version字段

npm run build:new

将会打包至dist/{version增加1}目录 #package.json里version字段

代码检测：

git项目提交时，会自动run precommit 进而执行 npm run lint，执行esLint代码检测

注意事项

• 如需重写antd样式配置，请修改src/theme.js
• 项目配置文件在src/utils/config.js
• 如需重写异步请求函数，请修改src/utils/request.js （关于为什么使用axios而不是fetch：在一个无服务器的环境中模拟数据请求，Mock不能拦截Fetch，只能拦截XHR，所以我选了一个纯Ajax的库axios）

特别感谢

zuiidea: https://github.com/zuiidea/antd-admin

sorrycc: https://github.com/dvajs/dva-example-user-dashboard

dva-admin's Issues

请教下routes里面二级目录 编译不到呢？

看您的源码 routes 下有二级目录，但我在router.js 里面不管是按需加载还是最原始的 import，都只对routes下面的文件有用， routes//.js 就编译不到了

请教一下，你这个新增用户的时候想判断一下用户是否存在应该怎么做

Role/ModelForm TabelTree组件的耦合度有点高啊 请教下该组件的实现思路

望提示一下 谢谢

自己搭建的站点上鼠标滑过ant-card类元素时会出现滚动条

求助，我直接访问demo站点时查看的元素是一切正常的，但是自己clone了一份代码run dev后，访问localhost:8000，所有的ant card元素在鼠标hover的时候，会自动出现滚动条，并把别的元素挤开

浏览器为Chrome最新版：59.0.3071.115
操作系统为Win7
打开文档中搭建的demo站点时没有问题

.webpackrd.js中怎么配置其他插件，譬如UglifyJsPlugin插件？

作者啊 如何npm run build 直接可以打开index.html 来预览

或者如何把项目包 给别人 别人不用起服务 直接可以打开呢

请教下大神 notification 不起作用了

是因为layout的问题导致 notification 好像用不了，只能用message 了吗？

子路由刷新404了解一下?

请教下，app的state的curPowers，是怎么传到所有页面中去的呢？

请教下，app的state的curPowers，是怎么传到所有页面中去的呢？我看其他页面的model state里面没有存curPowers，但是却能取到app的state的curPowers， 是在哪弄的呢？

menu的引入问题

我咋bread.js中直接引用menu.js 会在const getPathSet = function () 函数中报 forEach没定义 但是通过index来间接引用 为什么就不报错呢？

OpenSSL & please trust the rootCA.crt ???

rootCA.key

error

E:\github\Roles>npm start

> @ start E:\github\Roles
> dora --plugins "proxy,webpack,webpack-hmr"

          proxy: load rule from proxy.config.js
(node:9032) DeprecationWarning: 'GLOBAL' is deprecated, use 'global'
          proxy: listened on 8989
temp certs cleared
1/3 build modulesWARNING: can't open config file: C:/OpenSSL/openssl.cnf
Generating RSA private key, 2048 bit long modulus
.............+++
...................................................+++
e is 65537 (0x10001)
WARNING: can't open config file: C:/OpenSSL/openssl.cnf
Unable to load config info from C:/OpenSSL/openssl.cnf
=============
rootCA generated at :
C:\Users\Admin\.anyproxy_certs
=============
rootCA generated
please trust the rootCA.crt in C:\Users\Admin\.anyproxy_certs\
or you may get it via anyproxy webinterface
 1691/1691 build modules
webpack: bundle build is now finished.

项目如何启动的呀

为何我启动项目会报错，是不是还要配置别的环境

为什么我改了axios.defaults.baseURL不生效

改了baseURL之后，请求的还是本地的localhost？是mock的原因吗？新手没用过mock。。

一个页面，怎样做定时刷新？

一个页面，怎样做定时刷新？感觉使用setTimeout或setInterval都有问题，，你有什么好的方案么？

关于权限控制

看介绍说实现了基本的权限控制，能详细介绍下么？另外，如果要对菜单做权限控制，应该怎么做？

请教下，如果我需要在create modal 的时候，从后端请求数据，作为下拉选择框的内容，该怎么写呀，谢谢

how use git pages show your demo of dva-admin

方便加我qq聊聊技术，840690384，求加

登录时getAllPathPowers方法的问题

function getAllPathPowers (menuArray, curPowers) {
return menuArray.reduce((dir, item) => {
dir[/${item.key}] = curPowers[item.id]
if (item.children) {
item.children.reduce((cdir, cur) => {
dir[/${cdir}/${cur.key}] = curPowers[cur.id]
return cdir
}, item.key)
getAllPathPowers(item.children, curPowers)
}
return dir
}, {})
}

这个封装的方法应该得不到所有的path

登陆流程问题

如果我想把本地模拟的登陆替换为与服务器交互，应该怎么操作呢，谢谢

路由嵌套问题

路由嵌套子页面该如何配置？

需要带ID 传子页面，这个子页面在菜单栏是不需要显示的；目前我是多写了一层路由，
做了无用功；

其实理想状态应该和图二 一样的，但无奈 图二的方式无法实现，请问作者有没有更好的方式？
最终结果期待的是：/product/productId/info
流程大概就是列表进入详情页面；
如果作者有幸看到，可加我微信 ：EvansHongZai1214

登陆成功之后界面有时候回现出现404然后跳到首页？

登陆成功之后界面有时候回现出现404然后跳到首页？

可以把面包屑改成Tab页签么

可以把面包屑改成Tab页签么

npm run build:dll 报错

`UrbanDance:dva-admin yueguang$ npm run build:dll

[email protected] build:dll /Users/student/Desktop/GitHub/dva-admin
roadhog buildDll

/Users/student/Desktop/GitHub/dva-admin/node_modules/_fs-extra@3.0.1@fs-extra/lib/mkdirs/mkdirs-sync.js:49
throw err0
^

Error: EACCES: permission denied, mkdir '/Users/student/Desktop/GitHub/dva-admin/node_modules/roadhog-dlls'
at Object.fs.mkdirSync (fs.js:885:18)
at Object.mkdirsSync (/Users/student/Desktop/GitHub/dva-admin/node_modules/_fs-extra@3.0.1@fs-extra/lib/mkdirs/mkdirs-sync.js:31:9)
at Object.emptyDirSync (/Users/student/Desktop/GitHub/dva-admin/node_modules/_fs-extra@3.0.1@fs-extra/lib/empty/index.js:34:18)
at /Users/student/Desktop/GitHub/dva-admin/node_modules/_roadhog@1.4.1@roadhog/lib/buildDll.js:106:25
at /Users/student/Desktop/GitHub/dva-admin/node_modules/_recursive-readdir@2.2.2@recursive-readdir/index.js:44:14
at FSReqWrap.oncomplete (fs.js:135:15)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:dll: roadhog buildDll
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build:dll 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! /Users/student/.npm/_logs/2018-06-14T15_07_27_212Z-debug.log
UrbanDance:dva-admin yueguang$
`

错误信息报错提示应该修改下。。。

想增加一个弹出窗口,该怎么改?

弹出框会重叠,应该怎么改?

路由切换的进出动画效果有react-router4版本的吗？

V4的怎么写 用cloneElement报错 报getAttribute('style')为null

请教关于safari浏览器上editor中选择文本颜色和背景颜色选择不了的问题

在Safari浏览器上，编辑器选择文本颜色和背景颜色选择不了，下拉时颜色选择没有出现，这是浏览器兼容问题吗？

感觉项目的结构组织的有点混乱，对 redux 的使用好像很不规范呀？

找半天，才发现 reducers 都被放到了components 中，
route 里面放了 UI components！

反正我看得一头雾水，不知道能否提供一个该项目的源码学习的项目路径图？

PS: redux 刚刚使用，不对之处还望指正！

什么时候升级依赖版本啊

您加了dll，会莫民奇妙的报错。。。

hmm...根本不能安装啊....

npm install 之后..一堆警告..然后安装 babel beta.46...说要beta.32..安装beta.32....又警告需要46....

关于Header的router

作者我关注你的文章好久了 ，我想问下，Header部分添加下拉菜单并且路由，怎么做啊，求教，新手一枚

IE 9+ 方案

dva-admin 可支持IE9+，但需要引入babel-polyfill，
可在src/index.js的首行加入import "babel-polyfill"即可

menu这边有个问题请教下。

以teacher这个角色登陆的时候，menu这边显示部分，这部分代码在哪，可否给我指向下，没找到，麻烦了。

hyphenToHump

Bread.js 中的 hyphenToHump() 这个函数是从哪来的呀？

Question: dva-admin Vs react-admin (formerly admin-on-rest)

How does it compare with https://github.com/marmelab/react-admin (which is from https://github.com/marmelab/ng-admin) ?

With react-admin, if we setup few configurations, the whole admin is up and ready. Is dva-admin works like that? (or, mere components that still needs assembling?) If not, is there any similar projects available that is comparable to https://github.com/marmelab/react-admin in this Ant ecosystem? TIA

如何关闭权限模块?

路由嵌套，不用children也能实现admin后台点击左边，右边content显示吗？

路由嵌套，不用children也能实现admin后台点击左边，右边content显示吗？
能具体说下吗，感激不尽
搞个qq群，方便交流可好

Eslint 在 VS Code 编辑器下失效

作者你好，我把代码clone下来之后在vs code编辑器中打开后，发现所有.js文件第一行 import 或者 const 语句上都会返回一个 eslint 错误。[eslint] Parsing error: The keyword 'import' is reserved 。最终导致所有的 eslint 检查都没有效果。
我尝试更新了 dependencies 所有与 eslint 和 babel 相关的依赖，但是并没有什么卵用。 请问可以协助我解决一下吗？ 谢谢🙏

这个编辑器的上传图片还有问题

大神，这个编辑器的上传图片还有问题😔

大神，如何批量删除信息

不打算使用umi吗

最新版tab页签切换时页面会重新加载，初始化

最新版tab页签切换时页面会重新加载，初始化。
是否应该tab切换时页面不变化，否则用户的操作会丢失

请问作者怎么连接后台！！

是在roadhogrc.js修改还是哪里

偶尔出现未登陆先进入 dashboard ，然后再跳转至登录页面的问题？

这个问题碰见好几次了，不知道各位有没有遇到过！

项目启动不起来

通过yarn下载好包后，启动报错
Failed to start the server, since you have enabled dllPlugin, but have not run roadhog buildDll before roadhog server.

请教下路由后面的随机字符串怎么去掉的呢？

请教下，

<Route path="/" component={require("./routes/App")} >
<IndexRoute component={require("./routes/Home")}/>
<Route path="home" component={require("./routes/Home")}/>

<Route path="test1" component={require("./routes/test")}/>

    </Route>
   
  
  </Route>
  
</Router>

按照您的router.js ,但浏览器地址后面还是会出现随机字符串

更新之后为什么跑步起来了报错了，是不是有的第三方插件为 --save在dev中呢？

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\ch
okidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)
npm WARN [email protected] requires a peer of react@^16.0.0 but none was insta
lled.
npm WARN [email protected] requires a peer of jquery@>=1.8.0 but none was ins
talled.
npm WARN [email protected] requires a peer of eslint-plugin-jsx-a11y@^
5.1.1 but none was installed.

react-router4

什么时候可以把路由基于react-router4 更改一版吗？

怎么icon 都改不过来的吗？

utils/config.js 里面设置了：
logoSrc: ''
entry.dev.ejs 里面删除了以下：

entry.ejs 里面删除了以下：

但是browser标题还是显示newband图标啊？

怎么破？