一步步跑起來個 Java 前後端分離的人力資源管理系統

本文適合剛學習完 Java 語言基礎的人群，跟著本文可瞭解和運行項目，本示例是在 Windows 操作系統下演示。

本文作者：HelloGitHub-秦人

大家好！這裡是 HelloGitHub 推出的《講解開源項目》^[1]系列，今天給大家帶來一款基於 Java 語言的人力資源管理開源項目——微人事

微人事是一個前後端分離的人力資源管理系統，項目採用 SpringBoot + Vue 架構。該系統是管理員對員工信息的一些列的操作。首先管理員需要登入系統，可對員工信息進行增刪查改操作，也可以對員工進行獎罰，工資等信息的增刪查改。然後實現對部門員工信息的統計和修改。所有的操作都在系統中有日誌記錄。

微人事的項目地址：https://github.com/lenve/vhr

想要快速搭建一套微人事管理系統，那就跟著本文的步驟。你只需要花 10 分鐘，就能擁有一個屬於自己的微人事管理系統，並且可以對前後端分離的項目有一個完成的概念和感覺。下面是搭建完成的效果圖：

一、技術棧

微人事這個項目採用：

1.1 後端技術棧

• SpringBoot：SpringBoot 是基於 Spring4 進行設計，目的是為了簡化 Spring 應用的初始搭建以及開發過程。該框架使用特定的方式(集成 starter，約定優於配置)來進行配置，從而使開發人員不需要再定義樣板化的配置。
• SpringSecurity：SpringSecurity 是一個強大的和高度可定製的身份驗證和訪問控制框架。它著重於為 Java 應用程序提供身份驗證和授權。
• MyBatis：MyBatis 是一款優秀的持久層框架，它支持定製化 SQL、存儲過程以及高級映射。MyBatis 避免了幾乎所有的 JDBC 代碼和手動設置參數以及獲取結果集。
• MySQL：MySQL 是一個輕量級關係型數據庫管理系統，由瑞典 MySQL AB 公司開發，目前屬於 Oracle 公司。

1.2 前端技術棧

• Vue：Vue 是一套構建用戶界面的漸進式框架。數據驅動，組件化是 Vue 的兩大核心思想。
• ElementUI：ElementUI 時一套基於 Vue 2.0 的組件庫，提供了配套設計資源。由餓了麼公司前端團隊開源。
• Axios：Axios 是一個基於 Promise 的 HTTP 庫，可以用在瀏覽器和 Node.js 中。
• Vue-router：Vue-router 是 Vue 的路由，根據不同的路徑映射到不同的視圖。

二、項目結構

2.1 後端項目 hrserver 項目結構如下圖：

後端項目採用 MVC 模式，使用現在流行的 SpringBoot 框架。SpringBoot 是基於 SpringMVC 衍生出來的框架。宗旨是較少配置，讓開發者快速上手做項目。

目錄說明：

1. bean：數據模型目錄，包括數據庫模型，參數模型，業務模型。
2. common：基礎工具包目錄，包括日期工具類，郵件工具類等。
3. config：基礎配置目錄，包括權限認證，安全認證，菜單權限等類。
4. controller：業務的控制器目錄，包括員工信息，工資，系統公共功能等控制器。
5. exception：自定義異常目錄。公用的異常處理實現類。
6. mapper：數據庫操作層目錄。包括數據接口的定義，查詢 SQL 的業務實現。
7. service：業務層目錄，包括部門、員工、菜單、角色、工資等業務的業務類。
8. HrserverApplication：SpringBoot 框架的入口類，在 IDE 中可直接運行 main 方法。
9. resources/static：靜態資源存放目錄
10. resources/templates：前臺頁面模板路徑，包括 email 模板。
11. resources/application.properties：環境配置文件，包括關係型數據庫 mysql 連接信息，mybatis 配置文件路徑，非關係型數據 redis 的連接信息，郵件服務的配置等。
12. resources/mybatis-config.xml：mybatis 配置文件，目前包括日誌帶引的配置。
13. resources/vhr.sql：MySQL 數據庫腳本，（注：數據庫表有外鍵約束，適當修改sql遇見的執行順序 ）

2.2 前端項目 vuehr 項目結構如下圖：

前端項目採用 MVVM 架構，就是 MVC 架構中多了一個 ViewMode。它是 Model 和 Controller 之間的一座橋樑。

目錄說明：

