htmledit_views">

1. 学生查看课程功能

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

a. 修改html" title=数据库>数据库设计

新增一张 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

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

html" title=javascript>javascript">// 获取学生的课程列表 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_idWHERE 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

html" title=javascript>javascript"><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为1const 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 中间件来处理文件上传：

html" title=javascript>javascript">npm install multer

html" title=javascript>javascript">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

html" title=javascript>javascript"><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 为 1formData.append('assignment_id', 1); // 假设作业 ID 为 1const 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：查看学生作业成绩

html" title=javascript>javascript">// 获取学生成绩 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.idWHERE 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

html" title=javascript>javascript"><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 为 1const 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 中：

html" title=javascript>javascript">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;

5. 运行项目并测试

启动 Vue.js 和 Node.js 服务后，你可以访问以下页面测试功能：

• http://localhost:8080/courses: 学生查看课程页面。
• http://localhost:8080/submit-assignment: 提交作业页面。
• http://localhost:8080/view-grades: 查看成绩页面。

这将基本完成html" title=在线课程管理系统>在线课程管理系统的核心功能。如果有特定需求或者细节要优化，我们可以继续调整！

接下来我将在练手项目专栏不定期更新以上html" title=在线课程管理系统>在线课程管理系统，如果你对这些项目感兴趣可以先收藏、点赞、关注，在评论区留言。