Java Web 管理系統開發全解

服務端開發中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

工程結構介紹

Java Web 管理系統開發全解

表結構講解

先來講解一下數據庫的表結構,一共5張表,因為是demo所以只實現了頁面權限管理和用戶管理的功能。

Java Web 管理系統開發全解

如上圖所示,

tb_menu_one:左側導航欄的第一級菜單。

tb_menu_page:左側導航欄的第二級頁面,一個菜單可以包含多個頁面。如下圖所示:

Java Web 管理系統開發全解

tb_role:角色表,一個角色可以分配多個頁面的權限。

tb_role_privilege:角色頁面對應權限表。

tb_user_info:用戶信息表,一個用戶只能對應一個角色。

前後端工程介紹

後端工程使用Idea開發,maven做包管理,前端使用WebStorm開發。開發環境的搭建教程網上可以找到很多,這裡就不做詳細介紹了。截個圖

IDEA:

Java Web 管理系統開發全解

WebStorm:

Java Web 管理系統開發全解

核心功能講解:

1.登錄

Java Web 管理系統開發全解

打開登錄頁的時候,前端會向後端數據接口請求獲取一個公鑰。

公鑰接口:

Java Web 管理系統開發全解

前端在用戶點擊登錄的時候會使用公鑰將用戶名和密碼加密後再發送到後端站點,避免用戶名和密碼直接暴露。

前端加密過程:

Java Web 管理系統開發全解

2.用戶權限菜單下發

登錄通過後,後端系統會根據用戶綁定的角色獲取相應菜單項,同時使用JWT技術生成用戶獨有的token和菜單信息一起下發,前端根據菜單信息展示相應的界面,同時將token存入Cookie,在其他請求的時候都帶上token參數,後端站點根據token判斷用戶的權限和登錄是否過期超時。

生成菜單和token:

Java Web 管理系統開發全解

前端界面菜單欄:

Java Web 管理系統開發全解

前端請求上報token:

Java Web 管理系統開發全解

後端驗證token有效性:

Java Web 管理系統開發全解

主要功能介紹:

1.界面管理:

Java Web 管理系統開發全解

Java Web 管理系統開發全解

Java Web 管理系統開發全解

這個功能是管理左側菜單欄的,前端採用vue-router做界面的路由控制,所以這裡路徑的地址必須和前端路由配置相對應:

Java Web 管理系統開發全解

2.角色管理

Java Web 管理系統開發全解

Java Web 管理系統開發全解

角色管理是用來創建角色和分配角色權限的。

3.用戶管理

Java Web 管理系統開發全解

Java Web 管理系統開發全解

用戶管理具有新增用戶,管理用戶信息,綁定用戶角色,凍結用戶等功能。

4.個人中心

Java Web 管理系統開發全解

個人中心可以修改自己的信息和密碼。


分享到:


相關文章: