簡單的vue2 + vue-router + vuex + iview 入門項目,一個移動端平臺的簡易考試系統。靈感來源於近期工做項目中開發的一套考試平臺系統。歡迎你們來issues指出錯誤共同進步。vue
# 克隆到本地 git clone https://github.com/webproblem/vue-demo.git # 進入項目 cd vue-demo # 安裝依賴 npm install,能夠使用cnpm代替npm #運行項目 npm run dev
主要是src文件夾。git
能夠經過設置不一樣的路由參數來切換不一樣的考試試題github
<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目錄下的模擬數據中,配置好考試試題和考試時長等信息。web
/** * @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" } ]
而後運行項目,進入首頁就能夠選擇試卷答題了!!!vue-router
在考試時間結束的時候,系統會自動提交答題試卷,或者在答完全部題的時候,手動點擊提交試卷,系統會根據答題狀況給出相應的考試結果。(還有一些細節沒有考慮進去,後期能夠添加查看答錯題目的功能等)vuex
<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-demonpm