分享一个前后端分离的基于 Laravel + Vue 的管理后台模板项目

简介

就是一个后台模板项目,基于 Laravel 和 Vue,UI 库用的 Element,功能都是参考自其他开源产品,代码少部分参考。自认为体验很棒,毕竟都是完全按我个人的意愿做出来的,虽然功能都是参考自其他地方的,但都是我认为很棒的功能,,,前端封装了很多东西,方便开发,统一管理后台的风格、布局和操作,,,

DEMO

http://admin-demo.largezhou.cn/admin/vue-r...

账号:admin

密码:000000

可以随意体验,搞坏了,登录不了,可点 重置,,,,修改了路由配置,要刷新浏览器页面才能生效。

Vue Router 和菜单配置,拖拽排序和调整层次结构

Vue Router 和菜单配置

添加角色

添加角色

添加权限Laravel-admin 同款(照搬))

添加权限

上面是管理后台最最基础功能,下面附带两个甜点,,

这两个功能都是参考自 crmeb 这个开源的商城系统,,,当时公司有人在用这个系统二开,我觉得这两个功能挺好的,,,还有个 组合数据 的功能,,,以后可能会加进去吧,,

文件上传管理器,所有需要上传文件的地方,只需使用 FilePicker 组件,就可以从这个文件管理器之中进行文件的上传、筛选、删除和选择,统一管理后台文件上传。

分享一个前后端分离的管理后台模板项目,基于 Laravel 和 Vue,带有权限、文件管理器和系统设置

配置管理,分类配置,添加,按分类获取、更新,,支持多种类型的

分享一个前后端分离的管理后台模板项目,基于 Laravel 和 Vue,带有权限、文件管理器和系统设置

最后来一个自认为小亮点的功能,,,但是我说不清楚是啥功能,,所以就发张图吧,注意看浏览器地址,面包屑,和侧边栏菜单,,
分享一个前后端分离的管理后台模板项目,基于 Laravel 和 Vue,带有权限、文件管理器和系统设置

https://github.com/largezhou/admin

顺便推荐下 微信公众号菜单管理插件

本作品采用《CC 协议》,转载必须注明作者和本文链接
附言 1  ·  11个月前
本帖由系统于 10个月前 自动加精
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 42

666

11个月前 评论

很赞 正准备使用这个功能

11个月前 评论

源码呢

11个月前 评论

老司机带带我

11个月前 评论

这跟后端返回左侧菜单栏不是一样的吗?只要是没catch到的页面统统进404呀

10个月前 评论
largezhou (楼主) 10个月前
legendary_jesse (作者) 10个月前

代码质量很高 :100:

10个月前 评论
largezhou (楼主) 10个月前

我们公司后端只配置接口路径,然后前段根据接口去匹配哪些页面要显示,哪个按钮要显示。不需要配置路由列表,因为你配置了列表,结果他没有这个接口权限,也很麻烦。相当于要去匹配2遍

10个月前 评论
largezhou (楼主) 10个月前
全场我最姜姜姜丶 (作者) 10个月前

不错,自己想了很久都没有行动,值得学习 :+1:

10个月前 评论

期待分享一下思路: 后端添加的路由是怎么注册到vue的路由里面的

10个月前 评论
largezhou (楼主) 10个月前
michealzh (作者) 10个月前
largezhou (楼主) 10个月前

克隆下来 compsoer update env都配置了。进不了后台页面。404

10个月前 评论
largezhou (楼主) 10个月前
redline (作者) 10个月前
redline (作者) 10个月前
largezhou (楼主) 10个月前
redline (作者) 10个月前

我们是通过在前端router的meta字段里面存储这个页面所需要用到的接口的数组,登录后后端返回这个用户所拥有的所有接口数组,然后与路由里面的meta字段数组取交集来判断这个路由显不显示,页面的按钮通过自定义指令判断是否在当前路由的meta字段里面来决定是否显示

10个月前 评论

@zjwshisb 菜单根据路由配置生成的吗?

你们这样不能通过后端来随意修改路由的嵌套层级和顺序吧?不过这并不是什么很必要的功能,,,只是我个人喜好了,,,

后端返回用户拥有权限的所有接口,,,会不会一大坨?我这个页面上如果要单独控制某个按钮显不显示,是用权限的 slug 来判断的,不过我还没弄,,,

我也来搞个自定义指令做这个可以,,

用自定义指令做这个,是不是也就只比用 v-if="can('edit-post')" 来说,语义化强一点?

10个月前 评论