1. build：Vue 項目構建配置目錄，包括vue加載器的基礎配置，webpack 的環境配置。
2. config：Web 項目的環境配置目錄，包括代理配置、開發環境配置、生成環境配置。
3. node_modules：第三方依賴目錄，包括項目引用的三方依賴模塊。
4. src/components：前端組件目錄，包括聊天組件、員工組件、個人組件、統計組件等。
5. src/lib：三方依賴目錄，包括 SockJS，SockJS 是一個瀏覽器 JavaScript 庫，提供類似 WebSocket 的對象。
6. src/router：路由目錄，包括項目前端路由的配置信息。
7. src/store：全局數據商店，存放供全局使用的一些數據。
8. src/utils：工具包路徑，包括前臺 API 接口和常用的工具類。
9. src/App.vue：Vue 前端的入口組件。
10. src/main.js：Vue 前端入口 JS 事件定義的文件。
11. src/index.html：微人事前端首頁。
12. src/package*.json：Vue 前端項目打包的配置文件，類似於 maven 項目的 pom.xml 文件。聲明瞭項目需要的三方依賴。

三、實戰操作

3.1 準備工作

1.確保本地已安裝 Java8 開發環境；

2.確保本地以安裝 maven 工具；

3.確保本地以安裝 Node.js；

3.2 下載項目

git clone https://github.com/lenve/vhr.git

3.3 運行項目

3.3.1 初始化數據庫

數據庫腳本存放的路徑在：hrserver\\src\\main\\resources\\vhr.sql，我本地使用的可視化工具 Navcat。新建一個名稱為 vhr 的數據庫。

導入 vhr.sql 文件數據到 mysql 數據庫。

3.3.2 修改後臺項目的環境配置文件

修改後臺項目的環境配置文件 hrserver\\src\\main\\resources\\application.properties

# MySQL 配置
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.url=jdbc:mysql://IP:3306/vhr?useUnicode=true&characterEncoding=UTF-8
spring.datasource.username=root
spring.datasource.password=root

3.3.3 IDE裡運行項目

1. 運行後端項目

a.導入後端項目到 IDEA 開發工具

b.運行後端項目

打開後臺項目的入口類 HrserverApplication.java

c.項目啟動成功如下圖

2.運行前端項目

a.導入前端項目到 VSCode 開發工具

b.運行前端項目

c.在 VSCode 左側導航欄，NPM SCRIPTS中直接運行 dev。

d.Ctrl+shift+Y 呼出控制檯，在控制檯終端依次執行如下命令：

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

3.項目運行成功如下圖

3.3.4 命令行運行項目

Win + R 打開 Wndows 命令行窗口

1.運行後端項目

a.切換目錄到 vhr\\hrserver\\ 下

b.打包後臺項目

 mvn clean package

c.命令行運行微人事後臺項目

切換目錄到 hrserver\\target\\，執行如下命令可啟動項目

 java -jar hrserver-0.0.1-SNAPSHOT.jar

d.項目運行成功成功入下圖

2.運行前端項目

a.切換目錄到 vhr\\vuehr\\ 下

b.在命令行依次執行如下命令

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

c.項目運行成功成功入下圖

3.3.5 項目啟動成功效果

1. 員工基本信息維護

1. 
   
2. 基礎信息設置

1. 
   

四、最後

教程至此，你應該對前後端分離的項目有了一些簡單的認識。並且你也已經在本地將項目跑起來了。所謂前後端分離，其實你也可以搞定的！項目涉及的技術比較多，你可以選擇感興趣的技術去學習。後面怎麼玩就看你自己了：部署到服務器正式上線、定製自己專屬的功能、給項目貢獻代碼等，都是可以的。

本教程是針對有一定 Java 編程基礎，但又不知道如果運行本項目的小夥伴。如果你是老手歡迎直接閱讀項目的說明文檔，獲取更多更詳細的資料。

References

[1] 《講解開源項目》: https://github.com/HelloGitHub-Team/Article

[2] SpringBoot wiki: https://www.jianshu.com/p/350972a3a258

[3] Spring Security wiki: https://blog.51cto.com/favccxx/1606179

[4] MyBatis wiki: http://www.mybatis.org/mybatis-3/zh/index.html

[5] MVVM框架 wiki: https://zhuanlan.zhihu.com/p/59467370

『講解開源項目系列』啟動——讓對開源項目感興趣的人不再畏懼、讓開源項目的發起者不再孤單。跟著我們的文章，你會發現編程的樂趣、使用和發現參與開源項目如此簡單。歡迎加入我們，讓更多人愛上開源、貢獻開源～