講解開(kāi)源項(xiàng)目：一步步跑起來(lái)個(gè) Java 前后端分離的人力資源管理系統(tǒng)

本文適合剛學(xué)習(xí)完 Java 語(yǔ)言基礎(chǔ)的人群，跟著本文可了解和運(yùn)行項(xiàng)目，本示例是在 Windows 操作系統(tǒng)下演示。



本文作者：HelloGitHub-秦人

大家好！這里是 HelloGitHub 推出的《講解開(kāi)源項(xiàng)目》 <https://github.com/HelloGitHub-Team/Article>
系列，今天給大家?guī)?lái)一款基于 Java 語(yǔ)言的人力資源管理開(kāi)源項(xiàng)目——微人事

微人事是一個(gè)前后端分離的人力資源管理系統(tǒng)，項(xiàng)目采用 SpringBoot + Vue
架構(gòu)。該系統(tǒng)是管理員對(duì)員工信息的一些列的操作。首先管理員需要登入系統(tǒng)，可對(duì)員工信息進(jìn)行增刪查改操作，也可以對(duì)員工進(jìn)行獎(jiǎng)罰，工資等信息的增刪查改。然后實(shí)現(xiàn)對(duì)部門(mén)員工信息的統(tǒng)計(jì)和修改。所有的操作都在系統(tǒng)中有日志記錄。

微人事的項(xiàng)目地址：https://github.com/lenve/vhr <https://github.com/lenve/vhr>

想要快速搭建一套微人事管理系統(tǒng)，那就跟著本文的步驟。你只需要花 10
分鐘，就能擁有一個(gè)屬于自己的微人事管理系統(tǒng)，并且可以對(duì)前后端分離的項(xiàng)目有一個(gè)完成的概念和感覺(jué)。下面是搭建完成的效果圖：



一、技術(shù)棧

微人事這個(gè)項(xiàng)目采用：

1.1 后端技術(shù)棧

*
SpringBoot：SpringBoot 是基于 Spring4 進(jìn)行設(shè)計(jì)，目的是為了簡(jiǎn)化 Spring 應(yīng)用的初始搭建以及開(kāi)發(fā)過(guò)程。
該框架使用特定的方式(集成 starter，約定優(yōu)于配置)來(lái)進(jìn)行配置，從而使開(kāi)發(fā)人員不需要再定義樣板化的配置。

*
SpringSecurity：SpringSecurity 是一個(gè)強(qiáng)大的和高度可定制的身份驗(yàn)證和訪問(wèn)控制框架。它著重于為 Java
應(yīng)用程序提供身份驗(yàn)證和授權(quán)。

*
MyBatis：MyBatis 是一款優(yōu)秀的持久層框架，它支持定制化 SQL、存儲(chǔ)過(guò)程以及高級(jí)映射。MyBatis 避免了幾乎所有的 JDBC
代碼和手動(dòng)設(shè)置參數(shù)以及獲取結(jié)果集。

*
MySQL：MySQL 是一個(gè)輕量級(jí)關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)，由瑞典 MySQL AB 公司開(kāi)發(fā)，目前屬于 Oracle 公司。

1.2 前端技術(shù)棧

*
Vue：Vue 是一套構(gòu)建用戶(hù)界面的漸進(jìn)式框架。 數(shù)據(jù)驅(qū)動(dòng)，組件化是 Vue 的兩大核心思想。

*
ElementUI： ElementUI 時(shí)一套基于 Vue 2.0 的組件庫(kù)，提供了配套設(shè)計(jì)資源。由餓了么公司前端團(tuán)隊(duì)開(kāi)源。

*
Axios：Axios 是一個(gè)基于 Promise 的 HTTP 庫(kù)，可以用在瀏覽器和 Node.js 中。

*
Vue-router：Vue-router 是 Vue 的路由，根據(jù)不同的路徑映射到不同的視圖。

二、項(xiàng)目結(jié)構(gòu)

2.1 后端項(xiàng)目 hrserver 項(xiàng)目結(jié)構(gòu)如下圖：



后端項(xiàng)目采用 MVC 模式，使用現(xiàn)在流行的 SpringBoot 框架。SpringBoot 是基于 SpringMVC
衍生出來(lái)的框架。宗旨是較少配置，讓開(kāi)發(fā)者快速上手做項(xiàng)目。

