随着程式設計技術的進步，出現了越來越多的跨平台開發語言和架構，比較常用的有Flutter、uni-app、Ionic、React native等，在我的開發實踐中感覺Flutter雖然接近原生，谷歌獨創文法，但是文法混亂，把UI和邏輯放在一起沒有好的代碼閱讀體驗，但是uni-app使用了vue.js的文法，友善了很多有vue開發經驗的程式員。今天介紹的就是一個使用uni-app打造的線上考試APP。
實作的功能
管理者、教師、學生三種角色；
使用者登入：管理者、教師和學生均可以使用自己的賬号和密碼進行登入APP；
人員管理：管理者可以對老師和學生的身份資訊編輯、删除，老師可以對學生的身份資訊進行編輯和删除；
考試記錄：參與過考試的人員可以檢視自己的考試記錄，包括成績和試題答案；
試卷管理：管理者和老師可以對試卷進行管理，包括添加試卷、添加試題、釋出試卷等操作；
使用的技術
後端：JAVA開發語言，SpringBoot架構，MySql資料庫
前端：uni-app
部分代碼展示
<template>
<view class="u-p-25">
<u-form :model="form" ref="uForm">
<u-form-item label="試卷名稱" label-width="150" prop="paperName">
<u-input v-model="form.paperName" placeholder="請填寫試卷名稱" />
</u-form-item>
<u-form-item label="試卷簡介" label-position="top" label-width="150" prop="memo">
<u-input v-model="form.memo" placeholder="請填寫試卷簡介" type="textarea"/>
</u-form-item>
<u-form-item label="通過分數" label-width="150" prop="passScore">
<u-input v-model="form.passScore" placeholder="通過分數(滿分100)" type="digit" />
</u-form-item>
<u-form-item label="單選數量" label-width="150" prop="singleNum">
<u-input v-model="form.singleNum" placeholder="請填寫單選題數量" type="digit" />
</u-form-item>
<u-form-item label="單選分值" label-width="150" prop="singleScore">
<u-input v-model="form.singleScore" placeholder="每道單選題分值" type="digit" />
</u-form-item>
<u-form-item label="多選數量" label-width="150" prop="multiNum">
<u-input v-model="form.multiNum" placeholder="請填寫多選題數量" type="digit" />
</u-form-item>
<u-form-item label="多選分值" label-width="150" prop="multiScore">
<u-input v-model="form.multiScore" placeholder="每道多選題分值" type="digit" />
</u-form-item>
<u-form-item label="判斷數量" label-width="150" prop="judgeNum">
<u-input v-model="form.judgeNum" placeholder="請填寫判斷題數量" type="digit" />
</u-form-item>
<u-form-item label="判斷分值" label-width="150" prop="judgeScore">
<u-input v-model="form.judgeScore" placeholder="每道判斷題分值" type="digit" />
</u-form-item>
<view style="margin-top: 30rpx;"><text class="u-tips-color" >{{tips }}</text></view>
<u-button type="primary" class="u-m-t-50" @click="submit" :ripple="true">送出
</u-button>
</u-form>
</view>
</template>
<script>
import appRequest from "@/common/appRequestUrl.js";
export default {
data() {
return {
pid:0,
form: {
paperName: "",
memo: "",
passScore: 60,
singleNum: 5,
singleScore: 10,
multiNum: 2,
multiScore: 10,
judgeNum: 3,
judgeScore: 10,
state:0,
score:100
},
user:"",
rules: {
paperName: [
{
required: true,
message: '請填寫試卷名稱',
trigger: ['change','blur']
}
],memo: [{
required: true,
message: '請填寫試卷簡介',
trigger: ['change','blur']
}
],judgeScore:[{
validator: function(rule,value,callback){
return value>0;
},
message: '請填寫完整',
trigger: ['change','blur']
}],judgeNum:[{
validator: function(rule,value,callback){
return value>0;
},
message: '請填寫完整',
trigger: ['change','blur']
}],singleScore:[{
validator: function(rule,value,callback){
return value>0;
},
message: '請填寫完整',
trigger: ['change','blur']
}],singleNum:[{
validator: function(rule,value,callback){
return value>0;
},
message: '請填寫完整',
trigger: ['change','blur']
}],multiScore:[{
validator: function(rule,value,callback){
return value>0;
},
message: '請填寫完整',
trigger: ['change','blur']
}],multiNum:[{
validator: function(rule,value,callback){
return value>0;
},
message: '請填寫完整',
trigger: ['change','blur']
}],passScore:[{
validator: function(rule,value,callback){
return value>0;
},
message: '請填寫完整',
trigger: ['change','blur']
}]
},tips:"請確定 單選分值*單選數量 + 多選分值*多選數量 + 判斷分值*判斷數量 = 100"
}
},
onLoad:function(option) {
if(option.pid){
this.pid = option.pid;
this.getPaperInfo();
}
},
onShow() {
// this.user = appRequest.getUserInfo();
// if(!this.user){
// uni.switchTab({
// url:"../index/index"
// })
// }
},
methods: {
checkPoint(){
return (this.form.singleNum*this.form.singleScore + this.form.multiNum*this.form.multiScore + this.form.judgeNum*this.form.judgeScore )== 100 ;
},
submit(){
let _this = this;
this.$refs.uForm.validate(valid => {
if (valid) {
if(!_this.checkPoint()){
_this.$api.msg('試卷總分不等于100分，請修改。');
return;
}
appRequest.request({
method: "POST",
url: _this.form.pid ? appRequest.urlMap.editExamPaper : appRequest.urlMap.addExamPaper,
data:_this.form,
success: function(res) {
if (res.data.code == 200) {
uni.showModal({
title:"成功",
content:"試卷送出成功",
showCancel:false,
success:function(res){
if(res.confirm){
uni.navigateBack({
})
}
}
})({
})
} else {
_this.$api.msg('儲存失敗');
}
},
fail: function(res) {
_this.$api.msg("請求異常");
}
})
} else {
_this.$api.msg('驗證異常');
}
});
},
confirm(e) {
this.selName = e[0].label;
this.form.typeFK = e[0].value;
},
numCheck(){
return [{
required: true,
message: '未填寫完整，請檢查',
trigger: ['change','blur']
},
{
type: "integer",
message: '格式異常，僅能為整數',
trigger: ['change','blur']
}
]
},
getPaperInfo() {
let _this = this;
appRequest.request({
method: "POST",
url: appRequest.urlMap.findExamPaper,
data:{
pid:_this.pid,
validFlag:1
},
success: function(res) {
if (res.data.code == 200) {
_this.form = res.data.data;
} else {
_this.$api.msg('試卷擷取失敗');
}
},
fail: function(res) {
_this.$api.msg("請求異常");
}
})
}
},onReady() {
this.$refs.uForm.setRules(this.rules);
}
}
</script>
<style lang="scss">
</style> 擷取源碼請關注後私信“20221031”