结对编程(先后端实现) 之 前端篇

Partner：郑伟金 3117004680 👍

GitHub 连接：https://github.com/KofeChen/partner-project

友情连接：http://www.javashuo.com/article/p-eptrtwvx-go.html

PSP：

PSP2.1	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	30	30
· Estimate	· 估计这个任务须要多少时间	30	30
Development	开发	1600	1440
· Analysis	· 需求分析 (包括学习新技术)	100	90
· Design Spec	· 生成设计文档	30	20
· Design Review	· 设计复审 (和同事审核设计文档)	30	40
· Coding Standard	· 代码规范 (为目前的开发制定合适的规范)	30	50
· Design	· 具体设计	60	60
· Coding	· 具体编码	1260	1060
· Code Review	· 代码复审	30	30
· Test	· 测试（自我测试，修改代码，提交修改）	60	90
Reporting	报告	70	70
· Test Report	· 测试报告	20	30
· Size Measurement	· 计算工做量	30	20
· Postmortem & Process Improvement Plan	· 过后总结, 并提出过程改进计划	20	20
合计		1700	1540

功能分析：  

　　这是一个网页版的小学生四则运算练习系统，共有三个功能：

• 在线作题：点击在线作题按钮，系统会根据用户输入的范围给用户随机生成 10 道题目，用户在作题页面做答并提交，系统会校对答案并在线展现
• 下载离线文件：点击生成离线文件按钮，跳转到题目与答案下载页面，点击题目或者答案下载离线文件
• 上传文件校对答案：点击上传文件对答案按钮，选择文件并上传，系统会显示校对进度，校对完成以后下载按钮就绪能够点击下载

设计实现过程：

接口文档 (部分)

原型设计

       做为这个小项目的前端，由于只有先后端两我的，因此前端兼作了设计，根据与后端统一的需求，作出来的实现图如上图。没有原型图，因此是一边完善需求，一边写的页面，简单沿用了同一个界面框的样式。

       整个 html 页面分为 Start (开始页面)、Initial (初始化页面)、Practice (在线练习页面)、Download (下载离线文件页面) 和 Upload (上传校对页面) 5个分页

　　js 代码的话分为 3 个模块分别处理

• Start：开始页面和上传文件进度页面的相关处理
• Initial：初始化页面和下载文件页面的相关处理
• Work：作题页面和在线校对答案以及答案的呈现

代码说明：

下面挑出部分比较有意思的代码进行说明

this.$form.on('change', '#file', function(e) {
      $(this).clone().replaceAll(_this.file = this)
      _this.setForm()

      _this.currentProgress = 0

      var clock = setInterval(function() {
        $.ajax({
          url: '/check/rate',
          type: 'GET',
          headers: {id: _this.userId}
        })
        .done(function(res) {
          if (res != '100') {
            let rate = parseInt(res)
            if (rate <= 50) {
              _this.$rate[0].innerText = res + '%'
              _this.$rightCircle.css('transform', `rotate(${-135+180*rate/50}deg)`)
              _this.$leftCircle.css('transform', 'rotate(135deg)')
            } else {
              _this.$rate[0].innerText = res + '%'
              _this.$rightCircle.css('transform', 'rotate(45deg)')
              _this.$leftCircle.css('transform', `rotate(${(135+180*rate/100)}deg)`)
            }
          }
          else if (res === '100') {
            $('.downLoad h2')[0].innerText = '点击下载'
            _this.$rate[0].innerText = res + '%'
            _this.$rightCircle.css('transform','rotate(45deg)')
            _this.$leftCircle.css('transform', 'rotate(315deg)')
            _this.$downLoadBtn.addClass('ready')
            var xhr = new XMLHttpRequest()
            xhr.open('GET', '/check/answer', true)
            xhr.responseType = 'blob'
            xhr.setRequestHeader('id', _this.userId)
            xhr.onload = function() {
              if (this.status === 200) {
                var blob = this.response
                _this.a = document.createElement('a')
                _this.a.download = 'Result.txt'
                _this.a.href = window.URL.createObjectURL(blob)
              }
            }
            xhr.send()
            clearInterval(clock)
          }
        })
        .fail(function(err) {
          console.log(err)
        })
      }, 500)
    }) 
  },
  setForm: function() {
    var _this = this
    var form = document.getElementById('uploadForm')
    console.log(form)
    var formData = new FormData(form)
    formData.append('file', $('#file')[0].files[0])
    $.ajax({
      url: '/check/question',
      type: 'POST',
      data: formData,
      headers: { id: _this.userId },
      processData: false,
      contentType: false
    })
    .done(function(res) {
      console.log(res)
    })
    .fail(function() {
      console.log("error..")
    })
    .always(function() {
      $('#file').replaceWith(_this.file)
    })
  }

上传文件校对答案的部分代码

 

上传文件是发送请求中遇到的较为困难的一个：

一、input [type=file] 控件选择同一个文件以后不触发 change 事件，刷新浏览器以后仍不能触发，若是用户选择屡次选择相同文件名上传的话会出现文件选择框不弹出来的 bug

　　缘由：由于 input [type=file] 控件的 change 事件是经过 input 输入框中的文本改变来触发事件的，而不是像别的编程语言经过选择文件来触发，这就致使屡次选择相同的文件，第一次以后就没法弹出文件选择框；还有浏览器会自动保存 input [type=file] 控件上的文字，页面关闭后打开仍然会恢复原来的文本，这时候选择同路径的文件也不会触发 change 事件。

　　解决方法：建立一个新的 input [type=file] 控件将旧的替换掉，事件绑定经过事件冒泡来获取

二、提交表单数据，上网找了一下找到了 form 表单封装成 formdata 对象的上传方法，可是会附加额外的信息增长后端处理的负担

 

后端如何辨别是哪一个浏览器发送的文件：

先后端协商以后，决定前端在上传文件以前，先向后台发送请求获取 id 以供后台识别浏览器，而后在请求进度和上传文件时在请求头部设置标识身份的 id 以便后台进行识别。

后端代码测试优化等有兴趣请参考：http://www.javashuo.com/article/p-eptrtwvx-go.html

 页面展现：

开始页面：

在线答题页面：

下载题目页面：

上传校对进度：

在线答题答案卡展现

在线答题答案展现

上传核对答案后的下载文件详情

性能 (后台优化)

（1）10000道题目生成用时 0.068 s

（2）10000道题目核对用时 6.809s（因为为了支持用户自定义题目的核对，故采用了正则表达式进行识别，因此识别花费时间比较多，若是想提升速度能够考虑去除正则匹配以及并行优化）

 

项目总结：

　　第一次完整的作网页项目，整个过程包括需求分析与肯定、阶段计划、需求调整、预测试、对接口测试以及完善代码，最重要也是收获最多的一个地方是在先后端的沟通协做方面，伙伴很给力也颇有实力，使整个开发过程很高效也很愉快，同时也有对原型设计和接口文档规范的认识。

　　最大的不足之处在于编码过程当中，专一实现功能但未能考虑好代码的质量和复用，在很大程度上加剧了浏览器的负担。