目錄說(shuō)明：

* bean：數(shù)據(jù)模型目錄，包括數(shù)據(jù)庫(kù)模型，參數(shù)模型，業(yè)務(wù)模型。
* common：基礎(chǔ)工具包目錄，包括日期工具類(lèi)，郵件工具類(lèi)等。
* config：基礎(chǔ)配置目錄，包括權(quán)限認(rèn)證，安全認(rèn)證，菜單權(quán)限等類(lèi)。
* controller：業(yè)務(wù)的控制器目錄，包括員工信息，工資，系統(tǒng)公共功能等控制器。
* exception：自定義異常目錄。公用的異常處理實(shí)現(xiàn)類(lèi)。
* mapper：數(shù)據(jù)庫(kù)操作層目錄。包括數(shù)據(jù)接口的定義，查詢(xún) SQL 的業(yè)務(wù)實(shí)現(xiàn)。
* service：業(yè)務(wù)層目錄，包括部門(mén)、員工、菜單、角色、工資等業(yè)務(wù)的業(yè)務(wù)類(lèi)。
* HrserverApplication：SpringBoot 框架的入口類(lèi)，在 IDE 中可直接運(yùn)行 main 方法。
* resources/static：靜態(tài)資源存放目錄
* resources/templates：前臺(tái)頁(yè)面模板路徑，包括 email 模板。
* resources/application.properties：環(huán)境配置文件，包括關(guān)系型數(shù)據(jù)庫(kù) mysql 連接信息，mybatis
配置文件路徑，非關(guān)系型數(shù)據(jù) redis 的連接信息，郵件服務(wù)的配置等。
* resources/mybatis-config.xml：mybatis 配置文件，目前包括日志帶引的配置。
* resources/vhr.sql：MySQL 數(shù)據(jù)庫(kù)腳本，（注：數(shù)據(jù)庫(kù)表有外鍵約束，適當(dāng)修改sql遇見(jiàn)的執(zhí)行順序 ）
2.2 前端項(xiàng)目 vuehr 項(xiàng)目結(jié)構(gòu)如下圖：



前端項(xiàng)目采用 MVVM 架構(gòu)，就是 MVC 架構(gòu)中多了一個(gè) ViewMode。它是 Model 和 Controller 之間的一座橋梁。

目錄說(shuō)明：

* build：Vue 項(xiàng)目構(gòu)建配置目錄，包括vue加載器的基礎(chǔ)配置，webpack 的環(huán)境配置。
* config：Web 項(xiàng)目的環(huán)境配置目錄，包括代理配置、開(kāi)發(fā)環(huán)境配置、生成環(huán)境配置。
* node_modules：第三方依賴(lài)目錄，包括項(xiàng)目引用的三方依賴(lài)模塊。
* src/components：前端組件目錄，包括聊天組件、員工組件、個(gè)人組件、統(tǒng)計(jì)組件等。
* src/lib：三方依賴(lài)目錄，包括 SockJS，SockJS 是一個(gè)瀏覽器 JavaScript 庫(kù)，提供類(lèi)似 WebSocket 的對(duì)象。
* src/router：路由目錄，包括項(xiàng)目前端路由的配置信息。
* src/store：全局?jǐn)?shù)據(jù)商店，存放供全局使用的一些數(shù)據(jù)。
* src/utils：工具包路徑，包括前臺(tái) API 接口和常用的工具類(lèi)。
* src/App.vue：Vue 前端的入口組件。
* src/main.js：Vue 前端入口 JS 事件定義的文件。
* src/index.html：微人事前端首頁(yè)。
* src/package*.json：Vue 前端項(xiàng)目打包的配置文件，類(lèi)似于 maven 項(xiàng)目的 pom.xml 文件。聲明了項(xiàng)目需要的三方依賴(lài)。
三、實(shí)戰(zhàn)操作

3.1 準(zhǔn)備工作

1.確保本地已安裝 Java8 開(kāi)發(fā)環(huán)境；



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



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



3.2 下載項(xiàng)目
git clone https://github.com/lenve/vhr.git
3.3 運(yùn)行項(xiàng)目

