OJ系统课程分析页面前后端实现(分工情况及用户手册)

课程分析, 前端Vue, 后端Django

Posted by 陈彬, 曹原溥, 蹇坤霖, 马弋涵 on June 11, 2019

蹇坤霖——测例标签条形统计图

jkl

  • 前端工作:提供统计课程中所有提交记录的测例标签数,分为为通过的测例标签和通过的测例标签,直观地展示了标签的数量关系

  • 后端工作:后端部分我主要是与前端测例标签的柱状图交互数据,在前端发送GET请求并传递给后端course_id,后端从数据库中取得该课程下所有提交记录,分为通过和未通过两部分,统计各个测例的标签数量,返回包含各个标签信息字典的列表给前端。API如下:
    /teacher/submission/statistics/get_submission_tags GET
    request:
      {
          course_id: 1
      }
    response:
      {
          ans:
          [{'标签': '标签1', '通过数': 1, '未通过数': 0, '总数': 1},
           {'标签': '标签2', '通过数': 1, '未通过数': 2, '总数': 3}]
      }
    
  • 感想:经过这次企业应用开发过程,我了解到了一个团队磨合过程的艰辛,再次感受到规范的代码和完备的文档对于一个大项目的重要性,作为小组长,我也了解到大小组会议内容传递和组内任务调度要求是很严谨的,总之能在这次项目里做点能看的东西还是比较开心的。

曹原溥——提交次数统计折线图

cyp

  • 前端工作:前端使用Ant-v框架与V-Charts实现课程题目提交情况折线图,通过选择不同时间段“日,周,月,年”可查看相应时间段内的总提交数,AC数,非AC数

  • 后端工作:后端使用Django完成与前端功能相应的API接口,并完成前后端连接,实现完整功能。前端通过传入course_id以及相应的时间区间,如果是”day”,则返回一天从0:00:00-23:59:59每两个小时为一个时间段的12个时间段内相应的提交次数;如果是”week”,则返回最近一周的日期及相应的提交次数;如果是”month”则返回一年12个月的提交次数;”year”则返回最近5年的提交次数统计情况。API格式如下所示(选取示例为”day”和”week”,”month”与类似”day”,”year”与”week”类似):
    /teacher/submission/statistics/get-submission_count GET
    request:
      {
          course_id: 1 
          date_range: 'day'
            
      }
    response:
    {
      "error": null,
      "data": {
          "total": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0
          ],
          "AC": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0
          ],
          "not_AC": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0
          ]
      }
    }
    
    request:
      {
          course_id: 1 
          date_range: 'week'
            
      }
    response:
    {
      "error": null,
      "data": {
          "total": {
              "2019-06-06": 0,
              "2019-06-07": 0,
              "2019-06-08": 0,
              "2019-06-09": 0,
              "2019-06-10": 0,
              "2019-06-11": 0,
              "2019-06-12": 0
          },
          "AC": {
              "2019-06-06": 0,
              "2019-06-07": 0,
              "2019-06-08": 0,
              "2019-06-09": 0,
              "2019-06-10": 0,
              "2019-06-11": 0,
              "2019-06-12": 0
          },
          "not_AC": {
              "2019-06-06": 0,
              "2019-06-07": 0,
              "2019-06-08": 0,
              "2019-06-09": 0,
              "2019-06-10": 0,
              "2019-06-11": 0,
              "2019-06-12": 0
          }
      }
    }
    
  • 感想:从技术上来说,这次学习到了前后端连接的方法,成功完成独立性任务的开发;在后端API编写上,由于要实现日,周,月,年四种查询功能且数据查询量较大,一开始对性能方面考虑不周全导致加载有些慢,然后为了提升性能增强了函数的复用性并减少了相同函数的调用次数,在Django数据筛查方面也尽量一次筛选出符合要求的数据,不多次筛选,最终实现了良好的效果。从开发流程上和团队沟通上来讲也收获良多,特别是在任务分配方面,要尽量减少耦合性,这样才能最大化git等版本控制工具的使用效果

陈彬——AC和非AC题目统计词云

cb

  • 前端工作:我在前端部分的主要工作在于词云功能的实现,查阅v-chart文档并使用ant-v框架在教师端部分显示出所有题目(包含AC和非AC情况)的标签词云,鼠标放在词云上面会显示标签名和数量

  • 后端工作:后端部分我主要是与前端词云界面的显示进行交互,在前端发送GET请求并传递给后端course_id,后端接受到后从数据库中取得该课程对应的所有课时下的所有题目的AC和非AC情况以及它们对应的标签词云的名称和数量,然后将AC和非AC的词云以名字作为键名,数目作为值存放在一组字典中,然后将这些字典放入一个列表里,最后将AC和非AC情况的两个列表合并到一个大列表中返回给前端。前端取得列表数据,并将第一个元素作为该课程题目对应的AC标签词云,第二个元素作为该课程题目对应的非AC标签词云加以显示。API如下:
    /teacher/submission/statistics/get-wordcloud GET
    Request {
      "course_id": 1
    }
    Response [
      [
          {
              "word": "Queue",
              "count": 125
          },
          {
              "word": "Time Limit",
              "count": 24
          }
      ],
      [
          {
              "word": "Space Limit",
              "count": 253
          },
          {
              "word": "Stack",
              "count": 48
          }
      ]
    ]
    
  • 感想:在配置前端和后端环境的过程中,我感受到了真正软件开发的流程,让我更加清楚地认识到自己的知识边界和应该提升的能力,并且在这次任务中我做了词云的实现工作,也认真阅读了v-charts关于这部分的文档,学习到了以前不曾了解的知识

马弋涵——题目提交次数列表

myh

  • 前端工作:提供课程下所有题目信息列表;包含题目名称、AC率、开始时间等信息;点击跳转到单个题目分析

  • 后端工作:使用Django完成后端开发,接收前端发来的course_id, 筛选出相应的题目详细信息包括题目名称,开始时间,更新时间,提交次数,AC次数和AC率;并完成了前后端连接,测试了API。
    /teacher/submission/statistics/get_submission_info GET
    request:
      {
          course_id: 1 
            
      }
    response:
    [
      {
          "problem_id": 2,
          "problem_name": "name",
          "start_time": "2019-06-01 05:56:20",
          "update_time": "2019-06-01 05:56:27",
          "submit_times": 20,
          "AC_times": 8,
          "ACrate": "40.0%"
      },
      {
          "problem_id": 3,
          "problem_name": "name",
          "start_time": "2019-06-01 12:33:58",
          "update_time": "2019-06-01 12:34:02",
          "submit_times": 0,
          "AC_times": 0,
          "ACrate": "0.0%"
      }
    ]
    
  • 感想:因为我在去年暑假的企业应用开发中参加了中软国际的企业实训,不太清楚git作为版本管理工具的使用方法,但是在这次任务完成的过程中让我不禁熟悉了git的使用方式,而且使用了v-charts制作表格并导入数据,对项目开发有了全新的体验和认知。