Design and implementation of personnel management system for small and medium-sized enterprises based on Vue+JavaSSM+MySQL

Contents Chapter
1 Introduction 1
1.1 The meaning behind the personnel management system 1
1.2 Research status and development at home and abroad 1
1.3 Research content 3
1.4 Project background of this paper 6
Chapter 2 Experimental materials and methods 8
2.1 Overview 8
2.2 Experimental materials and methods 9
Chapter 3 Experimental Results and Discussion 12
3.1 Persistence layer operates database 14
3.1.1 Interface class description 14
3.1.2 Common sql tag pairs in xml files 15
3.1.3 Database file and model design 19
3.2 Service layer obtains persistence layer return value 26
3.3 The control layer provides RESTful services 27
3.4 Research on axios request interface 28
Chapter 4 Conclusion and Outlook 31
4.1 Conclusion 31
4.2 Outlook for further research 31
References 32
Acknowledgments 33
Appendix 34
This paper is mainly engaged in the development of personnel management systems, using the current The front-end and back-end separation technology, which is popular among small and medium-sized enterprises, is used to develop business functions that meet the actual needs of enterprise personnel management.
Modern JAVA EE enterprise-level applications are more inclined to simplify configuration. On the one hand, the back-end framework Spring Boot, as a rising star, brings a new automated configuration solution. Using Spring Boot, you can quickly create independent applications based on Spring's production level, simplifying It allows programmers to integrate and configure the SSM framework, achieve rapid deployment and operation, and reduce development workload [1,5]; on the other hand, with the rise of front-end Vue technology, unlike other large frameworks, Vue is designed to Apply layer by layer from bottom to top. Vue's core library only focuses on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with a modern tool chain and various supporting class libraries, Vue is fully capable of providing drivers for complex single-page applications [2, 11, 14].
The main content is the back-end development interface for adding, deleting, modifying, and checking, which is used by the front-end to send various requests through axios to call the back-end developed interface.
According to the separation of front-end and back-end, it can be divided into the following aspects:
Back-end development is as follows:
(1) Entity class: After all the tables in the database are designed, each field of the corresponding table is designed according to each data table. Member variables, one thing to note here is that the names of all member variables in the Java class should be exactly the same as the field names in the data table, or you can also use the camel case naming method of the member variables to match the field names of the data table, here For example, if there is a data table field name user_ID, then the member variable name must be userID[2] named in camel case; (
2) Persistence layer: Based on business needs, design corresponding tables for several tables that are often used in the database. SQL script statements are combined with the MyBatis persistence layer framework to write SQL scripts. Generally, the persistence layer is written through the MyBatis framework. In order to cater to the underlying implementation principle of the MyBatis framework, dynamic agents will provide corresponding interface classes. The writing of SQL query scripts will be based on Methods in interface classes [2,7,14];
(3) Interface layer: Write interface methods according to business needs to call the addition, deletion, modification and search methods designed in the persistence layer, and save the return value to the corresponding entity class. The interface layer usually includes the interface class and its implementation class. This layering is for the expansion and decoupling of future projects [1, 2, 12];
(4) Control layer: Develop relevant interfaces according to business needs. The paths in the interfaces are used to provide front-end requests and the requested JSON The data is returned to the front end. The JSON data here is the most commonly used data format for data exchange in front-end and back-end separation projects [1,2]; (5)
Configuration layer: provides basic configuration for Spring Boot and Spring framework, such as user page access Permission configuration Spring Security, WebSocket configuration for point-to-point sending of messages, related configuration of verification codes when logging in to the system, etc.[1,5].
Front-end development is as follows [4, 6, 10, 11]:
(1) Template component: This module is used to build the basic components of the page. The components here can be Element components. Element officially provides developers with a rich interactive interface Controls, developers can use various controls by directly mapping the Element library into Vue;
(2) Script script: This module is used for the logical implementation of page controls. Since the Node.js library is introduced in Vue, Node. The rich js script library provided by js can send various requests to the backend through axios, such as get, post requests, etc. After sending various requests to the backend, the returned data will be analyzed, cleaned and stored. Due to the Vue data It is binding. When the data in this module is updated, the data used by the components in the template module will also be automatically updated. Compared with traditional jsp, there are many fewer dom node operations. Therefore, for front-end development, this module is Key points and difficulties;
(3) Style: This module provides various components of the template module with a perfect layout on the page and a series of attribute settings for the components themselves. The quality of the style is directly related to the user experience, so it is generally used. Professional HR provides personal control over page layout.

package org.javaboy.vhr.controller;

import org.javaboy.vhr.model.ChatMsg;
import org.javaboy.vhr.model.Hr;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.security.core.Authentication;
import org.springframework.stereotype.Controller;

import java.security.Principal;
import java.util.Date;

@Controller
public class WsController {
    
    
    @Autowired
    SimpMessagingTemplate simpMessagingTemplate;
//    handleMsg方法为:消息点对点发送
    @MessageMapping("/ws/chat") //此注解用来接收前端消息
    public void handleMsg(Authentication authentication, ChatMsg chatMsg) {
    
    
        Hr hr = (Hr) authentication.getPrincipal(); //获取当前登录用户信息
        chatMsg.setFrom(hr.getUsername());
        chatMsg.setFromNickname(hr.getName());
        chatMsg.setDate(new Date());
        //发送消息至消息代理broker,前端可以通过/user/queue/chat订阅broker中的消息
        simpMessagingTemplate.convertAndSendToUser(chatMsg.getTo(), "/queue/chat", chatMsg);
    }
}

Insert image description here
Insert image description here
Insert image description here
Insert image description here
Insert image description here
Insert image description here
Insert image description here
Insert image description here
Insert image description here
Insert image description here

Guess you like

Origin blog.csdn.net/newlw/article/details/132793380