Traditional Culture Website Implementation with Spring Boot and Vue.js

Technical Framework

Backend: Spring Boot Framework

Spring Boot is an open-source framework designed for rapid development of Spring-based applications. It follows the principle of convention over configuration, providing default configurations that allow developers to focus on business logic rather than configuration files. Spring Boot simplifies application configuration through automatic configuration and convention-over-configuration approaches. Developers no longer need to manually configure numerous XML files or complex annotations, as the framework offers default configurations that automatically complete setup based on project dependencies and conventions. Spring Boot uses Maven or Gradle for building, automatically downloading project dependencies, and provides many plugins to simplify the build process. Developers can use Spring Initializr to generate a basic project structure and then select required dependencies as needed.

Frontend: Vue.js Framework

Vue.js aims to be as simple, easy to understand, and accessible as possible. Vue provides an intuitive API that enables developers to easily build interactive user interfaces. Vue.js offers a simple yet powerful data binding mechanism, allowing view and data to be bound bidirectionally through directives like v-model. When data changes, the view automatically updates, and vice versa, eliminating the need for manual DOM manipulation. Vue.js provides a set of lifecycle hook functions that allow developers to execute custom logic at different stages of a component. This includes creation, mounting, updating, and destruction phases, offering developers greater flexibility.

Feasibility Analysis

Feasibility analysis is an essential part of every development project and can directly impact a system's viability. The enalysis examines the development significance and whether the developed system can address shortcomings in traditional manual statistical methods or solve existing problems in cultural heritage management systems. Through the development of this traditional culture website, we can gradually reduce staff workload while enabling more efficient operations and management. The system development achieves maximum significance and value. After completion, we must evaluate whether benefits outweigh costs and whether expected outcomes can be achieved. The following aspects were considered in the feasibility analysis:

  • Technical Feasibility: Java technology adoption ensures feasibility due to its continuous maturity.
  • Economic Feasibility: Post-development benefits versus development costs.
  • Operational Feasibility: System usability and practicality for end-users.

System Testing

Testing from multiple perspectives to identify system issues is the primary goal of this system. Functional testing helps locate system defects and ansure corrections, guaranteeing a defect-free system. During testing, we verify that the system meets customer requirements and promptly address any discovered problems. After testing, we draw conclusions about the system's quality.

System Testing Objectives

System testing is an essential and patient process. Its importance lies in being the final gatekeeper for system quality and reliability, and the last check in the entire development process. System testing primarily aims to prevent user issues and enhance user experience. To avoid impacting user experience, we must consider potential system problems from multiple angles and perspectives, using different simulated scenarios to discover and resolve defects. The testing process also reveals the system's quality status, functionality completeness, and logical flow. A thorough system testing process significantly improves system quality and user satisfaction. The goal is to verify whether the system conforms to the requirements specification and identify any discrepancies or conflicts.

System Functionality Testing

Testing system functional modules through methods like clicking, inputting boundary values, and validating required/optional fields constitutes black-box testing. By creating test cases and executing them, we derive test conclusions.

Login Function Test Cases

Input Data Expected Result Actual Result Result Analysis
Username: admin, Password: 123456, Verification Code: Correct Login successful Successfully logged into system Matches expected result
Username: admin, Password: 111111, Verification Code: Correct Password error Password error, please re-enter password Matches expected result
Username: admin, Password: 123456, Verification Code: Incorrect Verification code error Verification code information error Matches expected result
Username: Empty, Password: 123456, Verification Code: Correct Username required Please enter username Matches expected result
Username: admin, Password: Empty, Verification Code: Correct Password error Password error, please re-enter password Matches expected result

User Management Function Test Cases

Input Data Expected Result Actual Result Result Analysis
Enter user basic information Add successful, displayed in user list User appears in list Matches expected result
Modify user information Edit successful, information updated User information modified Matches expected result
Select and delete user System asks for confirmation, user deleted after confirmation System asks for confirmation, user not found after confirmation Matches expected result
Add user without username Prompt username cannot be empty Prompt username cannot be empty Matches expected result
Enter existing username Add fails, prompt username already used Add fails, prompt username already used Matches expected result

Database Table Design

Column Name Data Type Length Constraints
id int 11 PRIMARY KEY
addtime datetime DEFAULT NULL
jieyuedanhao varchar 64 DEFAULT NULL
tushubianhao varchar 64 DEFAULT NULL
tushumingcheng varchar 12 DEFAULT NULL
fakuanshuoming varchar 64 DEFAULT NULL
fakuanjine varchar 64 DEFAULT NULL
fakuanriqi varchar 64 DEFAULT NULL
yonghuming varchar 64 DEFAULT NULL
shouji varchar 64 DEFAULT NULL

Code Reference


/**
 * General API Controller
 */
@RestController
public class GeneralController {
    @Autowired
    private GeneralService generalService;
    
