在线考试系统源码搭建：springboot+mybatis+mysql+vue

**在线考试系统源码搭建**

在本文中，我们将使用Spring Boot、MyBatis、MySQL和Vue来搭建一个完整的在线考试系统。我们将一步步地讲解如何设计数据库、编写业务逻辑、实现前端交互等。

###1. 设计数据库首先，我们需要设计数据库表结构。在线考试系统涉及到的主要实体包括用户、课程、题目、试卷和成绩。下面是我们设计的数据库表结构：

sqlCREATE TABLE `user` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `username` varchar(255) NOT NULL,
 `password` varchar(255) NOT NULL,
 PRIMARY KEY (`id`)
);

CREATE TABLE `course` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(255) NOT NULL,
 `description` text,
 PRIMARY KEY (`id`)
);

CREATE TABLE `question` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `content` text NOT NULL,
 `answer` varchar(255) NOT NULL,
 `course_id` int(11) NOT NULL,
 PRIMARY KEY (`id`),
 KEY `FK_question_course` (`course_id`),
 CONSTRAINT `FK_question_course` FOREIGN KEY (`course_id`) REFERENCES `course` (`id`)
);

CREATE TABLE `paper` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(255) NOT NULL,
 `description` text,
 PRIMARY KEY (`id`)
);

CREATE TABLE `score` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `user_id` int(11) NOT NULL,
 `paper_id` int(11) NOT NULL,
 `score` int(11) NOT NULL,
 PRIMARY KEY (`id`),
 KEY `FK_score_user` (`user_id`),
 KEY `FK_score_paper` (`paper_id`),
 CONSTRAINT `FK_score_user` FOREIGN KEY (`user_id`) REFERENCES `user` (`id`),
 CONSTRAINT `FK_score_paper` FOREIGN KEY (`paper_id`) REFERENCES `paper` (`id`)
);

java// User.java@Entitypublic class User {
 @Id private Long id;
 private String username;
 private String password;

 // getter and setter}

// Course.java@Entitypublic class Course {
 @Id private Long id;
 private String name;
 private String description;

 // getter and setter}

// Question.java@Entitypublic class Question {
 @Id private Long id;
 private String content;
 private String answer;
 @ManyToOne @JoinColumn(name = "course_id")
 private Course course;

 // getter and setter}

// Paper.java@Entitypublic class Paper {
 @Id private Long id;
 private String name;
 private String description;

 // getter and setter}

// Score.java@Entitypublic class Score {
 @Id private Long id;
 private Long userId;
 private Long paperId;
 private Integer score;

 // getter and setter}

java// UserMapper.java@Mapperpublic interface UserMapper {
 List selectAll();
}

// CourseMapper.java@Mapperpublic interface CourseMapper {
 List selectAll();
}

// QuestionMapper.java@Mapperpublic interface QuestionMapper {
 List selectByCourseId(Long courseId);
}

// PaperMapper.java@Mapperpublic interface PaperMapper {
 List selectAll();
}

// ScoreMapper.java@Mapperpublic interface ScoreMapper {
 List selectByUserIdAndPaperId(Long userId, Long paperId);
}

java// UserService.java@Servicepublic class UserService {
 @Autowired private UserMapper userMapper;

 public List getAllUsers() {
 return userMapper.selectAll();
 }
}

// CourseService.java@Servicepublic class CourseService {
 @Autowired private CourseMapper courseMapper;

 public List getAllCourses() {
 return courseMapper.selectAll();
 }
}

// QuestionService.java@Servicepublic class QuestionService {
 @Autowired private QuestionMapper questionMapper;

 public List getQuestionsByCourseId(Long courseId) {
 return questionMapper.selectByCourseId(courseId);
 }
}

// PaperService.java@Servicepublic class PaperService {
 @Autowired private PaperMapper paperMapper;

 public List getAllPapers() {
 return paperMapper.selectAll();
 }
}

// ScoreService.java@Servicepublic class ScoreService {
 @Autowired private ScoreMapper scoreMapper;

 public List getScoresByUserIdAndPaperId(Long userId, Long paperId) {
 return scoreMapper.selectByUserIdAndPaperId(userId, paperId);
 }
}

bashnpm install vue-cli -gvue init webpack my-exam-systemcd my-exam-systemnpm install

javascript// UserList.vue<template>
 <div>
 <h1>用户列表</h1>
 <ul>
 <li v-for="user in users" :key="user.id">{{ user.username }}</li>
 </ul>
 </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
 computed: {
 ...mapState(['users'])
 }
}
</script>

javascript// CourseList.vue<template>
 <div>
 <h1>课程列表</h1>
 <ul>
 <li v-for="course in courses" :key="course.id">{{ course.name }}</li>
 </ul>
 </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
 computed: {
 ...mapState(['courses'])
 }
}
</script>

javascript// QuestionList.vue<template>
 <div>
 <h1>题目列表</h1>
 <ul>
 <li v-for="question in questions" :key="question.id">{{ question.content }}</li>
 </ul>
 </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
 computed: {
 ...mapState(['questions'])
 }
}
</script>

javascript// PaperList.vue<template>
 <div>
 <h1>试卷列表</h1>
 <ul>
 <li v-for="paper in papers" :key="paper.id">{{ paper.name }}</li>
 </ul>
 </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
 computed: {
 ...mapState(['papers'])
 }
}
</script>

javascript// ScoreList.vue<template>
 <div>
 <h1>成绩列表</h1>
 <ul>
 <li v-for="score in scores" :key="score.id">{{ score.score }}</li>
 </ul>
 </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
 computed: {
 ...mapState(['scores'])
 }
}
</script>

javascript// main.jsimport Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTips = falsenew Vue({
 render: h => h(App),
 router,
 store}).$mount('#app')