System Architecture Overview

The platform is structured as a single-page web application backed by a RESTful API. The frontend leverages Vue to manage dynamic student interfaces, while the backend is powered by Spring Boot to handle business logic, assessment rules, and data processing. MySQL serves as the persistent data store.

Setting Up the Backend Service

Start by creating a Spring Boot project with the necessary dependencies: Spring Web, MyBatis-Plus, and the MySQL connector. The following configuration file demonstrates the essential server and database properties.

server:
  tomcat:
    uri-encoding: UTF-8
  port: 8080
  servlet:
    context-path: /assessment

spring:
  datasource:
    driverClassName: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/assessment_db?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
    username: dev_user
    password: dev_pass
  servlet:
    multipart:
      max-file-size: 300MB
      max-request-size: 300MB
  resources:
    static-locations: classpath:static/,file:static/

mybatis-plus:
  mapper-locations: classpath*:mapper/*.xml
  typeAliasesPackage: com.assessment.entity
  global-config:
    id-type: 1
    field-strategy: 1
    db-column-underline: true
    refresh-mapper: true
    logic-delete-value: -1
    logic-not-delete-value: 0
    sql-injector: com.baomidou.mybatisplus.mapper.LogicSqlInjector
  configuration:
    map-underscore-to-camel-case: true
    cache-enabled: false
    call-setters-on-nulls: true
    jdbc-type-for-null: 'null'

Defining Data Access with MyBatis-Plus

Entity mappings are defined through XML files to query student records. The snippet below shows how the StudentDao interface connects to the mapper.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.assessment.dao.StudentDao">

    <resultMap type="com.assessment.entity.StudentEntity" id="studentMap">
        <result property="studentId" column="student_id"/>
        <result property="password" column="password"/>
        <result property="fullName" column="full_name"/>
        <result property="gender" column="gender"/>
        <result property="grade" column="grade"/>
        <result property="age" column="age"/>
        <result property="admissionDate" column="admission_date"/>
        <result property="contactNumber" column="contact_number"/>
        <result property="email" column="email"/>
        <result property="idCard" column="id_card"/>
    </resultMap>

    <select id="fetchStudentVO"
        resultType="com.assessment.entity.vo.StudentVO" >
        SELECT * FROM student s
        <where> 1=1 ${ew.sqlSegment}</where>
    </select>

    <select id="fetchStudentView"
        resultType="com.assessment.entity.view.StudentView" >
        SELECT s.* FROM student s
        <where> 1=1 ${ew.sqlSegment}</where>
    </select>

</mapper>

Constructing the Frontend with Vue

Vue’s component model is ideal for building modular score entry forms, dashboards, and report views. A typical single-file component for displaying a student list might look like this:

<template>
  <div class="student-table">
    <el-table :data="students" style="width: 100%">
      <el-table-column prop="studentId" label="Student ID"></el-table-column>
      <el-table-column prop="fullName" label="Name"></el-table-column>
      <el-table-column prop="grade" label="Grade"></el-table-column>
      <el-table-column label="Actions">
        <template v-slot="scope">
          <el-button size="mini" @click="editRecord(scope.row)">Edit</el-button>
          <el-button size="mini" type="danger" @click="removeRecord(scope.row.studentId)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: []
    };
  },
  methods: {
    fetchData() {
      this.$http.get('/api/students').then(res => {
        this.students = res.data;
      });
    },
    editRecord(record) {
      this.$router.push({ name: 'StudentEdit', params: { id: record.studentId } });
    },
    removeRecord(id) {
      this.$http.delete(`/api/students/${id}`).then(() => this.fetchData());
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>

Database Design Considerations

MySQL tables should store core entities like students, courses, evaluation criteria, and scores. Use InnoDB for transactional integrity and establish foreign keys between score records and student profiles. Indexes on frequently queried columns—such as student_id and evaluation_date—significantly improve report generation speed.

API Integration Flow

The Vue application communicates with Spring Boot via Axios requests. Endpoints are organized under /api/ and follow REST conventions:

• GET /api/students — retrieve all students
• POST /api/evaluations — submit a new evaluation entry
• PUT /api/evaluations/{id} — update an existing record
• DELETE /api/evaluations/{id} — remove an evaluation

All reuqests pass through a centralized interceptor that attaches authentication tokens and handles global error responses.