結對編程（先後端分離）

時間 2019-11-30

標籤編程後端分離简体版

原文原文鏈接

成員：html

　　巫培傑：3117004669前端

　　易俊楷：3117004677node

1、Github項目地址jquery

前端代碼:https://github.com/JakeYi/Paring-projectgit

後端代碼:https://github.com/blanche789/softpairinggithub

2、PSP表格ajax

PSP2.1	Personal Software Process Stages	預估耗時（分鐘）	實際耗時（分鐘）
Planning	計劃	20	20
· Estimate	· 估計這個任務須要多少時間	30	30
Development	開發	1520	1550
· Analysis	· 需求分析	90	85
· Design Spec	· 生成設計文檔	60	50
· Design Review	· 設計複審	35	45
· Coding Standard	· 代碼規範	90	80
· Design	· 具體設計	60	60
· Coding	· 具體編碼	1000	1100
· Code Review	· 代碼複審	100	120
· Test	· 測試(自我測試，修改代碼，提交修改)	90	110
Reporting	報告	110	150
· Test Report	· 測試報告	60	50
· Size Measurement	· 計算工做量	40	30
· Postmortem & Process Improvement Plan	· 過後總結, 並提出過程改進計劃	60	70
Total	總計	1720	1760

3、效能分析json

　　生成一萬道題目用的時間是766ms後端

4、設計實現過程app

　　本項目是先後端分離的項目，我是負責前端的技術，前端採用的技術棧是jquery框架，簡化了開發流程。前端與後端的交互是經過接口進行的，實現了真正的分工合做。

　　主要流程是編寫靜態頁面，而後逐一實現功能。

　　關鍵函數經過四個主要的對象編寫

　　1. Paging類切換分頁面

　　2. Subject類獲取題目和答案並放置到dom節點上

　　3. Match類進行題目的校隊

　　4.Download類進行題目的下載和答案的下載

5、代碼說明

1.Subject對象 獲取題目和答案並放置到dom節點上

var Subject = {
    init: function () {
        var _this = this
        this.$main = $(".content")
        this.$input = this.$main.find(".operate input")
        this.$confirm = this.$main.find(".operate a")
        this.$second = $('.second')
        this.$subject = $('#subject')
        this.$answer = $('#answer')
        this.$tTbody = this.$subject.find('.chart .manifest tbody')
        this.$aTbody = this.$answer.find('.chart .manifest tbody')

        this.bind()

    },
    bind: function () {
        var _this = this
        var string = new Array()
        this.$confirm.click(function (e) {

            _this.$inputValue = _this.$input[0].value
            if ((_this.$inputValue.match(/^[0-9]+,[0-9]+$/g)) == null) {
                console.log('輸入了錯誤的數據')
                e.preventDefault();
            } else {
                _this.$main.addClass('hide')
                _this.$second.removeClass('hide')
                _this.strs = new Array()
                strs = _this.$inputValue.split(",")
                _this.questionNum = parseInt(strs[0])
                _this.numericalRange = parseInt(strs[1])
                console.log(_this.$input)
                console.log(_this.$inputValue)
                console.log(_this.questionNum)
                console.log(_this.numericalRange)
                console.log(typeof _this.questionNum)
                console.log(typeof _this.numericalRange)
                _this.getData(function (result) {
                    _this.renderData(result)

                })
            }

        })

        this.$tTbody.click(function () {
            // console.log('click title_tbody')
        })
        this.$aTbody.click(function () {
            // console.log('click answers_tbody')
        })
    },
    getData: function (callback) {
        var _this = this
        var allData = {
            questionNum: _this.questionNum,
            numericalRange: _this.numericalRange
        };
        $.ajax({
                url: '/generate',
                type: 'POST',
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify(allData)
            })
            .done(function (ret) {
                // console.log(ret)
                callback(ret)
            })
            .fail(function (err) {
                console.log("出錯了")
            })
            .always(function () {
                console.log("end...")
            })
    },
    renderData: function (data) {
        var _this = this
        data.forEach(function (item) {
            // console.log(item);
            var $nodeTit = _this.createTitle(item)
            var $nodeAns = _this.creatAnswer(item)
            _this.$tTbody.append($nodeTit)
            _this.$aTbody.append($nodeAns)
        })
    },
    creatAnswer: function (node) {
        var $node = $(`
        <tr>
        <td >${node.qid+1}</td>
        <td>${node.exercise}</td>
        <td class="answer">${node.answer} </td>
        </tr> `)
        return $node
    },
    createTitle: function (node) {
        var $node = $(`
        <tr class="title${node.qid+1}">
        <td >${node.qid+1}</td>
        <td>${node.exercise}</td>
        <td>
        <input type="text">
        </td>
         <td class="check_answer"></td>
        </tr>
        `)
        return $node
    }

}

