手把手教你一个人开发小程序前后端（代码分享二）

手把手教你一个人开发小程序前后端（考试系统代码分享） 上一篇讲到了小程序怎么授权登录，本篇从代码上讲一下考试逻辑的实现
试题列表页面如图
主要显示试卷内容有
1、到期日期，过期后不在列表中展示
2、状态，是否作答
3、试卷类型
4、考试时长



布局代码如下
<!--pages/edu/index.wxml--><view class="page">  <view class="pageHead">    <h3>在线考试</h3>  </view>  <view class="eduList" wx:for="{{list}}" wx:key="index" data-type="{{item.ExamTestContext}}" bindtap="onItemClicked" data-index="{{index}}">    <view class="eduCard">      <view class="eduTitle">{{item.ExamTestContext}}</view>      <view class="infoTitle" wx:if="{{item.SumScore !='' && item.IsPass !='' && (item.IsManualMark== '' || item.IsManualMark == 'False') }}">分数:{{item.SumScore}}\t{{item.IsPass=="True"?"及格":"不及格"}}</view>      <view class="eduInfo">        <view class="infoBlock time-block">          <view class="infoTitle">{{item.EndTime}}</view>          <view class="infoLabel">截至日期</view>        </view>        <view class="infoBlock">          <view class="infoTitle" wx:if="{{item.IsManualMark== '' || item.IsManualMark == 'False'}}">{{item.ExamStatus}}</view>          <view class="infoTitle" wx:if="{{item.IsManualMark!= '' && item.IsManualMark == 'True'}}">阅卷中</view>          <view class="infoLabel">培训状态</view>        </view>        <view class="infoBlock">          <view class="infoTitle">{{item.QuestionType}}</view>          <view class="infoLabel">课程类别</view>        </view>        <view class="infoBlock">          <view class="infoTitle">{{item.AnswerTotalTime}}</view>          <view class="infoLabel">时长(min)</view>        </view>      </view>    </view>  </view></view>css代码如下
/* pages/edu/index.wxss */.eduList{padding: 25rpx 34rpx;}.eduCard{ background:#fff; border-radius: 10rpx; padding:15rpx 20rpx; position: relative; box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2); margin-bottom: 30rpx;}.eduCard::after{position: absolute; content: ""; width: 6rpx;  background:#3DC3F6; left: -6rpx; top: 20rpx; bottom: 20rpx;}.eduCard .eduTitle{font-size: 36rpx;}.eduCard .eduInfo{display: flex;}.eduCard .eduInfo .infoBlock{text-align:center; width: 25%;}.eduCard .eduTitle{margin-bottom: 25rpx;}.infoBlock .infoTitle{font-size: 30rpx;}.infoBlock .infoLabel{font-size: 26rpx; color: #9B9B9B;}.time-block{  width: 30% !important;}

对应js 代码主要请求有
onShow: function () {    this.getUserTestPaperList();  },getUserTestPaperList:function(){    let model = wx.getStorageSync('currentUserInfo');    var ID = model.UserID;  console.log("userid"+ID)    //wx.showLoading({title: '加载中…'});    API.getUserTestPaperList({      UserId:ID    }).then((ret)=>{      wx.hideLoading();      if(ret.code == "0")      {        this.setData({          list:ret.data        });      }    });  },onshow中调用方法获取试卷列表。页面每次显示都会触发onshow事件。
getUserTestPaperList：用上篇文章封装的方式请求后台接口获取试卷列表数据，赋值给data中的list.
页面布局代码中循环遍历list wx:for="{{list}}" wx:key="index" 加载数据。
以上两部分就完成了在线考试试卷列表的页面，对应后台接口代码如下，直接调用系统封装好的查询接口，获取到数据返回到前端
/// <summary>        /// 获取用户试卷列表        /// </summary>        /// <param name="examTestMainParams"></param>        /// <returns></returns>        [HttpPost]        public JsonResult GetUserTestPaperList([FromBody] ExamTestMainParams examTestMainParams)        {            try            {                (IList<dynamic>, int) items = _examTestMainService.GetUserTestPaperList(examTestMainParams);                //return Json(new BasePageModel { code = (int)MsgCodeEnum.Success, msg = EnumUtils.GetEnumDesc(MsgCodeEnum.Success), data = items.Item1, count = items.Item2 });                return Json(new BaseModel { code = (int)MsgCodeEnum.Success, msg = EnumUtils.GetEnumDesc(MsgCodeEnum.Success), data = items.Item1 });            }            catch (Exception ex)            {                LogHelper.SaveLog(ex);                return Json(new { Code = -1, Msg = ex.Message });            }        }

点击答题事件 onItemClicked 定义如下，在页面中bindtap="onItemClicked"
绑定了点击事件。此事件意思是点击后获取试卷相应信息跳转到答题页面。
代码逻辑是：
1、获取当前用户信息，获取试卷信息
2、如果答题完成并且配置了不允许重复答题，则跳转到答题结果页面，直接展示答题结果。
3、如果是允许重复答题则跳转到答题页面并携带必要的参数。
onItemClicked: function (event) {   var index = event.currentTarget.dataset.index;   var item = this.data.list[index];   let model = wx.getStorageSync('currentUserInfo');   var ID = model.UserID;  //console.log(item);if(item.ExamStatus == "已完成" && item.IsRepeatAnswer == false){  API.getExamAnswerRecordByMainId(item.ID,ID).then((ret)=>{    if(ret.code == "0")    {      wx.navigateTo({        url: '/pages/testscore/testscore?score='+ret.data.SumScore+'&time='+ret.data.AnswerTime+ '&IsPass='+ret.data.IsPass+'&IsManualMark='+ret.data.IsManualMark+"&mainId="+item.ID+"&userId="+ID,        })    }  }); }else{  if(model.Name == ""){    wx.showToast({      title: '请完善个人信息再来答题吧！',      icon: 'none',      duration: 2000//持续的时间    })    return false;  }  wx.showModal({    title: '提示',    content: '确认答题?',    success: function (res) {      if (res.confirm) {  wx.navigateTo({    url: '/pages/answer/answer?mainId='+item.ID+'&AnswerTotalTime='+item.AnswerTotalTime + '&typeName='+item.QuestionType+'&PassingScore='+item.PassingScore,    })  } else if (res.cancel) {    //console.log('用户点击取消')  }}})  }

以上代码完成了试卷列表展示，状态显示，点击试卷跳转功能。 注意 wx.navigateTo 跳转一般的页面 wx.switchTab({ 跳转到导航的页面
下一篇我们详细讲一下答题页面 的前后端代码以及设计的表结构。