java + vue2 学生成绩管理系统-附详细代码_vue+java写学生管理系统教程

一个学生成绩管理系统可以用Java后端和Vue2前端来实现。下面是一个简单的示例，详细说明和代码如下：

在这个学生成绩管理系统中，我们可以设计一个简单的数据库模式来存储学生信息。

首先，我们可以创建一个名为students的表来存储学生信息，包括学生姓名、学号和成绩。可以使用以下SQL语句来创建这个表：

数据库设计

CREATE TABLE students (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(100) NOT NULL,
    student_number VARCHAR(20) NOT NULL,
    score INT NOT NULL
);
1
2
3
4
5
6

这个表有四个列：

• id：主键，用于唯一标识每个学生。
• name：学生姓名，使用VARCHAR(100)类型来存储。
• student_number：学生学号，使用VARCHAR(20)类型来存储。
• score：学生成绩，使用INT类型来存储。

然后，我们可以使用JPA（Java Persistence API）来在Java代码中映射这个数据库表。我们可以创建一个名为Student的实体类，并使用@Entity注解将其映射到数据库表。

@Entity
@Table(name = "students")
public class Student {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String name;

    @Column(name = "student_number")
    private String studentNumber;

    private int score;

    // 省略构造函数、getter和setter方法
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这个实体类中，我们使用了@Entity注解将其标记为一个实体类，并使用@Table注解指定了对应的数据库表名。通过@Id注解和@GeneratedValue注解，我们将id列指定为主键，并使用自增策略生成唯一的主键值。使用@Column注解，我们将student_number属性映射到数据库表中的student_number列。

这样，我们就完成了数据库设计和实体类的映射。在后端的学生成绩管理系统中，我们可以使用JPA来操作数据库，如保存学生信息、查询学生列表等。

后端 - Java

后端使用Java编写，可以使用Spring Boot框架来搭建RESTful API。

# 1. 创建一个Spring Boot项目，并添加相关依赖，如Spring Web、Spring Data JPA等。

2. 创建一个实体类Student，表示学生信息，包含学生的姓名、学号和成绩等字段。

@Entity
public class Student {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String name;

    private String studentNumber;

    private double score;

    // 省略构造方法、getter和setter
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3. 创建一个StudentRepository接口，继承自JpaRepository，用于处理学生信息的持久化操作。

@Repository
public interface StudentRepository extends JpaRepository<Student, Long> {
    // 可以在这里定义一些查询方法，如根据学号查询学生信息等
}
1
2
3
4

# 4. 创建一个StudentController类，用于处理学生信息的请求。

@RestController
@RequestMapping("/students")
public class StudentController {
    private final StudentRepository studentRepository;

    public StudentController(StudentRepository studentRepository) {
        this.studentRepository = studentRepository;
    }

    @GetMapping
    public List<Student> getAllStudents() {
        return studentRepository.findAll();
    }

    @PostMapping
    public Student createStudent(@RequestBody Student student) {
        return studentRepository.save(student);
    }

    // 省略其他API方法，如更新学生信息、删除学生等
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

5. 运行项目，后端的学生成绩管理系统的API就可以通过/students来访问。

前端 - Vue2

前端使用Vue2框架来实现学生成绩管理系统的用户界面。

1. 创建一个Vue项目，并安装相关依赖，如axios、vue-router等。

2. 创建一个StudentList组件，用于显示学生列表。

<template>
  <div>
    <h2>学生列表</h2>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>学号</th>
          <th>成绩</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="student in students" :key="student.id">
          <td>{{ student.name }}</td>
          <td>{{ student.studentNumber }}</td>
          <td>{{ student.score }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      students: []
    };
  },
  mounted() {
    this.fetchStudents();
  },
  methods: {
    fetchStudents() {
      axios.get('/students')
        .then(response => {
          this.students = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

3. 创建一个StudentForm组件，用于添加学生信息。

<template>
  <div>
    <h2>添加学生</h2>
    <form @submit.prevent="createStudent">
      <div>
        <label for="name">姓名：</label>
        <input type="text" id="name" v-model="student.name" required>
      </div>
      <div>
        <label for="studentNumber">学号：</label>
        <input type="text" id="studentNumber" v-model="student.studentNumber" required>
      </div>
      <div>
        <label for="score">成绩：</label>
        <input type="number" id="score" v-model="student.score" required>
      </div>
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      student: {
        name: '',
        studentNumber: '',
        score: 0
      }
    };
  },
  methods: {
    createStudent() {
      axios.post('/students', this.student)
        .then(response => {
          console.log(response.data);
          // 清空表单
          this.student = {
            name: '',
            studentNumber: '',
            score: 0
          };
          // 刷新学生列表
          this.$emit('refresh');
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

# 4. 创建一个App组件，用于组合其他组件。

<template>
  <div>
    <student-list @refresh="fetchStudents"></student-list>
    <student-form @refresh="fetchStudents"></student-form>
  </div>
</template>

<script>
import StudentList from './components/StudentList.vue';
import StudentForm from './components/StudentForm.vue';

export default {
  components: {
    StudentList,
    StudentForm
  },
  methods: {
    fetchStudents() {
      // 刷新学生列表
      this.$refs.studentList.fetchStudents();
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

5. 运行项目，前端的学生成绩管理系统就可以通过访问Vue应用的根路径来访问。

这是一个简单的学生成绩管理系统的示例，后端使用Java编写RESTful API，前端使用Vue2编写用户界面。你可以根据实际需求进行扩展和优化。