2. Match類進行題目的校隊

var Match = {
    init: function () {
        var _this = this
        this.$main = $('#subject')
        this.$second = $('#answer')
        this.$mainTbody = this.$main.find('.chart .manifest tbody')
        this.$secondTbody = this.$second.find('.chart .manifest tbody')

        this.$check = this.$main.find('.chart .check')
        this.bind()
    },
    bind: function () {
        var _this = this
        _this.$check.click(function () {
            _this.$text = _this.$mainTbody.find('input')
            _this.$answer = _this.$secondTbody.find('.answer')
            _this.$checkAnswer = _this.$mainTbody.find('.check_answer')
            _this.check()
            console.log('check')
        })

    },
    check: function () {
        var _this = this
        for (let i = 0; i < _this.$answer.length; i++) {
            console.log( _this.$answer[i].innerText)
            console.log( _this.$text[i].value)
            if (_this.$answer[i].innerText == _this.$text[i].value + ' ') {
                _this.$checkAnswer.eq(i).html('true')
                console.log("right")
            } else {
                _this.$checkAnswer.eq(i).html('false')
                console.log("error")

            }
        }
    }
}

3.Download類進行題目的下載和答案的下載

var Download = {
    init: function(){
        var _this = this
        this.$third = $('#function')
        this.$file = this.$third.find('.file')
        this.$answer = this.$third.find('.answer')
        this.bind()
    },
    bind: function(){
        var _this = this
        _this.$file.click(function(){
            console.log('click file')
            var xhr = new XMLHttpRequest()
            xhr.open('POST', "/download", true)
            xhr.responseType = 'blob'

            xhr.onload = function() {
                if (this.status === 200) {
                    var responseHeaders = xhr.getAllResponseHeaders().toLowerCase();
                    var fileName = responseHeaders.match(/\w+.txt/g)
                    var blob = this.response
                    var a = document.createElement('a')
                    a.download = `${fileName}`
                    a.href = window.URL.createObjectURL(blob)
                    a.click()
                }
            }
            xhr.send("0")
        })
        _this.$answer.click(function(){
            console.log('click answer')
            var xhr = new XMLHttpRequest()
            xhr.open('POST', "/download", true)
            xhr.responseType = 'blob'

            xhr.onload = function() {
                if (this.status === 200) {
                    var responseHeaders = xhr.getAllResponseHeaders().toLowerCase();
                    var fileName = responseHeaders.match(/\w+.txt/g)
                    var blob = this.response
                    var a = document.createElement('a')
                    a.download = `${fileName}`
                    a.href = window.URL.createObjectURL(blob)
                    a.click()
                }
            }
            xhr.send("1")
        })
    }
}

4.Paging類切換分頁面

var Paging = {
    init: function () {
        this.$tab = $('footer>div')
        this.$page = $('main>section')
        this.bind()
        console.log("123")
    },
    bind: function () {
        var _this = this
        _this.$tab.on('click', function () {
            console.log('tab click...')
            var $this = $(this)
            var index = $this.index()
            $this.addClass('active').siblings().removeClass('active')
            _this.$page.eq(index).fadeIn().siblings().hide()
        })
    }
}