【橙子日记31】从零开始的毕业设计

最新推荐文章于 2021-02-27 21:24:24 发布

橙子老哥

最新推荐文章于 2021-02-27 21:24:24 发布

阅读量117

点赞数

分类专栏：日记文章标签：毕业设计

本文链接：https://blog.csdn.net/QAQQVQQTQ/article/details/113815289

版权

日记专栏收录该内容

40 篇文章 2 订阅

订阅专栏

这篇博客详细记录了一位开发者在WebAPI项目中处理试卷作业提交功能的过程，包括前端与后端的交互问题、数据序列化、分数计算以及数据库操作。开发者遇到了多个技术难题，如如何正确传递多个列表、处理分数计算和存储、识别作业类型等，并逐步解决了这些问题。最终实现了从作业选择、试卷提交到分数计算的完整流程，虽然过程中出现了很多坑，但经过长时间的努力，成功完成了作业模块的主要功能。

摘要由CSDN通过智能技术生成

更新时间：2021年2月16日

真的，不知不觉竟然都到了31更！
好家伙
今天跟上上次的脚步，继续把试卷作业给完善一下
昨天只能展示出来，今天要能提交功能

试卷作业提交模块：
思路：前端将
在这里插入图片描述
传给后端
后端根据列表里面的workid来判断是属于哪个作业
在给对应的作业根据昨天提出来的算法进行计算分数打分

我们现在把前端api弄下：

在这里插入图片描述
后端测试：

好像不能这样，只能接受到第一个值而已

我就知道

入宫我们改成这样：
在这里插入图片描述

可以看出请求的3个数据是无序的，这样后端也肯定识别不了，我们再改一下：

这种情况也是和上面那种是一样的
我们再换一种：

这个应该是我们需要的
由于这里是分了3个对象，要想后端知道的话要打上特性：
在这里插入图片描述
现在可以传输了！
但是还有一个问题，无论我前端选择的是什么，一律都是零分

果然，后端读取不到那个对象。。。又炸了

好家伙，难道我了
列表序列化不了

这个难不倒我！
后端接收类型，如果是这样那就会炸

        public async Task<IActionResult> subExamination(List<question_choice> choice_questionList, List<question_judgment> judgment_questionList,  List<question_fill> fill_questionList)

好吧，这里难度很大，我尝试了很多种方式，也没琢磨出后端这么接收3个不同的列表

嗯，头疼啊，那我们本着简单的原则，我们就分3次传到后端
在这里插入图片描述
后端用session来存储一下
这里会出问题的，现在先留个坑，之后来修
这个是一个超级大的坑啊！！！

后端得到最后一次分数的时候，把work表的分数写进去
这里我们需要2个参数：分数和studentworkid

