vhr項目介紹

項目介紹

微人事是一個前后端分離的人力資源管理系統，項目采用 SpringBoot+Vue 開發，項目加入常見的企業級應用所涉及到的技術點，例如 Redis、RabbitMQ 等。

• 項目地址：https://github.com/lenve/vhr
• 項目部署視頻教程（舊版）
• 項目部署視頻教程（新版）

     

項目技術棧

后端技術棧

1. Spring Boot
2. Spring Security
3. MyBatis
4. MySQL
5. Redis
6. RabbitMQ
7. Spring Cache
8. WebSocket
9. ...

前端技術棧

1. Vue
2. ElementUI
3. axios
4. vue-router
5. Vuex
6. WebSocket
7. vue-cli4
8. ...

   

項目效果圖

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

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

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

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

   

快速部署

1. clone 項目到本地 [e-mail]:lenve/vhr.git
2. 數據庫腳本使用 Flyway 管理，不需要手動導入數據庫腳本，只需要提前在本地 MySQL 中創建一個空的數據庫 vhr，並修改項目中關於數據的配置（resources 目錄下的 application.properties 文件中）即可
3. 提前准備好 Redis，在 項目的 application.properties 文件中，將 Redis 配置改為自己的
4. 提前准備好 RabbitMQ，在項目的 application.properties 文件中將 RabbitMQ 的配置改為自己的（注意，RabbitMQ 需要分別修改 mailserver 和 vhrserver 的配置文件）
5. 在 IntelliJ IDEA 中打開 vhr 項目，啟動 mailserver 模塊
6. 運行 vhrserver 中的 vhr-web 模塊

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

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

   # 安裝依賴
   npm install

   # 在 localhost:8080 啟動項目
   npm run serve

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

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

   npm run build

該命令執行成功之后，vuehr 目錄下生成一個 dist 文件夾，將該文件夾中的兩個文件 static 和 index.html 拷貝到 Spring Boot 項目中 resources/static/ 目錄下，然后就可以像第 6 步那樣直接訪問了（關於前后端分離部署，大家也可以參考這個使用 Nginx 部署前后端分離項目，解決跨域問題）。

步驟 7 中需要大家對 NodeJS、NPM 等有一定的使用經驗，不熟悉的小伙伴可以先自行搜索學習下，推薦 Vue 官方教程。

   

來自 <https://github.com/lenve/vhr#%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D>