Explain open source projects: a step by step run up a Java front and rear end of the separation of human resources management system

This article is for people just finished learning the Java language-based, follow this article to learn and run the project, this example is to demonstrate the Windows operating system.

Author: HelloGitHub- Qin

Hello everyone! Here it is HelloGitHub launched “to explain open source projects” series, today to give us a human resource management open source project based on the Java language – Micro Personnel

Micro personnel is a before and after the end of the separation of human resource management system, the project uses SpringBoot + Vue architecture. The system administrator is operating on a series of employee information. First, the administrator logs into the system, employees can add, delete, change the information search operation, you can also add or delete information on employee reward and punishment, wages and other search change. And then implement changes to the statistical department employee information. All operations are recorded in the system log there.

Personnel micro projects address: https: //

Want to quickly build a micro personnel management system, then follow the steps in this article. You only need to spend 10 minutes, you can have one of their own micro personnel management system, and can have a complete concept and feel of the front and rear end of the separation project. The following are results of FIG completed structures:

First, the technology stack

This project uses micro personnel:

1.1 back-end technology stack

  • SpringBoot: SpringBoot Spring4 is designed based on the purpose to simplify the development process and initial build Spring applications. The framework uses a specific manner (Integrated Starter, convention over configuration) to be configured, so that developers do not need to define the configuration of the template.

  • SpringSecurity: SpringSecurity is a powerful and highly customizable authentication and access control framework. It focuses on providing authentication and authorization for Java applications.

  • MyBatis: MyBatis is an excellent persistence framework that supports custom SQL, stored procedures and advanced mappings. MyBatis avoids almost all JDBC code and manual setting parameters and obtaining the result set.

  • MySQL: MySQL is a lightweight relational database management system, developed by the Swedish company MySQL AB, now part of Oracle Corporation.

1.2 front end technology stack

  • Vue: Vue is a gradual build framework user interface. Data-driven, component-based two core ideas of Vue.

  • ElementUI: ElementUI when a component library based on Vue 2.0 offers a complete design resources. Open source companies by the hungry what front-end team.

  • Axios: Axios is a Promise of HTTP-based library, you can use the browser and the Node.js.

  • Vue-router: Vue-router Vue route is mapped to a different view of different paths.

Second, the project structure

2.1 Project rear hrserver project structure shown below:

Back-end project uses the MVC pattern, using the now popular SpringBoot framework. SpringBoot SpringMVC is derived based framework. Aim is less configuration, allowing developers to quickly get started to do the project.

Directory Description:

    bean: data model catalog, including database model parameter model, business model.

    common: basic kit catalog, including the date tools, e-mail and other tools.

    Class base configuration directory, including permissions certification, safety certification, menu permissions: config.

    controller: the controller directory business, including employee information, payroll, public system controller functions.

    exception: custom exception directory. Public exception handling implementation class.

    mapper: tier directory database operation. Including data interface definition, the SQL query service implementation.

    service: directory service layer, including business class department, staff, menu, roles, salaries and other business.

    HrserverApplication: inlet SpringBoot class frame, it can be run in the IDE main direct method.

    resources / static: static resource storage directory

    resources / templates: front page template path, including email templates.

    resources / Environment Profile, including relational databases mysql connection information, mybatis profile path, non-relational data redis connection information, configure mail service and so on.

    resources / mybatis-config.xml: mybatis profile, including the current log with a lead configuration.

    resources / vhr.sql: MySQL database scripts (Note: foreign key constraint database table, appropriately modify the execution order sql met)

2.2 Project vuehr distal project structure shown below:

Front-end architecture project using MVVM, MVC architecture is more than a ViewMode. It is a bridge between the Model and Controller.

Directory Description:

    build: Vue project build configuration directory, including Environment Configuration Basic Configuration vue loader, webpack of.

    config: Web project directory environment configuration, including configuring proxy configuration, development environment, build environment configuration.

    node_modules: dependent on third-party directory, including project references tripartite dependent modules.

    src / components: front-end component catalog, including chat component, staff components, individual components, statistical components.

    src / lib: Tripartite dependent directories, including SockJS, SockJS is a browser JavaScript library that provides similar objects of WebSocket.

    src / router: Routing directory, including front-end routing configuration information of the project.

    src / store: global data store, store some data for global use.

    src / utils: Kit path, including the API interface and reception common tools.

    src / App.vue: the front end of the inlet assembly Vue.

    src / main.js: the front entrance JS Files Vue event definition.

    src / index.html: Personnel front-end micro home.

    src / package * .json: Vue project front-end package configuration file, similar to the pom.xml file maven project. It declares tripartite dependent item.

Third, combat operations

3.1 Preparations

1. Make sure that the local Java8 development environment has been installed;

2. Make sure to install the local maven tools;

3. Make sure to install the local Node.js;

3.2 Download Project

git clone

3.3 Running the Project

3.3.1 database initialization

Path stored in the database script: hrserver \ src \ main \ resources \ vhr.sql, local visualization tools I use Navcat. Create a name for vhr database.

Vhr.sql import data files to mysql database.

3.3.2 modify the environmental profile of the project background

Modify the background of the project environment configuration file hrserver \ src \ main \ resources \

# MySQL 配置

3.3.3 IDE in run project

  1. Running back-end project

    a. Import items into the back-end development tools IDEA

b. Run back-end project

Open the backstage entrance class project

c. project started successfully in the following figure

  1. Running front-end project

    a. project introduced into the front end development tool VSCode

b. Run the front end of the project

c. Run dev directly VSCode left navigation bar, NPM SCRIPTS in.

d.Ctrl + shift + Y exhaled control panel, console terminal execute the following command:

# 安装依赖
npm install

# 在 localhost:8080 启动项目
npm run dev

    Projects run successfully in the following figure

3.3.4 command line to run the project

Win + R open command window Wndows

  1. Running back-end project

    a. Change directory to vhr \ hrserver under

b. Packaging Project Background

mvn clean package

c. command line to run the micro-project personnel background

Change directory to hrserver \ target, execute the following command to start the project

java -jar hrserver-0.0.1-SNAPSHOT.jar

d. the project runs successfully into the next chart success

  1. Running front-end project

    a. Change directory to vhr \ vuehr under

b. sequentially executes the command line as follows

# 安装依赖
npm install

# 在 localhost:8080 启动项目
npm run dev

c. Run the success of the project into the next chart success

3.3.5 Project started successfully effect

    Basic information maintenance staff

    Basic settings

Fourth, and finally

Tutorial At this point, you should have some understanding of the simple separation of the front and rear end of the project. And you also have the project up and running locally. The so-called separation of front and rear end, in fact, you can get in! More technology involved in the project, you can select the technology of interest to learn. How to play back on your own: the deployed to the server formally launched, customize their own function, contribute code to the project, are possible.

This tutorial is for a certain Java-based programming, but do not know if you are running a small partner in this project. If you are a veteran welcome direct reading project documentation, access to more detailed information.

V. Reference article:

  • SpringBoot wiki

  • Spring Security wiki

  • MyBatis wiki

  • MVVM framework wiki

Leave a Reply