SpringBoot +Vue开发考试系统的教程

一、前言

SpringBoot+Vue开发考试系统是一个基于Java语言和Vue框架的在线考试系统，采用前后端分离模式进行开发设计，前端部分使用Vue实现，后端部分使用SpringBoot实现，使用Maven进行项目管理，数据库采用MySQL，实现了在线考试、成绩查询、试卷管理等基本功能。

二、创建SpringBoot项目

1.在IDEA中创建SpringBoot项目，选择Spring initializr并添加所需依赖。

<!-- 添加SpringBoot、MySQL等依赖 -->
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
    </dependency>
</dependencies>

2.创建数据库及表

在MySQL中创建数据库exam，然后创建user表和exam_info表。

-- 创建user表
CREATE TABLE `user` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `username` varchar(50) NOT NULL UNIQUE,
    `password` varchar(50) NOT NULL,
    `role` int(1) NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- 创建exam_info表
CREATE TABLE `exam_info` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `title` varchar(50) NOT NULL,
    `create_time` datetime NOT NULL,
    `update_time` datetime NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

3.实现SpringBoot后端功能

在SpringBoot项目中，主要需要实现登录、考试、试卷管理、成绩查询等功能。具体实现细节可以查看开源项目：https://github.com/Davina2020/OnlineExam

三、创建Vue项目

1.使用Vue CLI创建项目

使用Vue CLI创建项目，选择手动配置，添加需要的依赖。

// 添加element-ui等依赖
"dependencies": {
  "vue": "^2.6.10",
  "element-ui": "^2.12.0",
  "axios": "^0.19.2",
  "vue-router": "^3.1.3"
},
"devDependencies": {
  "@vue/cli-plugin-babel": "^4.2.0",
  "@vue/cli-plugin-eslint": "^4.2.0",
  "@vue/cli-service": "^4.2.0",
  "babel-eslint": "^10.0.3",
  "eslint": "^6.7.2",
  "eslint-plugin-vue": "^6.1.2",
  "sass": "^1.26.0",
  "sass-loader": "^8.0.2",
  "vue-template-compiler": "^2.6.10"
}

2.编写Vue前端代码

在Vue项目中，主要需要实现登录、考试、试卷管理、成绩查询等功能。具体实现细节可以查看开源项目：https://github.com/Davina2020/OnlineExam_vue

四、整合SpringBoot和Vue项目

1.启动后端SpringBoot项目

在IDEA中启动SpringBoot项目，访问http://localhost:8080/，可看到接口信息。

2.启动前端Vue项目

在命令行中输入npm run serve启动Vue项目，访问 http://localhost:8081/，可看到登录页面。

3.配置Webpack打包和跨域设置

在Vue项目中，通过Webpack打包为静态资源文件，然后将打包文件放到SpringBoot项目的/resources/static/目录下。同时，在SpringBoot项目的application.properties中添加跨域配置。

# 增加Cors跨域配置
spring.security.cors.allow-credentials=true
spring.security.cors.allowed-headers=Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With, Origin, Accept
spring.security.cors.allowed-methods=POST, GET, PUT, DELETE
spring.security.cors.allowed-origins=*

4.整合Vue和SpringBoot

在Vue项目中，修改访问路径为后端接口地址。

// 在Vue项目中修改axios请求路径
axios.defaults.baseURL = 'http://localhost:8080/api/';

完成整合后，运行SpringBoot项目并访问http://localhost:8080/，即可看到前端Vue页面。

五、示例说明

以下是开源项目OnlineExam中的代码，展示了如何实现在线考试功能。

1.前端页面

考试页面Exam.vue实现了试卷题目的展示和答题功能，同时有计时器和交卷功能。

<template>
  <div class="exam">
    <div class="exam-header">
      <el-row>
        <el-col :span="12">
          <h2>{{ examName }}</h2>
        </el-col>
        <el-col :span="12">
          <h2>倒计时：{{ time }}分钟</h2>
        </el-col>
      </el-row>
    </div>
    <div class="exam-body">
      <div v-for="(question,index) in questions" :key="index">
        <h3>{{index+1}}、{{question.title}} ({{question.score}}分)</h3>
        <el-radio-group v-model="answers[index]" :disabled="time<=0">
          <el-radio v-for="(option, key) in question.options" :key="key" :label="key" :disabled="time<=0">{{option}}</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="exam-footer">
      <el-row>
        <el-col :span="12">
          <el-button type="danger" @click="submit" :disabled="time<=0">交卷</el-button>
        </el-col>
        <el-col :span="12">
          <h2>总分：{{score}}分</h2>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      examId: '',
      examName: '',
      time: '',
      questions: [],
      answers: [],
      score: 0
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    getQuestions() {
      axios.get('/exam/questions', {
        params: {
          examId: this.examId
        }
      }).then(res => {
        this.questions = res.data
        for (let i = 0; i < this.questions.length; i++) {
          this.answers.push('')
        }
      })
    },
    submit() {
      axios.post('/exam/submit', {
        userId: this.user.id,
        examId: this.examId,
        answers: this.answers
      }).then(res => {
        this.$message({
          message: '交卷成功',
          type: 'success'
        })
        this.score = res.data
      })
    }
  },
  created() {
    this.examId = this.$route.query.id
    axios.get('/exam/info', {
      params: {
        id: this.examId
      }
    }).then(res => {
      this.examName = res.data.title
      this.time = res.data.time
    })
    this.getQuestions()
    setInterval(() => {
      this.$http.post('/exam/time', {
        examId: this.examId
      }).then(res => {
        this.time = res.data
        if (this.time <= 0) {
          this.submit()
        }
      })
    }, 1000 * 60)
  }
}
</script>

2.后端代码

在后端接口ExamController中，实现获取试卷题目和提交试卷答案功能。

@RestController
@RequestMapping("/exam")
public class ExamController {
    @Autowired
    ExamService examService;
    @Autowired
    AnswerService answerService;

    @GetMapping("/info")
    public ExamInfoVO getExamInfo(@RequestParam("id") int id) {
        return examService.getExamInfo(id);
    }

    @GetMapping("/questions")
    public List<QuestionVO> getQuestions(@RequestParam("examId") int examId) {
        return examService.getQuestions(examId);
    }

    @PostMapping("/submit")
    public double submitExam(@RequestBody AnswerForm answerForm) {
        return answerService.submitAnswer(answerForm);
    }
}

以上就是SpringBoot+Vue开发考试系统的教程，希望对大家有所帮助。