University Student Employment Information Platform: Design and Implementation with SpringBoot, Vue, and uniapp

Introduction

This article presents the detailed design and implementation of a university student employment information platform built with modern web technologies. The platform aims to connect university students with potential employers through a comprehensive web interface and a WeChat mini program.

Technology Stack

Backend Framework: SpringBoot

SpringBoot simplifies application development by providing embedded servers like Tomcat, Jetty, and Undertow. Its auto-configuration feature automatically configures the application based on dependencies, eliminating the need for manual setup. The framework offers numerous built-in features and plugins such as Spring Data, Spring Security, and Spring Cloud, enabling developers to build applications quickly and efficiently. SpringBoot's popularity stems from its ability to streamline the development of high-quality applications.

Frontend Framework: Vue.js

Vue.js utilizes virtual DOM technology to enable efficeint DOM operations. The framework employs reactive data binding, virtual DOM, and component-based architecture, providing developers with a flexible, efficient, and maintainable development model. When data changes, the UI automatically updates, allowing developers to focus on data processing rather than manual UI updates. This approach makes Vue.js simple, flexible, and efficient.

Persistence Layer Framework: MyBatis-Plus

MyBatis-Plus is an enhancement tool based on the MyBatis framework designed to simplify development. As an open-source Java framework, it supports multiple databases including MySQL, Oracle, SQL Server, and PostgreSQL. MyBatis-Plus offers extensive APIs and annotations for ORM operations, significantly reducing manual SQL coding. The framework also includes a code generator that automatically creates entity classes, Mapper interfaces, and XML mapping files, streamlining the development process. Additional features like pagination queries, dynamic queries, optimistic locking, and performance analysis facilitate efficient data operations.

System Architecture

The platform follows a three-tier architecture:

• Presentation Layer: Built with Vue.js for the web interface and uniapp for the WeChat mini program
• Business Logic Layer: Implemented using SpringBoot services and controllers
• Data Access Layer: Utilizes MyBatis-Plus for database operations

Implementation Details

Authentication System

The platform implements a token-based authentication system to secure API endpoints. The following code demonstrates the authentication interceptor:

@Component
public class SecurityInterceptor implements HandlerInterceptor {
    public static final String AUTH_TOKEN_HEADER = "Authorization";
    
    @Autowired
    private AuthenticationService authService;
    
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        // Enable cross-origin requests
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with,request-source,Authorization, Origin,imgType, Content-Type, cache-control,postman-token,Cookie, Accept");
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        
        // Handle preflight requests
        if (request.getMethod().equals(RequestMethod.OPTIONS.name())) {
            response.setStatus(HttpStatus.OK.value());
            return false;
        }
        
        SkipAuth annotation;
        if (handler instanceof HandlerMethod) {
            annotation = ((HandlerMethod) handler).getMethodAnnotation(SkipAuth.class);
        } else {
            return true;
        }

        // Skip authentication for methods with @SkipAuth annotation
        if(annotation != null) {
            return true;
        }
        
        // Extract token from header
        String token = request.getHeader(AUTH_TOKEN_HEADER);
        
        AuthenticationToken authTokenn = null;
        if(StringUtils.isNotBlank(token)) {
            authTokenn = authService.validateToken(token);
        }
        
        if(authTokenn != null) {
            request.getSession().setAttribute("userId", authTokenn.getUserId());
            request.getSession().setAttribute("userRole", authTokenn.getRole());
            request.getSession().setAttribute("userTable", authTokenn.getTable());
            request.getSession().setAttribute("username", authTokenn.getUsername());
            return true;
        }
        
        // Return unauthorized error
        response.setCharacterEncoding("UTF-8");
        response.setContentType("application/json; charset=utf-8");
        try {
            response.getWriter().print(JSONObject.toJSONString(ResponseResult.error(401, "Authentication required")));
        } finally {
            response.getWriter().close();
        }
        return false;
    }
}

Token Generation

The platform generates authentication tokens with expiration times. Here's the token generation service:

@Override
public String generateToken(Long userId, String username, String tableName, String role) {
    AuthenticationToken existingToken = this.selectOne(new EntityWrapper<authenticationtoken>()
        .eq("userId", userId).eq("role", role));
    
    String newToken = TokenUtil.generateRandomToken(32);
    Calendar cal = Calendar.getInstance();   
    cal.setTime(new Date());   
    cal.add(Calendar.HOUR_OF_DAY, 1);
    
    if(existingToken != null) {
        existingToken.setToken(newToken);
        existingToken.setExpirationTime(cal.getTime());
        this.updateById(existingToken);
    } else {
        this.insert(new AuthenticationToken(userId, username, tableName, role, newToken, cal.getTime()));
    }
    return newToken;
}</authenticationtoken>

