一.前提
（1）做業來源：https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2213html
（2）GitHub地址：https://github.com/llgeill/llg-web-class
前端
（3）調試環境：IntelliJ IDEA ，CHORME瀏覽器vue
二.做業要求
（1）基本要求git
- 自動生成題目，單個題目最多不能超過4個運算符，操做數小於100。
- 用戶能夠輸入答案
- 若用戶輸入答案正確，則提示正確；若答案錯誤，則提示錯誤，並要提示正確答案是多少。
（2）擴展要求github
- 用戶答題結束之後，程序能夠顯示用戶答題所用的時間
- 用戶能夠選擇出題的個數（最多不能超過5個題目），答題結束能夠顯示用戶答錯的題目個數和答對的題目個數
- 用戶在第一次答題時，須要用戶輸入用戶名，用戶下次啓動後，程序須要記住用戶前一次輸入的用戶名
- 程序能夠設置答題時間，時間設置爲整數，單位爲秒，最大不能超過120秒，若超過了答題時間未答題，則提示：時間已到，不能答題。
（3）結對成員web
姓名：李利光 學號：201606110062 博客園地址：https://www.cnblogs.com/liliguang/
ajax
姓名：黃揚帆 學號：201606110079 博客園地址：https://www.cnblogs.com/gzcchyf/後端
三.時間估算
結對項目軟件過程耗時估計表與統計表瀏覽器
（時間單位：小時）前端框架
| PSP2.1 |
我的軟件實現階段 |
預計時間 |
實際時間 |
| Planning |
計劃 |
1 |
2 |
| · Estimate |
估計這個任務須要多少時間 |
10 |
15 |
| Development |
開發 |
10 |
10 |
| · Analysis |
需求分析 (包括學習新技術) |
1 |
1 |
| · Design Spec |
生成設計文檔 |
1 |
1 |
| · Design Review |
設計複審 |
0.5 |
0.5 |
| · Coding Standard |
代碼規範 |
1 |
1 |
| · Design |
具體設計 |
1 |
1 |
| · Coding |
具體編碼 |
1 |
1 |
| · Code Review |
代碼複審 |
0.5 |
0.5 |
| · Test |
測試（自我測試，修改代碼，提交修改） |
1 |
1 |
| Reporting |
報告 |
1 |
1 |
| · |
測試報告 |
1 |
1 |
| · |
計算工做量 |
2 |
2 |
| · |
並提出過程改進計劃 |
2 |
2 |
四：工做詳情
（一）工做:
黃楊帆： 設計和編寫界面交互部分、設計計時器、保存用戶名
李利光： 後臺代碼隨機生成題目、先後端數據交互、判斷正誤、計算得分
（二） 部分功能代碼介紹：
（1）題目獲取功能：經過ajax異步獲取必定數量的四則運算習題（前臺）
getReq: function () {
//發送get請求
this.$http.get('/getOperation?count=' + this.count).then(function (res) {
this.items = res.body;
}, function () {
console.log('請求失敗處理');
});
},
題目獲取功能：經過ajax異步獲取必定數量的四則運算習題（後臺）
@RequestMapping("getOperation")
public List<Operation> getOperation(int count){
List<String> resultList=new ArrayList<>();
List<String> problemList=new ArrayList<>();
List<Integer> signNumberList=new ArrayList<>();
fourArithmeticOperation.outPutData(count,resultList,problemList,signNumberList);
List<Operation> list=new ArrayList<>();
for(int i=0;i<resultList.size();i++){
Operation operation=new Operation();
operation.setAnswer(resultList.get(i));
operation.setProblem(problemList.get(i));
operation.setSignConunt(signNumberList.get(i));
list.add(operation);
}
return list;
}
（2）用戶提交功能：首先通過校驗機制判斷是否輸入答案，以後進行答案的比對運算出答對題數量和最終得分
rejectAnswer: function () {
this.stopTime = true;
this.get_answer_flag = true;
this.currentShowResult = true;
var itemClone = this.items;
for (var i = 0; i < itemClone.length; i++) {
if (itemClone[i].user_answer == itemClone[i].answer) {
itemClone[i].isCorrect = false;
var item = JSON.parse(JSON.stringify(itemClone[i]));
this.items.splice(i, 1, item);
this.currentCorrectCount++;
} else {
itemClone[i].isCorrect = true;
}
}
},
post: function () {
//校驗表單
var forms = document.getElementById('valitForm');
if (forms.checkValidity() === true) {
forms.classList.remove('was-validated');
this.rejectAnswer();
} else {
forms.classList.add('was-validated');
}
},
五.軟件演示
軟件入口地址：http://39.108.158.15/login.html
1.首先進行用戶登錄（無需密碼）
2.選擇隨機生成的習題數量
3.將最終答案填入相對應的答案框便可
4.點擊提交後便可看到正確答案，而且還有剩餘時間、答對習題數、最終得分
六：結對照片
七:收穫與感悟
從此次小項目的合做來看，明確分工和必定的團隊交流是很是重要的，能夠達到事半功倍的效果。在這軟件編寫的過程當中，嘗試了一下前端框架vue，雖然能完成任務，可是代碼是很是混亂的，這個緣由多是vue的不熟練所致使的，因此從此仍是要花時間多學習一下vue。對於團隊合做來講，若是將項目快速的分割成一個個任務單位是須要思考的。