@largezhou 是的呀,菜单就根据路由来
一大坨也没啥关系,就长度几百的一个数组嘛
主要我们还整合rbac的权限控制,permission表字段就存接口的名称(users.index)这样的,配合laravel的api路由,这样就一整套就配合起来了

10个月前 评论

期待你的 readme ~ 404中

10个月前 评论
largezhou (楼主) 10个月前

添加了新的路由然后访问新的路由404是因为没有对应的组件的原因吗?

10个月前 评论

@SamCCC

是啊,,,这路由的添加基本上算是开发用的功能了吧,,,不是随便添加就有页面的,,只是如果你权限要更细分一点,可能可以给特定用户调整路由的层级和顺序,这还是有点点用处的,而且这个路由和菜单的权限,可以通过管理后台随意调整,不用重新打包前端资源。

不过评论里也有其他方案,,,

10个月前 评论

很牛 :+1:

9个月前 评论

权限这块没看懂 具体是把路由直接分配给角色吗 还是没增加一个路由就要分配到一个权限组里。

9个月前 评论
largezhou (楼主) 9个月前

在后台,刷新浏览器 ,出现404

file

9个月前 评论
largezhou (楼主) 9个月前

file

报这个错呢 执行到php artisan admin:init 这步的时候

9个月前 评论
largezhou (楼主) 9个月前
james23 (作者) 9个月前

很棒的项目,加油!

9个月前 评论

很棒 :+1:的项目,fork下来学习学习

8个月前 评论

1、laravel new tousu
2、拷贝代码到tousu目录,替换文件
3、php artisan jwt:secret,报错误:
In ProviderRepository.php line 208:
Class 'Overtrue\LaravelLang\TranslationServiceProvider' not found

8个月前 评论
largezhou (楼主) 8个月前
kapokiss (作者) 8个月前
largezhou (楼主) 8个月前

请问安装好了 .env.example里面的很多配置都是干什么的,都需要填吗

8个月前 评论
largezhou (楼主) 8个月前
一穷二白

star 为敬

8个月前 评论
largezhou (楼主) 8个月前
一穷二白 (作者) 8个月前
likunyan

大佬有没有用 React 和 Material

8个月前 评论
largezhou (楼主) 8个月前

好东西 :+1: 有一点疑问 那个菜单怎么根据不同角色权限来显示不同的菜单栏目呢

8个月前 评论
largezhou (楼主) 8个月前

哇哦,厉害,像大佬学习,慢慢的自己也撸一套出来,哈哈哈哈

8个月前 评论
largezhou (楼主) 8个月前

你好。大佬。你的后台管理系统的服务器配置按照你的要求配置。仍然是 404. 请问可否方便发一下您的服务器配置信息呢。谢谢。

7个月前 评论

非常棒,已经使用在公司开发的项目当中了,用着非常舒服!!

7个月前 评论
largezhou (楼主) 7个月前
qq876149799 (作者) 6个月前
largezhou (楼主) 6个月前

想请问下,上传文件是怎么操作才能上传?弹窗下面的按钮都是禁用的 :sweat_smile:

7个月前 评论
largezhou (楼主) 7个月前

请教各位大佬,新增后台路由,在routes/admin.php,增加一条路由,访问显示404了,应该怎么操作。

6个月前 评论
largezhou (楼主) 6个月前
社会主义接班人 (作者) 6个月前

部署以后 提示页面不存在 什么原因呢

6个月前 评论

请问下文件上传又拍云怎么配置呢?怎么无缝切换。

6个月前 评论
largezhou (楼主) 6个月前

老哥,前端学习路线资料可以分享一波吗 :joy:

2个月前 评论
largezhou (楼主) 2个月前
温故知新 (作者) 2个月前

想问下,前后端完全分离的后台,使用的是session 验证,那提交时的csrf是如何做的呢?

1个月前 评论
largezhou (楼主) 1个月前
Va1ora_Yan (作者) 1个月前
largezhou (楼主) 1个月前

问一下,你这个前端开发的时候怎么跑啊. 前端运行调接口会跨域

6天前 评论
likunyan 6天前
likunyan 6天前
dowsonzhao (作者) 6天前
likunyan 6天前
largezhou (楼主) 5天前

小白,请问一下 cd resources/admin && yarn && yarn build 不编译的话会出现500错误 .编译后再去修改.vue文件,刷新页面不会及时更新我修改了的文件. 我用做开发的话,需要修改哪里才能做到实时同步

1天前 评论
largezhou (楼主) 1天前
boolhai (作者) 1天前

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!