Login Endpoint

The authentication endpoint processes login requests:

@SkipAuth
@PostMapping(value = "/authenticate")
public ResponseResult authenticate(String username, String password, String captcha, HttpServletRequest request) {
   UserEntity user = userService.selectOne(new EntityWrapper<userentity>().eq("username", username));
   if(user == null || !user.getPassword().equals(password)) {
      return ResponseResult.error("Invalid credentials");
   }
   String token = tokenService.generateToken(user.getId(), username, "users", user.getRole());
   return ResponseResult.success().put("token", token);
}</userentity>

Database Schema

The platform uses a relational database with the following authentication table structure:

-- ----------------------------
-- Table structure for authentication_tokens
-- ----------------------------
DROP TABLE IF EXISTS `authentication_tokens`;
CREATE TABLE `authentication_tokens` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT 'Primary key',
  `userId` bigint(20) NOT NULL COMMENT 'User ID',
  `username` varchar(100) NOT NULL COMMENT 'Username',
  `tableName` varchar(100) DEFAULT NULL COMMENT 'Table name',
  `role` varchar(100) DEFAULT NULL COMMENT 'User role',
  `token` varchar(200) NOT NULL COMMENT 'Authentication token',
  `creationTime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 'Creation time',
  `expirationTime` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00' COMMENT 'Expiration time',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=27 DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT COMMENT='Authentication tokens table';

-- ----------------------------
-- Sample records
-- ----------------------------
INSERT INTO `authentication_tokens` VALUES ('9', '23', 'stu01', 'students', 'Student', 'al6svx5qkei1wljry5o1npswhdpqcpcg', '2023-02-23 21:46:45', '2023-03-15 14:01:36');
INSERT INTO `authentication_tokens` VALUES ('10', '11', 'stu02', 'students', 'Student', 'fahmrd9bkhqy04sq0fzrl4h9m86cu6kx', '2023-02-27 18:33:52', '2023-03-17 18:27:42');
INSERT INTO `authentication_tokens` VALUES ('11', '17', 'stu03', 'students', 'Student', 'u5km44scxvzuv5yumdah2lhva0gp4393', '2023-02-27 18:46:19', '2023-02-27 19:48:58');
INSERT INTO `authentication_tokens` VALUES ('12', '1', 'admin', 'users', 'Administrator', 'h1pqzsb9bldh93m92j9m2sljy9bt1wdh', '2023-02-27 19:37:01', '2023-03-17 18:23:02');
INSERT INTO `authentication_tokens` VALUES ('13', '21', 'club01', 'club_managers', 'Club Manager', 'zdm7j8h1wnfe27pkxyiuzvxxy27ykl2a', '2023-02-27 19:38:07', '2023-03-17 18:25:20');
INSERT INTO `authentication_tokens` VALUES ('14', '27', 'stu04', 'students', 'Student', 'g3teq4335pe21nwuwj2sqkrpqoabqomm', '2023-03-15 12:56:17', '2023-03-15 14:00:16');
INSERT INTO `authentication_tokens` VALUES ('15', '29', 'club02', 'club_managers', 'Club Manager', '0vb1x9xn7riewlp5ddma5ro7lp4u8m9j', '2023-03-15 12:58:08', '2023-03-15 14:03:48');

Testing Approach

The platform underwent comprehensive testing to ensure functionality and reliability. The testing process included:

System Testing Objectives

System testing serves as the final quality assurance checkpoint in the development lifecycle. Its purpose is to prevent user issues and enhance the user experience by identifying and resolving potential problems from multiple perspectives. The testing process evaluates system quality, functional completeness, and logical flow. The primary goal is to verify that the system meets the requirements defined in the specifications.

Functional Testing

Functional testing focused on verifying each system module through black-box testing techniques. Test cases were designed to validate normal operations, boundary conditions, and required field valiadtion.

Login Function Testing

The login functionality was tested with various scenarios:

User Management Function Testing

User management operations were tested for add, edit, delete, and search functionality:

Testing Conclusion

The platform primarily utilized black-box testing with test cases developed based on simulated user scenarios. This approach ensured the correctness of system workflows. System testing is essential for improving platform usability and functionality. The testing process aimed to verify that the system met initial design requirements and that all functional modules operated correctly. The platform's straightforward logic ensures ease of use. All test scenarios aligned with user requirements, with issues addressed from the user's perspective. The final test results confirm that the implemented system meets both functional and performance requirements.