[HttpPost]
        public async Task<IActionResult> subExamination3(List<question_fill> fill_questionList,int studentworkId)
        {
            int score = Convert.ToInt32(HttpContext.Session.GetString("score"));
            foreach (var k in fill_questionList)
            {
                var fillData = await _question_fillBll.GetEntities(n => n.id == k.id).FirstOrDefaultAsync();
                if (fillData.option_correct == k.option_input)
                {
                    score += 3;
                }
            }
            HttpContext.Session.SetString("score", "0");
            //这里是修改分数，可以转移到其他控制器
            if (score >= 0 && score <= 100)
            {
                var workData = await _student__WorkBll.GetEntities(n => n.id == studentworkId).FirstOrDefaultAsync();
                workData.work_score = score;
                workData.work_score_time = DateTime.Parse(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"));
                if (_student__WorkBll.Update(workData))
                {
                    return Content(JsonFactory.Json(message: "你的分数为：" + score.ToString()));
                }
            }
            return Content(JsonFactory.Json(flag:false));
        }

前端：
在这里插入图片描述
我们测试一下，看一下数据库效果：

也确实改了
3分的那个
说实话，这个坑留的是真的大，我真没想到这么传 3个列表过去！！
希望后面能解决，现在的操作真的有点绕圈圈
另外，还留了一个坑，按理说这个应该交给work控制器去处理，直接调用一下即可
但这个是webapik项目，和mvc区别还是有的！导致我这里没法调用其他控制器的操作！

作业类型模块：
由于我们不知道是文件还是试卷
我们需要在前端进行判断，这个就要在数据库中添加作业类型字段
前端获取之后进行查询
添加字段：
在这里插入图片描述
我们要在选择作业的时候，进行判断
是进入文件作业路由还是试卷作业路由

改为：

当然，这里传给我们的workid
我们需要studentworkid

这里要先进行查询一波

另外：
传入的值要把类型加进去

效果：
在这里插入图片描述
2代表试卷，1代表文件，我们前端加一个过滤器即可
现在还有一个问题，我们路由传值过去的workid，但是试卷页面需要的是studentworkid
那我们还得进行查询一下

试卷页面获取studentworkid：
在这里插入图片描述
完毕
类似的，现在还有2个地方可以从作业进入文件或者试卷：
学生选择作业，教师查看作业

一样的操作

这里还存在一个问题，在学生作业关系表中，没有work_type字段
所以我们要先把workid发送给给后端，让后端判定类型

前端api：
在这里插入图片描述
后端api：

前端页面：

效果图：

没问题了，点哪个就去对应类型的作业
这里学生模块已经完成
我们再来看一下教师的模块：
教师模块

这个应该和学生课程是基本一样的：
我们修改一下：

ok，到这里，所有查看作业和提交作业的地方全部完成
我们进入下一个难点模块：
教师添加试卷类型作业
在这里插入图片描述
修改这个地方，我们应该先让它选择试卷类型，再让它进行出题
添加文件作业可以想这样直接添加，但是试卷作业比较复杂，不能这样操作
如果选择的是试卷类型我们应该再添加一个添加试卷类型的路由
添加表单作业类型数据：
在这里插入图片描述

绑定表单数据：
在这里插入图片描述
类型判断语句：

如果我们点击文件：将之前的添加文件展示出来
如果我们点击试卷：进入添加试卷的路由
如果我们点击图片：进入添加图片的路由（这里先留了一个坑）
效果：

ok，现在开始添加试卷类型作业！

添加试卷类型作业：
在这里插入图片描述
添加对象

注意！我们需要新添加一个对象，需要对它深拷贝！！！
效果：

ok，没问题了
接下来选择题类似：
判断题：

问答题：

由于我们的数据都已经加入到了
着3个列表中
我们只需要将这个提交给后端，即自动添加了作业
将数据发送给后端添加试卷作业：
一样的，有个坑没填，我们这里要传3次
在这里插入图片描述
我们要先添加work再添加3种work类型

这里又出现了一个严重的问题，我们不知道课程id是多少，得前面传值过来
往前推，又发现一个大坑！

在allwork页面的id应该是课程id！！！而不是作业id，这里全错
后面还是乱的，全得返工！！
实在令人头疼啊！
在这里插入图片描述
这里的workid其实是不存在的
我们应该先添加work表，在work表中获取id之后返还给这个列表中

将这个表单传过去，会添加work表，然后再获取work表中的id，传给下面3个数组
前端：

后端：
在这里插入图片描述
前端页面：

  sub() {
      //提交试卷
      workApi.addWorkByAjax(this.form).then((response1) => {
        const resp1 = response1.data;
        const myworkId = resp1.data;
        this.choice_questionList.forEach(function (item) {
          item.work_id = myworkId;
        });
        this.judgment_questionList.forEach(function (item) {
          item.work_id = myworkId;
        });
        this.fill_questionList.forEach(function (item) {
          item.work_id = myworkId;
        });
        examinationAPI
          .addExamination1(this.choice_questionList)
          .then((response) => {
            const resp = response.data;
            if (resp.flag) {
              examinationAPI
                .addExamination2(this.judgment_questionList)
                .then((response2) => {
                  const resp2 = response2.data;
                  if (resp2.flag) {
                    examinationAPI
                      .addExamination3(
                        this.fill_questionList,
                        this.studentworkid
                      )
                      .then((response3) => {
                        const resp3 = response3.data;
                        if (resp3.flag) {
                          this.$router.push({ path: "/index" });
                          this.$notify({
                            title: "添加试卷作业成功",
                            message: resp3.message,
                            type: "success",
                          });
                        }
                      });
                  }
                });
            } else {
              this.$message.error(resp.message);
            }
          });
      });
    },

可以看出，先向后端请求添加一个work表字段数据
然后，再分3次将所有题目传送过去，分别在3张作业类型表中添加各种类型的试卷题目
最后返回成功
细节：

如果你不是表单提交，而是异步请求，涉及到DateTime类型的值时，务必添加T分割

在这里插入图片描述

这里卡了我很久

吃了个饭，继续，马上就完工了，不能放弃啊!
今天开发时间大于8小时了，有点扛不住，希望不要再出问题了！！！！
运行测试：
在这里插入图片描述
添加作业

选择试卷类型

添加数据，确定添加试卷
切换学生登入，查看作业：

加入进来了！
点击进入，回答试卷

答完题目自动回到主页面！！分数是2分
查看数据库：

数据对了！！！！