现在我们可以继续开发在线课程管理系统。接下来的步骤将包括实现系统的基础功能,如教师上传课程资料、布置作业,学生提交作业和查看成绩等。我们可以从数据库设计、前后端接口、以及相应的 Vue 组件入手。
1. 数据库设计
为了支持不同角色(教师和学生)、课程、作业等功能,我们需要为系统设计数据库表:
建议的数据库表:
- users: 存储用户信息(包括教师和学生)。
- courses: 存储课程信息。
- assignments: 存储作业信息。
- submissions: 存储学生提交的作业和成绩。
数据库表设计:
CREATE TABLE users (id INT AUTO_INCREMENT PRIMARY KEY,username VARCHAR(255) NOT NULL,password VARCHAR(255) NOT NULL,role ENUM('teacher', 'student') NOT NULL
);CREATE TABLE courses (id INT AUTO_INCREMENT PRIMARY KEY,name VARCHAR(255) NOT NULL,description TEXT,teacher_id INT,FOREIGN KEY (teacher_id) REFERENCES users(id)
);CREATE TABLE assignments (id INT AUTO_INCREMENT PRIMARY KEY,title VARCHAR(255) NOT NULL,description TEXT,due_date DATE,course_id INT,FOREIGN KEY (course_id) REFERENCES courses(id)
);CREATE TABLE submissions (id INT AUTO_INCREMENT PRIMARY KEY,student_id INT,assignment_id INT,file_path VARCHAR(255),grade DECIMAL(5,2),submission_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,FOREIGN KEY (student_id) REFERENCES users(id),FOREIGN KEY (assignment_id) REFERENCES assignments(id)
);
2. 实现后端 API
a. 用户注册/登录
在前面的测试过程中已经有了用户注册的 API,接下来我们可以创建用户登录的 API。
b. 课程管理
创建教师可以创建课程的 API。
c. 作业管理
创建教师布置作业、学生提交作业的 API。
基础 API 设计:
// 登录 API
app.post('/login', (req, res) => {const { username, password } = req.body;const sql = 'SELECT * FROM users WHERE username = ? AND password = ?';db.query(sql, [username, password], (err, results) => {if (err) return res.status(500).send('Database error');if (results.length > 0) {res.send(results[0]); // 返回用户信息} else {res.status(401).send('Invalid credentials');}});
});// 创建课程 API
app.post('/courses', (req, res) => {const { name, description, teacher_id } = req.body;const sql = 'INSERT INTO courses (name, description, teacher_id) VALUES (?, ?, ?)';db.query(sql, [name, description, teacher_id], (err, result) => {if (err) return res.status(500).send('Database error');res.send('Course created successfully');});
});// 创建作业 API
app.post('/assignments', (req, res) => {const { title, description, due_date, course_id } = req.body;const sql = 'INSERT INTO assignments (title, description, due_date, course_id) VALUES (?, ?, ?, ?)';db.query(sql, [title, description, due_date, course_id], (err, result) => {if (err) return res.status(500).send('Database error');res.send('Assignment created successfully');});
});// 提交作业 API
app.post('/submissions', (req, res) => {const { student_id, assignment_id, file_path } = req.body;const sql = 'INSERT INTO submissions (student_id, assignment_id, file_path) VALUES (?, ?, ?)';db.query(sql, [student_id, assignment_id, file_path], (err, result) => {if (err) return res.status(500).send('Database error');res.send('Submission created successfully');});
});
3. 前端开发
a. 课程页面
教师可以在这个页面创建课程,学生可以查看课程列表。
b. 作业页面
教师可以在课程页面下布置作业,学生可以在作业页面提交作业。
示例:课程创建组件 CreateCourse.vue
<template><div><h2>Create a Course</h2><form @submit.prevent="createCourse"><div><label for="name">Course Name:</label><input type="text" v-model="name" id="name" /></div><div><label for="description">Description:</label><textarea v-model="description" id="description"></textarea></div><button type="submit">Create Course</button></form></div>
</template><script>
import axios from 'axios';export default {data() {return {name: '',description: '',};},methods: {async createCourse() {try {const teacherId = 1; // 假设当前用户是教师,id为1const response = await axios.post('http://localhost:3000/courses', {name: this.name,description: this.description,teacher_id: teacherId});alert('Course created successfully!');} catch (error) {console.error('Error creating course:', error);}}}
};
</script>
你可以根据需求进一步实现其他功能,比如学生查看课程、提交作业、查看成绩等。
接下来,我们可以继续根据这些功能逐步实现具体模块。如果有特别的功能或模块需要优先实现,可以告诉我!
接下来我将在练手项目专栏不定期更新以上在线课程管理系统,如果你对这些项目感兴趣可以先收藏、点赞、关注,在评论区留言。