基于uni-app的安卓在线考试系统软件设计

随着编程技术的进步，出现了越来越多的跨平台开发语言和框架，比较常用的有Flutter、uni-app、Ionic、React native等，在我的开发实践中感觉Flutter虽然接近原生，谷歌独创语法，但是语法混乱，把UI和逻辑放在一起没有好的代码阅读体验，但是uni-app使用了vue.js的语法，方便了很多有vue开发经验的程序员。今天介绍的就是一个使用uni-app打造的在线考试APP。

程序猿DaBo

1725人浏览 · 2022-10-31 10:27:55

程序猿DaBo · 2022-10-31 10:27:55 发布

实现的功能

管理员、教师、学生三种角色；

用户登录：管理员、教师和学生均可以使用自己的账号和密码进行登录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>

演示视频

基于java和uniapp的安卓在线考试系统