返回

零基础vue2实战案例，一步步创建一个简易考试系统平台

前端

前言

随着信息技术的发展，在线考试系统已经成为一种越来越普遍的考试方式。在线考试系统可以方便地进行考试管理，并可以自动评分，大大减轻了老师的负担。

本文将介绍如何使用vue2 + vue-router + vuex + iview来构建一个简易的考试系统平台。该平台将具有移动端友好的设计，并提供一个易于使用的界面。

环境准备

在开始构建考试系统平台之前，我们需要先准备以下环境：

  • Node.js 8+
  • Vue CLI 3+
  • iview 4+
  • MongoDB

项目创建

首先，我们需要创建一个新的Vue项目。我们可以使用Vue CLI来快速创建一个项目：

vue create my-exam-system

项目结构

创建项目后，我们可以看到项目目录结构如下：

my-exam-system
├── package.json
├── src
│   ├── App.vue
│   ├── main.js
│   ├── router
│   │   ├── index.js
│   │   └── routes.js
│   ├── store
│   │   ├── index.js
│   │   └── modules
│   ├── views
│   │   ├── About.vue
│   │   ├── Home.vue
│   │   ├── Login.vue
│   │   └── NotFound.vue
│   └── App.scss
├── .gitignore
├── .eslintrc.js
├── package-lock.json
├── README.md
├── vue.config.js
└── yarn.lock

安装依赖

接下来，我们需要安装项目所需的依赖：

yarn add vue-router vuex iview mongodb

配置项目

在项目根目录下的vue.config.js文件中，我们需要配置一下：

module.exports = {
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}

开发考试系统平台

现在，我们可以开始开发考试系统平台了。

1. 创建路由

首先，我们需要创建路由。我们在src/router/index.js文件中添加以下代码：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '*',
      component: NotFound
    }
  ]
})

2. 创建状态管理

接下来，我们需要创建状态管理。我们在src/store/index.js文件中添加以下代码：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 考试列表
    exams: [],
    // 当前考试
    currentExam: null,
    // 当前试题
    currentQuestion: null,
    // 答题记录
    answers: {}
  },
  mutations: {
    // 设置考试列表
    setExams(state, exams) {
      state.exams = exams
    },
    // 设置当前考试
    setCurrentExam(state, exam) {
      state.currentExam = exam
    },
    // 设置当前试题
    setCurrentQuestion(state, question) {
      state.currentQuestion = question
    },
    // 设置答题记录
    setAnswer(state, answer) {
      state.answers[answer.questionId] = answer.answer
    }
  },
  actions: {
    // 获取考试列表
    async getExams({ commit }) {
      const exams = await axios.get('/api/exams')
      commit('setExams', exams.data)
    },
    // 获取当前考试
    async getExam({ commit }, examId) {
      const exam = await axios.get(`/api/exams/${examId}`)
      commit('setCurrentExam', exam.data)
    },
    // 获取当前试题
    async getQuestion({ commit }, questionId) {
      const question = await axios.get(`/api/questions/${questionId}`)
      commit('setCurrentQuestion', question.data)
    },
    // 提交答题记录
    async submitAnswer({ commit }, answer) {
      await axios.post('/api/answers', answer)
      commit('setAnswer', answer)
    }
  },
  modules: {}
})

3. 创建组件

接下来，我们需要创建组件。我们在src/components/ExamList.vue文件中添加以下代码：

<template>
  <ul>
    <li v-for="exam in exams" :key="exam.id">
      <a :href="'/exams/' + exam.id">{{ exam.title }}</a>
    </li>
  </ul>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      exams: state => state.exams
    })
  }
}
</script>

我们在src/components/ExamDetail.vue文件中添加以下代码：

<template>
  <div>
    <h1>{{ exam.title }}</h1>
    <ol>
      <li v-for="question in exam.questions" :key="question.id">
        {{ question.content }}
        <div v-for="option in question.options" :key="option.id">
          <input type="radio" :value="option.value" @change="handleAnswer(question.id, option.value)">
          <label>{{ option.content }}</label>
        </div>
      </li>
    </ol>
    <button @click="submitAnswer">提交</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState({
      currentExam: state => state.currentExam
    })
  },
  methods: {
    ...mapActions([
      'getExam',
      'submitAnswer'
    ]),
    handleAnswer(questionId, answer) {
      this.$store.commit('setAnswer', { questionId, answer })
    }
  }
}
</script>

我们在src/views/Home.vue文件中添加以下代码：

<template>
  <div>
    <h1>首页</h1>
    <ExamList />
  </div>
</template>

<script>
import ExamList from '@/components/ExamList'

export default {
  components: {
    ExamList
  }
}
</script>

我们在src/views/Login.vue文件中添加以下代码：

<template>
  <div>
    <h1>登录</h1>
  </div>
</template>

<script>
export default {

}
</script>

我们在src/views/About.vue文件中添加以下代码：

<template>
  <div>
    <h1>关于我们</h1>
  </div>
</template>

<script>
export default {

}
</script>

我们在src/views/NotFound.vue文件中添加以下代码：

<template>
  <div>
    <h1>404 Not Found</h1>
  </div>
</template>

<script>
export default {

}
</script>

4. 运行项目

现在，我们可以运行项目了：

yarn serve

部署上线

当我们开发完成考试系统平台后，我们需要将其部署上线。我们可以使用以下命令将项目部署到服务器上：

yarn build

然后，我们将生成的dist目录上传到服务器上，并将其解压。最后，我们需要配置服务器的web服务器，以使其能够访问我们的项目。

总结

本文介绍了如何使用vue2 + vue-router + vuex + iview来构建一个简易的考试系统平台。该平台具有移动端友好的设计