结对编程（前后端分离）

成员：

　　巫培杰：3117004669

　　易俊楷：3117004677

一、Github项目地址

前端代码:https://github.com/JakeYi/Paring-project

后端代码:https://github.com/blanche789/softpairing

二、PSP表格

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

三、效能分析

　　生成一万道题目用的时间是766ms

四、设计实现过程

　　本项目是前后端分离的项目，我是负责前端的技术，前端采用的技术栈是jquery框架，简化了开发流程。前端与后端的交互是通过接口进行的，实现了真正的分工合作。

　　主要流程是编写静态页面，然后逐一实现功能。

　　关键函数通过四个主要的对象编写

　　1. Paging类切换分页面

　　2. Subject类获取题目和答案并放置到dom节点上

　　3. Match类进行题目的校队

　　4.Download类进行题目的下载和答案的下载

五、代码说明

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()
        })
    }
}