    @Autowired
    private ConfigurationService configService;
    
    private static FaceRecognitionClient faceClient = null;
    
    private static String BAIDU_API_KEY = null;
    
    @RequestMapping("/location")
    public Response location(String longitude, String latitude) {
        if(BAIDU_API_KEY == null) {
            BAIDU_API_KEY = configService.findOne(new QueryWrapper<configurationentity>().eq("name", "baidu_api_key")).getValue();
            if(BAIDU_API_KEY == null) {
                return Response.error("Please configure baidu_api_key correctly in configuration management");
            }
        }
        Map<string string=""> locationData = BaiduUtils.getCityByCoordinates(BAIDU_API_KEY, longitude, latitude);
        return Response.ok().put("data", locationData);
    }
    
    /**
     * Face comparison
     * 
     * @param image1 First face image
     * @param image2 Second face image
     * @return Comparison result
     */
    @RequestMapping("/compareFaces")
    public Response compareFaces(String image1, String image2) {
        if(faceClient == null) {
            String apiKey = configService.findOne(new QueryWrapper<configurationentity>().eq("name", "face_api_key")).getValue();
            String secretKey = configService.findOne(new QueryWrapper<configurationentity>().eq("name", "face_secret_key")).getValue();
            String authToken = BaiduUtils.getAuthentication(apiKey, secretKey);
            if(authToken == null) {
                return Response.error("Please configure APIKey and SecretKey correctly");
            }
            faceClient = new FaceRecognitionClient(null, apiKey, secretKey);
            faceClient.setConnectionTimeout(2000);
            faceClient.setSocketTimeout(60000);
        }
        JSONObject result = null;
        try {
            File fileOne = new File(ResourceUtils.getFile("classpath:static/uploads").getAbsolutePath() + "/" + image1);
            File fileTwo = new File(ResourceUtils.getFile("classpath:static/uploads").getAbsolutePath() + "/" + image2);
            String encodedImage1 = Base64Encoder.encode(FileUtils.fileToBytes(fileOne));
            String encodedImage2 = Base64Encoder.encode(FileUtils.fileToBytes(fileTwo));
            ComparisonRequest request1 = new ComparisonRequest(encodedImage1, "BASE64");
            ComparisonRequest request2 = new ComparisonRequest(encodedImage2, "BASE64");
            List<comparisonrequest> comparisonRequests = new ArrayList<>();
            comparisonRequests.add(request1);
            comparisonRequests.add(request2);
            result = faceClient.compare(comparisonRequests);
            System.out.println(result.get("result"));
        } catch (FileNotFoundException e) {
            e.printStackTrace();
            return Response.error("File not found");
        } catch (IOException e) {
            e.printStackTrace();
        } 
        return Response.ok().put("data", com.alibaba.fastjson.JSONObject.parse(result.get("result").toString()));
    }
}
</comparisonrequest></configurationentity></configurationentity></string></configurationentity>

Database Scripts


CREATE TABLE `users` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT 'Primary key',
  `addtime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 'Creation time',
  `username` varchar(200) NOT NULL COMMENT 'Username',
  `password` varchar(200) NOT NULL COMMENT 'Password',
  `fullname` varchar(200) DEFAULT NULL COMMENT 'Full name',
  `gender` varchar(200) DEFAULT NULL COMMENT 'Gender',
  `avatar` varchar(200) DEFAULT NULL COMMENT 'Avatar',
  `phone` varchar(200) DEFAULT NULL COMMENT 'Phone',
  `id_card` varchar(200) DEFAULT NULL COMMENT 'ID card',
  PRIMARY KEY (`id`),
  UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB AUTO_INCREMENT=1616222324596 DEFAULT CHARSET=utf8mb3 COMMENT='Users';

CREATE TABLE `messages` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT 'Primary key',
  `addtime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 'Creation time',
  `user_id` bigint NOT NULL COMMENT 'Message sender ID',
  `username` varchar(200) DEFAULT NULL COMMENT 'Username',
  `content` longtext NOT NULL COMMENT 'Message content',
  `reply` longtext COMMENT 'Reply content',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1616222424131 DEFAULT CHARSET=utf8mb3 COMMENT='Message board';

CREATE TABLE `auth_tokens` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT 'Primary key',
  `user_id` bigint NOT NULL COMMENT 'User ID',
  `username` varchar(100) NOT NULL COMMENT 'Username',
  `table_name` varchar(100) DEFAULT NULL COMMENT 'Table name',
  `role` varchar(100) DEFAULT NULL COMMENT 'Role',
  `token` varchar(200) NOT NULL COMMENT 'Token',
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 'Creation time',
  `expires_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 'Expiration time',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb3 COMMENT='Token table';

Tags: Spring Boot Vue.js Traditional Culture web development java

Posted on Sun, 02 Aug 2026 16:34:43 +0000 by cactus