3.3.1 初始化數(shù)據(jù)庫(kù)

數(shù)據(jù)庫(kù)腳本存放的路徑在：hrserver\src\main\resources\vhr.sql，我本地使用的可視化工具 Navcat。新建一個(gè)名稱(chēng)為 vhr
的數(shù)據(jù)庫(kù)。



導(dǎo)入 vhr.sql 文件數(shù)據(jù)到 mysql 數(shù)據(jù)庫(kù)。



3.3.2 修改后臺(tái)項(xiàng)目的環(huán)境配置文件

修改后臺(tái)項(xiàng)目的環(huán)境配置文件 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里運(yùn)行項(xiàng)目

*
運(yùn)行后端項(xiàng)目

a.導(dǎo)入后端項(xiàng)目到 IDEA 開(kāi)發(fā)工具



b.運(yùn)行后端項(xiàng)目

打開(kāi)后臺(tái)項(xiàng)目的入口類(lèi) HrserverApplication.java



c.項(xiàng)目啟動(dòng)成功如下圖



*
運(yùn)行前端項(xiàng)目

a.導(dǎo)入前端項(xiàng)目到 VSCode 開(kāi)發(fā)工具



b.運(yùn)行前端項(xiàng)目

c.在 VSCode 左側(cè)導(dǎo)航欄，NPM SCRIPTS中直接運(yùn)行 dev。



d.Ctrl+shift+Y 呼出控制臺(tái)，在控制臺(tái)終端依次執(zhí)行如下命令：
# 安裝依賴(lài) npm install # 在 localhost:8080 啟動(dòng)項(xiàng)目 npm run dev


* 項(xiàng)目運(yùn)行成功如下圖


3.3.4 命令行運(yùn)行項(xiàng)目

Win + R 打開(kāi) Wndows 命令行窗口

*
運(yùn)行后端項(xiàng)目

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



b.打包后臺(tái)項(xiàng)目
mvn clean package
c.命令行運(yùn)行微人事后臺(tái)項(xiàng)目

切換目錄到 hrserver\target，執(zhí)行如下命令可啟動(dòng)項(xiàng)目
java -jar hrserver-0.0.1-SNAPSHOT.jar
d.項(xiàng)目運(yùn)行成功成功入下圖



*
運(yùn)行前端項(xiàng)目

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



b.在命令行依次執(zhí)行如下命令
# 安裝依賴(lài) npm install # 在 localhost:8080 啟動(dòng)項(xiàng)目 npm run dev
c.項(xiàng)目運(yùn)行成功成功入下圖



3.3.5 項(xiàng)目啟動(dòng)成功效果

* 員工基本信息維護(hù)


* 基礎(chǔ)信息設(shè)置


四、最后


教程至此，你應(yīng)該對(duì)前后端分離的項(xiàng)目有了一些簡(jiǎn)單的認(rèn)識(shí)。并且你也已經(jīng)在本地將項(xiàng)目跑起來(lái)了。所謂前后端分離，其實(shí)你也可以搞定的！項(xiàng)目涉及的技術(shù)比較多，你可以選擇感興趣的技術(shù)去學(xué)習(xí)。后面怎么玩就看你自己了：部署到服務(wù)器正式上線、定制自己專(zhuān)屬的功能、給項(xiàng)目貢獻(xiàn)代碼等，都是可以的。

本教程是針對(duì)有一定 Java 編程基礎(chǔ)，但又不知道如果運(yùn)行本項(xiàng)目的小伙伴。如果你是老手歡迎直接閱讀項(xiàng)目的說(shuō)明文檔，獲取更多更詳細(xì)的資料。

五、參考文章：

*
SpringBoot wiki <https://www.jianshu.com/p/350972a3a258>

*
Spring Security wiki <https://blog.51cto.com/favccxx/1606179>

*
MyBatis wiki <http://www.mybatis.org/mybatis-3/zh/index.html>

*
MVVM框架 wiki <https://zhuanlan.zhihu.com/p/59467370>

• ? 上一篇：從零開(kāi)始入門(mén) K8s| 阿里技術(shù)專(zhuān)家詳解 K8s 核心概念
• ? 下一篇：295.博客園win&蘋(píng)果PC客戶(hù)端開(kāi)源項(xiàng)目整理