SpringBoot+SpringSecurity+MyBatis+Vue+ElementUI的微人事項目

最近鵬哥在總結目前市面流行的開源項目，努力發現有價值的項目分享給大家。

整個項目規劃了很多模塊，但是作者目前只實習了權限管理模塊，也許正因為如此，才使得項目非常乾淨，更具有入門的學習價值。

權限管理相關的模塊主要有兩個，分別是 [系統管理->基礎信息設置->權限組] 可以管理角色和資源的關係， [系統管理->操作員管理] 可以管理用戶和角色的關係。另外，本項目也在不斷的更新中，小夥伴們可以通過下方的更新記錄查看最新完成的功能。

項目地址：

項目地址：https://github.com/lenve/vhr

文檔地址：https://github.com/lenve/vhr/wiki



PS: 作者的文檔還是很全的，除了一些介紹項目的文檔，還有一些是解決開發過程中遇到的問題，這個是非常難得的。如果你是一個程序員你一定懂得，至少鵬哥是做不到。

快速部署

1.clone項目到本地[email protected]:lenve/vhr.git

2.數據庫腳本放在hrserver項目的resources目錄下，在MySQL中執行數據庫腳本

3.數據庫配置在hrserver項目的resources目錄下的application.properties文件中

4.在IntelliJ IDEA中運行hrserver項目

OK，至此，服務端就啟動成功了，此時我們直接在地址欄輸入http://localhost:8082/index.html即可訪問我們的項目，如果要做二次開發，請繼續看第五、六步。

5.進入到vuehr目錄中，在命令行依次輸入如下命令：

# 安裝依賴
npm install
# 在 localhost:8080 啟動項目
npm run dev

由於我在vuehr項目中已經配置了端口轉發，將數據轉發到SpringBoot上，因此項目啟動之後，在瀏覽器中輸入http://localhost:8080就可以訪問我們的前端項目了，所有的請求通過端口轉發將數據傳到SpringBoot中（注意此時不要關閉SpringBoot項目）。

6.最後可以用WebStorm等工具打開vuehr項目，繼續開發，開發完成後，當項目要上線時，依然進入到vuehr目錄，然後執行如下命令：

npm run build

該命令執行成功之後，vuehr目錄下生成一個dist文件夾，將該文件夾中的兩個文件static和index.html拷貝到SpringBoot項目中resources/static/目錄下，然後就可以像第4步那樣直接訪問了。

整體效果

首先，不同的用戶在登錄成功之後，根據不同的角色，會看到不同的系統菜單，完整菜單如下：



不同用戶登錄上來之後，可能看到的會有差異，如下：



每個用戶的角色是由系統管理員進行分配的，系統管理員給用戶分配角色的頁面如下：



系統管理員也可以管理不同角色可以操作的資源，頁面如下：



技術棧

後端技術棧

1.SpringBoot

2.SpringSecurity

3.MyBatis

4.MySQL

前端技術棧

1.Vue

2.ElementUI

3.axios

4.vue-router