一个干净优雅的 Element UI Admin 模板

Element UI Admin

一个干净优雅的Element UI Admin模板

一个大型单页应用离不开合理的项目结构和一些简单的封装
https://github.com/xusenlin/element-starte...

Start

  • 克隆或者下载这个仓库
  • 进入项目目录安装依赖
yarn

Develop

# serve with hot reload at localhost:8010
npm run dev

Build

# build for production with minification
npm run build

后话

最近做了很多单页应用,当项目越来越大的时候,才发现刚开始多做一些基础工作,多想想项目合理的结构和一些必要的封装会带来事半功倍的效果。以后再也不要接到需求就干了。 hh~~

这个是基于Element UI的后台单页应用模板,就只有登陆、font_awesome、首页三个页面。


还有最近做的系统

本帖已被设为精华帖!
本帖由系统于 5年前 自动加精
森林
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 17
森林

@Summer 刚刚发布的文章就变成了 于 8小时前。这个算bug吗 :smile:

6年前 评论
森林

@Ken 后面被悄悄的修复了,我的现在也好了。:smile:

6年前 评论

简洁的风格我喜欢 ?

6年前 评论

请教一个问题,前后端分离 类似RBAC这样的权限模块,有什么好思路?

6年前 评论
森林

@Littlesqx

file

在前后端分离的单页应用中,RBAC这样的权限模块一般我们的做法是,当用户登录的时候,后台返回当前用户所拥的全部角色的权限集(去重),这些权限集都是唯一的key.如

file

他们定义了每个功能的增删查改,或者更多。像Element UI Admin里面的菜单(src/menu/menu.js),有一个关键字permission,这个权限就是当前菜单的查看功能。在index.js(src/menu/index.js)会结合当前用户权限过滤一次在导出去渲染。而其他权限则会在每个vue单页文件里定义一个数据

actionPermission:{
                    add : this.$Func.hasPermission('StudentRecordsAdd'),
                    edit : this.$Func.hasPermission('StudentRecordsEdit'),
                    delete : this.$Func.hasPermission('StudentRecordsDelete'),
                    、、、、
                },

这样,添加按钮或者表格渲染就可以通过v-if来控制了,哈哈。当然,后端是通过中间件来控制每个api的。

6年前 评论
森林

@Littlesqx
就是说,程序只关心每一个权限,而不关心角色。角色是拿来给人定义的,他的作用就像是把一堆权限打包重命名赋给某个用户。对于人来说,我就知道,你有一个自定义的辅导员角色权限。

6年前 评论

@森林 学习了,感谢。再追问几个细节,提到权限集是登录时获取的(由截图看是存在localStorage,也可能还有vuex),有两点问题,一是管理员更新用户的权限集后,怎么保证用户通过刷新页面或者重新登录刷新权限集,以及如果用户清除了localStorage页面是否可以辅助重新获取,而不是丢失权限。第二点,提到了前端的菜单过滤,那路由做了什么限制?最后,想问问,为什么选择给权限集给前端而不是角色集?

6年前 评论
森林

1、对权限要求的实时性不高的时候,都是用户每次登陆重新将权限存入localStorage、sessionStorage、或者vuex。(既然这个角色之前拥有这个权限,被去掉这个权限之后,拥有这个角色的用户这次登陆还是可以有这个权限的,因此我们不考虑这种情形,我们是存入sessionStorage的),如果对权限实时性要求高的话就得存入vuex,然后可以考虑ajax轮询或者websocket实时得到权限。还有,用户清除了localStorage之类的也不用考虑,因为这样用户就没有了所有权限。那他手动添加权限的话也不怕,因为还有后端的中间件。

2、路由没有做任何限制,因为路由都是惰加载。如果没有请求是不会加载的。

最后,这个很简单。如果给的是角色集,程序里面控制的也是角色的话,权限就不能细分到每一步操作。

6年前 评论
森林

吐槽一下,回复的内容竟然不能修改,不小心排版拍错了。:pensive:

6年前 评论
森林

@Littlesqx 补充一点,你的第一点问题,其实,权限被修改之后,在用户不刷新或者不重新登录的时候,他请求到后端,中间件不通过会返回一个状态码。在Element UI Admin封装的api请求初始化里面,就会统一弹出提示,你没有权限操作,然后清除token转向登录页面就好。

6年前 评论

@森林 谢谢,明白了。还有一个问题,路由懒加载是什么意思,我的疑问搜路由不是事先注册好了吗?比如某些用户尝试访问/admin路由,不做类似菜单的拦截吗?

6年前 评论
森林

@Littlesqx 路由懒加载就是首屏不会加载其他vue页面,只有用户请求的时候才去加载,这样js文件整体就很小了。我们的项目也算很大了。但是所有资源初次加载普通压缩是不会超过1M的。
你的疑问:这里有两种方式可以做。1,在src/main.js里面router.beforeEach。没有权限就不让你跳转。2,开始就只有登录和404路由,其他路由注册都是根据权限来动态添加的了。

6年前 评论

@森林 恩,明白了,再次谢谢:smile:

6年前 评论
森林

@Littlesqx 不用客气,相互交流,让我也巩固了知识点。:smile:

6年前 评论

有没有非 webpack 的版本

5年前 评论

注册了个帐号,感谢作者[森林]写的后台框架.

4年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!