結對編程(先後端實現) 之前端篇

時間 2019-11-30

標籤編程後端實現前端简体版

原文原文鏈接

Partner：鄭偉金 3117004680 👍css

GitHub 連接：https://github.com/KofeChen/partner-projecthtml

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

PSP：

PSP2.1git	Personal Software Process Stagesgithub	預估耗時（分鐘）ajax	實際耗時（分鐘）正則表達式
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