推荐一款先后端分离的学习项目-基于springboot+vue

时间 2019-11-24

标签推荐一款后端分离学习项目基于 springboot+vue springboot vue 栏目 Spring 繁體版

原文原文链接

使用了什么（学习这个项目能够学到什么）php

springboot

shiro权限控制

vue

ElementUI

前端

采用了vueAdmin-template , ElementUI , 权限设计思路也是参考了 vueAdmin 的动态路由的设计.html

后端负责了接口的安全性,而前端之因此要作权限处理,最主要的目的就是隐藏掉不具备权限的菜单(路由)和按钮.前端

登陆系统后,后端返回此用户的权限信息,好比vue

"userPermission":{  
         "menuList":[  
            "role",
            "user",
            "article"
         ],
         "roleId":1,
         "nickname":"超级用户",
         "roleName":"管理员",
         "permissionList":[  
            "article:list",
            "article:add",
            "user:list",
         ],
         "userId":10003
      }复制代码

根据menuList判断给此用户生成哪些路由, 根据permissionList判断给用户显示哪些按钮,能请求哪些接口.java

后端

基于 RBAC新解 .git

一般咱们的权限设计都是用户--角色--权限 ,其中角色是咱们写代码的人无法控制的,它能够有多条权限,每一个用户又能够设计为拥有多个角色.所以若是从角色着手进行权限验证,系统都必须根据用户的配置动起来,很是复杂.github

因此咱们后台设计的关键点就在于: 后台接口只验证权限,不看角色.spring

角色的做用其实只是用来管理分配权限的,真正的验证只验证权限 ,而不去管你是不是那种角色.体如今代码上就是接口上注解为数据库

1
复制代码

@RequiresPermissions("article:add")复制代码

而不是npm

1
复制代码

@RequiresRoles(value = {"admin","manager","writer"}, logical = Logical.OR)复制代码

数据库

最主要的是要有一张本系统内的所有权限明细表,好比下面这样

若是某用户拥有表格中前五条权限,就能够查出他就拥有article和user两个菜单,至于页面内是否显示(新增)(修改)按钮,就根据他的permissionList来判断.

具体实现

有了思路,就能够根据各自的业务进行实现,本项目在此进行了简单的实现,后端代码在back文件夹,前端代码在vue文件夹.前端启动只需

1
2
复制代码

npm install --registry=https://registry.npm.taobao.org
npm run dev复制代码

分配权限页面效果

项目下载地址：github.com/Heeexy/Spri…

本文涉及到的知识点学习

Vue实战教程：www.javazhiyin.com/category/vu…

springboot学习：www.javazhiyin.com/category/sp…