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

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

本文做者：HelloGitHub-秦人

你們好！這裏是 HelloGitHub 推出的《講解開源項目》系列，今天給你們帶來一款基於 Java 語言的人力資源管理開源項目——微人事

微人事是一個先後端分離的人力資源管理系統，項目採用 SpringBoot + Vue 架構。該系統是管理員對員工信息的一些列的操做。首先管理員須要登入系統，可對員工信息進行增刪查改操做，也能夠對員工進行獎罰，工資等信息的增刪查改。而後實現對部門員工信息的統計和修改。全部的操做都在系統中有日誌記錄。下面是項目搭建完成的效果圖：

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

想要快速搭建一套微人事管理系統，那就跟着本文的步驟。你只須要花 10 分鐘，就能擁有一個屬於本身的微人事管理系統，而且能夠對先後端分離的項目有一個完成的概念和感受。下面是搭建完成的效果圖：

1、技術棧

微人事這個項目採用：

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、項目結構

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、實戰操做

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. 員工基本信息維護

2. 基礎信息設置

4、最後

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

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

5、參考文章：

• SpringBoot wiki

• Spring Security wiki

• MyBatis wiki

• MVVM框架 wiki

歡迎關注 HelloGitHub 公衆號，獲取更多開源項目的資料和內容

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