做一个模拟考试的web服务

毕设需要，来记录一下，前前后后花了十天。使用了springboot、mybatis、ajax。实现的功能有随机获取题库题目，分页，记时，记分，对错判断提示。

1、随机获取题库题目

使用mysql，mysql随机获取几条数据库数据的语句如下，不同的数据库语句不同，具体百度

SELECT * FROM table ORDER BY RAND() LIMIT n

注意！这条语句只能调用一次，也就是说前端只能发起一次获取题目数据的ajax请求，不然每次获取的数据都不同。

2、分页

因为不能调用查询语句，所以就不能使用thymeleaf+pagehelper了。我的思路是采用用数组下标定位的方式，将ajax请求到的题目数据存储在前端当前页的全局变量中，采用表格做页码，给表格添加点击事件实现点击跳转
定义一个全局变量var responseData;//这是用来存题目数据的全局变量

var str = `<tbody style="text-align:center;"><tr>`;
                    for (var i = 0; i < title.length; i++) {
                        str += `<td οnclick="getTitle(${i})" id="td${i+1}" class="tdbut">${i + 1}</td>`;
                        if ((i + 1) % 5 == 0) {
                            str += `</tr><tr>`
                        }
                    }
                    str += '</tr><tbody>'//
                    $('#table').html(str);

onclick到一个带参方法中，参数i即为当前题目数组下标，gettitle中根据i获取对应题目信息刷新对应数据到页面，这样便实现了分页功能

function getTitle(num){
            readSel();
            var title=responseData.allpageInfo.list;
            var titleName = title[num].titleName;
            var titleAnswer = title[num].titleAnswer;
            var titleA = title[num].titleA;

3、计时

计时采用倒计时方式，时间到强制提示操作。定义两变量，一个时间秒数，一个布尔值用来定义计时状态

var a = true;//
var len = 10;//时间数，单位s

<div>剩余时间
								<text id="timeLeft" >00:00</text>
							</div>

		function timecount(){
			if (a) {
				var time = setInterval(function() {
					timeLeft.innerHTML = sToMin(len--);//修改页面上的时间
					if (len == -1) {
						clearInterval(time);
						$("#timeou").text("考试时间已截止，本次得分："+correctnum);
						$('#myModa3').modal('show')
					}
				}, 1000);
				a = false;
			} else {
				return false;
			}
		}
		function addSuffix(num) {
			return num>= 10 ? num : '0' + num;
		}
		function sToMin(s){
			return addSuffix(Math.floor((s/60)%60))+":"+addSuffix(s%60);
		}

4、记分

数据库中有正确答案的选项，所以只需要将该数据作为题目的value值，便可获取正确答案，然后再获取单选按钮取值，做一个比较即可

 var correctnum=0;//正确数
 var mistake=0;//错误数
 <div ><text id='titlename'></text></div>//题目
  $("#titlename").text(titleName);
 	$("#titlename").val(titleAnswer);
 	var anonym=$('input[type=radio][name=radioO]:checked').val();
			var answer=$("#titlename").attr("value");
            //判断答案与选项正误记录错误提数
			if (answer!=anonym){
			    mistake+=1;
            }
			else correctnum+=1;
 

5、修改单选状态和记录选中

既然是考试，肯定要选好确认后就不能再改了
定义一个list记录当前题目的选择项

 var currentTitleNum = 0; //当前题号
var answerList= [];//存放当前题目选择的答案
answerList[currentTitleNum] = $('input[type=radio][name=radioO]:checked').val();//存入选中的值
$("input[type=radio]").attr("disabled","disabled");//修改单选状态

定义一个方法，对记录的选中项添加选中状态，对有选中项的题目添加不可选状态

function readSel(){
			if(answerList[currentTitleNum]=='A'){
				$('#itemA').prop('checked',true);
			}else if(answerList[currentTitleNum]=='B'){
				$('#itemB').prop('checked',true);
			}else if(answerList[currentTitleNum]=='C'){
				$('#itemC').prop('checked',true);
			}else if(answerList[currentTitleNum]=='D'){
				$('#itemD').prop('checked',true);
			}else{
				$("input[type=radio]").attr("disabled",false);
				return;
			}
			$("input[type=radio]").attr("disabled","disabled");
		}

该方法再获取题目gettitle（）方法中使用

function getTitle(num){
            //取消掉选中
            $('input[type=radio][name=radioO]:checked').attr("checked", false);

           
            currentTitleNum = num;
            pagenum=num;

            readSel();

以上，重点便这些了，这个几乎都是前端在做事，因为查询不能再调用了，如果各位大哥有更好的思路希望教教
同时感谢那些给我再做项目时产生的问题给予解答的大哥们