服务端开发中Java一直作为主流语言，最近几年随着大数据的发展，Java涉及到的领域也越来越多，而且前端工程化的兴起也进一步促进了Java的发展。这里介绍一个前后端分离的后台管理系统，后端数据接口基于SpringMVC的框架，前端采用nodejs+webpack+vuejs+iView的框架开发（这是目前很流行的一套前端开发框架）。整套demo是完整可运行的（包括数据库表结构）。废话不多少，直接上代码。

Github地址：

https://github.com/WrathLi/cms-vue-iView

如何觉得github网速太慢，也可以从码云上下代码，

地址：https://gitee.com/WrathLi/cms-vue-iView/tree/master

工程结构介绍

表结构讲解

先来讲解一下数据库的表结构，一共5张表，因为是demo所以只实现了页面权限管理和用户管理的功能。

如上图所示，

tb_menu_one:左侧导航栏的第一级菜单。

tb_menu_page:左侧导航栏的第二级页面，一个菜单可以包含多个页面。如下图所示：

tb_role:角色表，一个角色可以分配多个页面的权限。

tb_role_privilege:角色页面对应权限表。

tb_user_info:用户信息表，一个用户只能对应一个角色。

前后端工程介绍

后端工程使用Idea开发，maven做包管理，前端使用WebStorm开发。开发环境的搭建教程网上可以找到很多，这里就不做详细介绍了。截个图

IDEA：

WebStorm:

 

核心功能讲解：

1.登录

 

打开登录页的时候，前端会向后端数据接口请求获取一个公钥。

公钥接口：

前端在用户点击登录的时候会使用公钥将用户名和密码加密后再发送到后端站点，避免用户名和密码直接暴露。

前端加密过程：

 

2.用户权限菜单下发

登录通过后，后端系统会根据用户绑定的角色获取相应菜单项，同时使用JWT技术生成用户独有的token和菜单信息一起下发，前端根据菜单信息展示相应的界面，同时将token存入Cookie，在其他请求的时候都带上token参数，后端站点根据token判断用户的权限和登录是否过期超时。

生成菜单和token：

前端界面菜单栏：

前端请求上报token：

后端验证token有效性：

主要功能介绍：

1.界面管理：

这个功能是管理左侧菜单栏的，前端采用vue-router做界面的路由控制，所以这里路径的地址必须和前端路由配置相对应：

2.角色管理

角色管理是用来创建角色和分配角色权限的。

3.用户管理

用户管理具有新增用户，管理用户信息，绑定用户角色，冻结用户等功能。

4.个人中心

个人中心可以修改自己的信息和密码。