进一步开发在线课程管理系统的功能，包括学生查看课程、提交作业、查看成绩等。-CSDN博客

本文链接：https://blog.csdn.net/qq_63170044/article/details/143115340

1. 学生查看课程功能

学生需要一个页面来查看他们已经注册的课程列表。我们可以在数据库中创建一个关联表 enrollments，用于记录学生注册的课程。

a. 修改数据库设计

新增一张 enrollments 表，来存储学生注册的课程信息：

CREATE TABLE enrollments (
    id INT AUTO_INCREMENT PRIMARY KEY,
    student_id INT,
    course_id INT,
    enrollment_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (student_id) REFERENCES users(id),
    FOREIGN KEY (course_id) REFERENCES courses(id)
);

b. 后端 API

为学生提供查看他们注册课程的接口：

// 获取学生的课程列表 API
app.get('/students/:id/courses', (req, res) => {
    const studentId = req.params.id;
    const sql = `
        SELECT courses.id, courses.name, courses.description 
        FROM courses 
        INNER JOIN enrollments ON courses.id = enrollments.course_id
        WHERE enrollments.student_id = ?
    `;
    db.query(sql, [studentId], (err, results) => {
        if (err) return res.status(500).send('Database error');
        res.send(results);
    });
});

c. Vue 组件：学生查看课程列表 `StudentCourses.vue`

<template>
  <div>
    <h2>My Courses</h2>
    <ul>
      <li v-for="course in courses" :key="course.id">
        <h3>{{ course.name }}</h3>
        <p>{{ course.description }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      courses: []
    };
  },
  async created() {
    try {
      const studentId = 1; // 假设当前用户是学生，id为1
      const response = await axios.get(`http://localhost:3000/students/${studentId}/courses`);
      this.courses = response.data;
    } catch (error) {
      console.error('Error fetching courses:', error);
    }
  }
};
</script>

2. 学生提交作业功能

学生需要在作业页面上传作业文件。我们将实现一个上传作业的 API，并创建前端页面让学生提交作业。

a. 后端 API：学生提交作业

我们可以使用 multer 中间件来处理文件上传：

npm install multer

const multer = require('multer');
const upload = multer({ dest: 'uploads/' }); // 指定文件上传目录

// 提交作业 API
app.post('/submissions', upload.single('file'), (req, res) => {
    const { student_id, assignment_id } = req.body;
    const filePath = req.file.path; // 获取上传文件的路径
    const sql = 'INSERT INTO submissions (student_id, assignment_id, file_path) VALUES (?, ?, ?)';
    db.query(sql, [student_id, assignment_id, filePath], (err, result) => {
        if (err) return res.status(500).send('Database error');
        res.send('Assignment submitted successfully');
    });
});

b. Vue 组件：学生提交作业 `SubmitAssignment.vue`

<template>
  <div>
    <h2>Submit Assignment</h2>
    <form @submit.prevent="submitAssignment" enctype="multipart/form-data">
      <div>
        <label for="assignment">Assignment File:</label>
        <input type="file" @change="handleFileUpload" />
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    async submitAssignment() {
      try {
        const formData = new FormData();
        formData.append('file', this.file);
        formData.append('student_id', 1); // 假设当前学生 ID 为 1
        formData.append('assignment_id', 1); // 假设作业 ID 为 1

        const response = await axios.post('http://localhost:3000/submissions', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        alert('Assignment submitted successfully!');
      } catch (error) {
        console.error('Error submitting assignment:', error);
      }
    }
  }
};
</script>

3. 学生查看成绩功能

学生需要一个页面查看他们提交作业的成绩。

a. 后端 API：查看学生作业成绩

// 获取学生成绩 API
app.get('/students/:id/grades', (req, res) => {
    const studentId = req.params.id;
    const sql = `
        SELECT assignments.title, submissions.grade 
        FROM submissions 
        INNER JOIN assignments ON submissions.assignment_id = assignments.id
        WHERE submissions.student_id = ?
    `;
    db.query(sql, [studentId], (err, results) => {
        if (err) return res.status(500).send('Database error');
        res.send(results);
    });
});

b. Vue 组件：查看成绩 `ViewGrades.vue`

<template>
  <div>
    <h2>My Grades</h2>
    <ul>
      <li v-for="grade in grades" :key="grade.title">
        <h3>{{ grade.title }}</h3>
        <p>Grade: {{ grade.grade || 'Not Graded Yet' }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      grades: []
    };
  },
  async created() {
    try {
      const studentId = 1; // 假设当前学生 ID 为 1
      const response = await axios.get(`http://localhost:3000/students/${studentId}/grades`);
      this.grades = response.data;
    } catch (error) {
      console.error('Error fetching grades:', error);
    }
  }
};
</script>

4. 连接功能到路由

最后，将这些功能页面添加到 Vue Router 中：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Register from '../components/Register.vue';
import StudentCourses from '../components/StudentCourses.vue';
import SubmitAssignment from '../components/SubmitAssignment.vue';
import ViewGrades from '../components/ViewGrades.vue';

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/register', name: 'Register', component: Register },
  { path: '/courses', name: 'StudentCourses', component: StudentCourses },
  { path: '/submit-assignment', name: 'SubmitAssignment', component: SubmitAssignment },
  { path: '/view-grades', name: 'ViewGrades', component: ViewGrades }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;