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

手把手教你一个人开发小程序前后端（考试系统代码分享） 上一篇讲到了小程序怎么授权登录，本篇从代码上讲一下考试逻辑的实现

试题列表页面如图

主要显示试卷内容有

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({ 跳转到导航的页面

下一篇我们详细讲一下答题页面 的前后端代码以及设计的表结构。