一.前提

（1）作業來源：https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2213

（2）GitHub地址：https://github.com/P-and-A/learningGit/tree/master/arthematic

（3）調試環境：IntelliJ IDEA ，CHORME瀏覽器，Tomcat8.5.28

二.作業要求

（1）基本要求

• 自動生成題目，單個題目最多不能超過4個運算符，操作數小於100。
• 用戶可以輸入答案
• 若用戶輸入答案正確，則提示正確；若答案錯誤，則提示錯誤，並要提示正確答案是多少。

（2）擴展要求

1. 用戶可以選擇出題的個數（最多不能超過5個題目），答題結束可以顯示用戶答錯的題目個數和答對的題目個數。
2. 可以出表達式裏含有負整數（負整數最小不小於-100）的題目，且負數需要帶括號，用戶輸入的結果不用帶括號。如： 2*（-4） = -8
3. 程序可以設置皮膚功能，可以改變界面的顏色即可。
4. 程序可以出單個整數階乘的題目：如：4!=24。

（3）結對成員

　　姓名：廖超凡 學號：201606120044 博客園地址：https://www.cnblogs.com/grate/

姓名：梁秋華 學號：201606120036 博客園地址：https://home.cnblogs.com/u/liangqiuhua/

三.時間估算

結對項目軟件過程耗時估計表與統計表

（時間單位：小時）

五.工作詳情

（一）工作:

　　　　廖超凡： 架設服務器、數據庫錄入題目、設計實現獲取題目及答案的Api接口、協助前端設計交互邏輯。

　　　　梁秋華： 設計前端的界面設計部分、按鍵、按鈕、測試輸入答案

（二） 部分功能代碼介紹：

　　後端：

　　　　（1）處理請求

1     @RequestMapping(value = "get_questions/{num}")
2     @ResponseBody
3     public String getAllQuestion(@PathVariable("num")int num){
4         return iQuestionService.getAllQuestion(num);
5     }

　　（2）隨機選取題目並返回Json數據

 1 public String getAllQuestion(int num){
 2         List<Question> questionList = questionMapper.getAllQuestion();
 3         List<Question> selectList = new ArrayList<>();
 4         Set<Integer> selected = new HashSet<>();
 5         int size = questionList.size();
 6         for(int i=0;i<num;){
 7             Random random = new Random();
 8             int randomNum = random.nextInt(size);
 9             if(selected.add(randomNum)){
10                 selectList.add(questionList.get(randomNum));
11                 i++;
12             }
13         }
14         return ToJsonUtil.getToJsonUtil().objectToJson(selectList);
15     }

　　前端：

　　　　（1）題目選擇顯示功能：可以通過下拉框來選擇題目顯示的數目，此處可以從後端服務器數據庫中獲得題目,並更新頁面狀態

 1                   get:function(){
 2                         //發送get請求
 3                         var num = $(‘#itemNum‘).val();
 4                         this.ischeck = false; //刷新批改狀態
 5                         this.$http.get(‘get_questions/‘+this.selected).then(function(res){
 6                             this.msg=res.body;
 7                         },function(){
 8                             console.log(‘請求失敗‘);
 9                         });
10 //                        頁面初始化
11                         $.each( $(‘[data-index]‘), function(index,item){
12                             var a = item.children;
13                             a[1].value="";
14                             if(a[2].style.visibility="visible"){
15                                 a[2].style.visibility="hidden";
16                             }
17                         });
18                     },

　　　　（三）運行與測試結果

圖1.回答並統計成績

圖2.有正誤扣分提示

圖3.選擇題目數量並打印

圖4.換膚功能演示

　　（四）結對照片

六.收獲與感悟

　　（一）遇到的問題及解決方案

　　　　技術方面：

　　　　　　（1）Tomcat運行時，項目中有些類出現ClassNotFound。

　　　　　　　　通過搜索引擎查找相似的問題，發現問題出現使用idea構建Maven項目，將項目打包到Tomcat時，相關Jar包並沒有加到Tomcat運行環境的Web模塊中，導致某些類出現ClassNotFound，通過idea的Project Structure設置後，在Tomcat的部署環境中出現相關Jar包。

　　　　合作方面：

　　　　　　（1）有些需要邊學邊做，兩人合作出現項目進度不好把控，容易出現延期。

　　　　　　　　如果項目趕工期的話，盡量采用雙方熟悉的技術，避免耽誤項目的完工。不趕工期的話，以做促學，可以有效提高技術水平，缺點是卡殼時會耽誤進度。

　　　　　　（2）項目分工不明確（如對題目的預處理，在前端隨機挑選還是後端挑選分工沒有明確），有些功能實現出現了延期。

　　　　　　　　功能設計需要更加詳細具體指明實現方。

結對項目-四則運算 “軟件”之升級版