Vue2.0+ElementUI后台管理系统项目

项目源码:阿里云盘分享

后台管理系统:可以让用户通过一个可视化工具,可以实现对于数据库进行增删改查的操作。
而且需要注意,根据不同的角色(老板、员工),看到的、操作内容是不同的。

 运行界面如下:

登录页

 首页

Vue2.0+ElementUI后台管理系统项目_第1张图片

 用户管理Vue2.0+ElementUI后台管理系统项目_第2张图片

菜单管理

Vue2.0+ElementUI后台管理系统项目_第3张图片

 平台属性管理Vue2.0+ElementUI后台管理系统项目_第4张图片

 sku管理

Vue2.0+ElementUI后台管理系统项目_第5张图片

spu管理 

Vue2.0+ElementUI后台管理系统项目_第6张图片

 文件夹结构

build
----index.js 是webpack配置文件【很少修改这个文件】
mock
----mock数据的文件夹【模拟一些假的数据mockjs实现的】,因为咱们实际开发的时候,利用的是真是接口

node_modules
------项目依赖的模块

public
------ico图标,静态页面,public文件夹里面经常放置一些静态资源,而且在项目打包的时候webpack不会编译这个文件夹,原封不动的打包到dist文件夹里面

src
-----程序员源代码的地方
------api文件夹:涉及请求相关的
------assets文件夹:里面放置一些静态资源(一般共享的),放在aseets文件夹里面静态资源,在webpack打包的时候,会进行编译
------components文件夹:一般放置非路由组件获取全局组件
------icons 这个文件夹的里面放置了一些svg矢量图
------layout文件夹:他里面放置一些组件与混入
------router文件夹:与路由相关的
-----store文件夹:一定是与vuex相关的
-----style文件夹:与样式先关的
------utils文件夹:request.js 是axios二次封装文件⭐️
------views文件夹:里面放置的是路由组件

App.vue:根组件
main.js:入口文件
permission.js:与导航守卫先关、
settings:项目配置项文件
.env.development:开发环境的配置文件
.env.producation:生产环境的配置文件

后台管理系统API接口在线文档

http://39.98.123.211:8170/swagger-ui.html
http://39.98.123.211:8216/swagger-ui.html

最新后台文档swagger地址:
http://39.98.123.211:8510/swagger-ui.html#/

难点: 登录逻辑 加权限逻辑

登录逻辑: 当用户填写完账号和密码后向服务端验证是否正确, 服务端返回一个token, 拿到token之后(我会将这个token存储到cookie中,保证刷新页面后能记住用户登录), 前端会根据token在去拉取一个user_info的接口来获取用户的详细信息(如用户权限,用户名等等信息)

Vue2.0+ElementUI后台管理系统项目_第7张图片

权限验证: 通过token获取用户对应的role(角色), 动态根据用户的role算出其对应有权限的路由, 通过router.addRoutes动态挂载这些路由. 这些都是通过VUEX全局管理控制的(补充说在这里插入代码片明: 刷新页面后vuex的内容也会丢失)

具体实施:

两个input的框, 一个登录账号,一个登录密码,在放置一个登录按钮,绑定click事件,点击登录,之后向服务端提交账号和密码进行验证,在向服务端提交账号和密码之前我们前端还可以进行一次简单的校验,减轻服务器压力,优化前端代码用户登录成功之后,我们在router.beforeEach中拦截路由,判断是否已获得token,在获取token之后我们就要去获取用户的基本信息了

权限具体实施:

Vue2.0+ElementUI后台管理系统项目_第8张图片

Vue2.0+ElementUI后台管理系统项目_第9张图片

用户登录之后,通过token获取用户的role(角色信息) 动态根据用户的role ,我们将本地路由分为基本路由+重定向路由+特有路由,在用户登录返回的role数据中包含着此用户的特定路由,把

返回路由和特有路由在vuex中去过滤出来然后得出此用户所有的所有路由router.addRouetes动态挂载路由(这些都只是路由级的,后端的权限是逃不掉的)现在,就是前端来控制页面级的权限,不同权限的用户显示不同的侧边栏和限制其所能进入的页面(还有少许的按钮级别的权限控制)后端会验证每一个涉及请求的操作,验证其是否有该操作的,权限,每一个后台的请求不管是get还是post都会让前端在请求header里面携带用户token , 后端会根据改token来验证在token是否有权限执行该操作,如果没有权限就会抛出一个对应的状态码,前端测到状态码,做出相应的操作

你可能感兴趣的:(vue,java,vue.js,前端,javascript,elementui)