vue2 + vue-router + vuex + iview 入門項目

簡單的vue2 + vue-router + vuex + iview 入門項目，一個移動端平臺的簡易考試系統。靈感來源於近期工做項目中開發的一套考試平臺系統。歡迎你們來issues指出錯誤共同進步。

項目運行

# 克隆到本地
git clone https://github.com/webproblem/vue-demo.git
# 進入項目
cd vue-demo
# 安裝依賴
npm install，能夠使用cnpm代替npm
#運行項目
npm run dev

項目文件說明

主要是src文件夾。

• data: 模擬的數據
• page: 存放的vue組件頁面
• router: vue路由文件
• store: vuex狀態管理文件
• utils: 公共的工具函數

功能描述及實現

能夠經過設置不一樣的路由參數來切換不一樣的考試試題

<div class="button-group">
        <span><router-link :to="{name: 'exam1', query: {id: 1}}">考試試題一</router-link></span>
        <span><router-link :to="{name: 'exam1', query: {id: 2}}">考試試題二</router-link></span>
</div>

在src/data目錄下的模擬數據中，配置好考試試題和考試時長等信息。

/**
 * @param {Number} examTime 考試時長
 * @param {String} title 題目內容
 * @param {Array} options 答案選項
 * @param {Number} answer 正確答案索引，從0開始
 * @param {Number} score 題目對應的分數
 * @param {String} examId 題目惟一ID
*/

export const examTime = 30;

export const examList = [
    {
        title: "《春曉》這首詩是出自哪位詩人？",
        options: ["李白", "杜甫", "王維", "蘇軾"],
        answer: 1,
        score: 5,
        examId: "0"
    }
]

而後運行項目，進入首頁就能夠選擇試卷答題了！！！

在考試時間結束的時候，系統會自動提交答題試卷，或者在答完全部題的時候，手動點擊提交試卷，系統會根據答題狀況給出相應的考試結果。（還有一些細節沒有考慮進去，後期能夠添加查看答錯題目的功能等）

<template>
  <div class="exam-result">
      <div class="scores-container">
          <div class="">
            <header class="scores">{{getScore}}分</header>
            <label class="result-tips">{{resultTips}}</label>
          </div>
      </div>
  </div>
</template>

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

export default {
    data () {
        return {
            //答錯的題
            errorExam: [],
            //答對的題
            sureExam: [],
            //總分
            totalScore: 0,
            //得分
            getScore: 0,
            resultTips: "",
            examList: []
        }
    },
    computed:mapState([
        'saveAnswer',
        'useTime',
        'examId'
    ]),
    mounted () {
        const vm = this;
        vm.examList = vm.$store.state.examList[this.examId - 1] || [];
        vm.getSureAnswer();
    },
    methods: {
        getSureAnswer() {
            var vm = this;
            vm.examList.forEach(function(item, index){
                vm.totalScore += parseInt(item.score);
                if((item.answer + 1) == vm.saveAnswer[index]){
                    vm.sureExam.push(item);
                    vm.getScore += parseInt(item.score);
                }else{
                    vm.errorExam.push(item);
                }
            })
            vm.setResultTips();
            console.log(this.useTime)
            console.log("答對題:" + vm.sureExam.length);
        },
        setResultTips() {
            const scores = [100 ,90, 70, 60, 40, 20],
                  tips = [
                      '哇，你太優秀了，厲害了！！！',
                      '智商只差一步就爆表了，繼續加油！',
                      '表現很好，good！',
                      '嗯，不錯，還有很大的進步空間！',
                      '還須要繼續加油哦！！！',
                      'What are you弄啥嘞！'
                  ];
            if(this.getScore <= scores[5]) {
                this.resultTips = tips[5];
                return;
            }
            if(this.getScore <= scores[4]) {
                this.resultTips = tips[4];
                return;
            }
            if(this.getScore <= scores[3]) {
                this.resultTips = tips[3];
                return;
            }
            if(this.getScore <= scores[2]) {
                this.resultTips = tips[2];
                return;
            }
            if(this.getScore <= scores[1]) {
                this.resultTips = tips[1];
                return;
            }
            if(this.getScore <= scores[0]) {
                this.resultTips = tips[0];
                return;
            }
        }
    }
}
</script>

本教程是基於已經有必定vue基礎之上的，若是你還不瞭解什麼是vue建議先去學習一下。友情連接:
vue中文官網
vuex文檔
vue-router文檔
歡迎你們star和issues。
源碼地址:
https://github.com/webproblem/vue-demo