軟件工程結對項目：四則運算web
項目地址
javascript
css
html
前端
java
Information Hiding : 信息隱藏。在此次結對編程中，咱們把計算核心和輸入輸出處理所有封裝在core模塊中，經過接口將core模塊和外界聯繫起來，但具體的實現和錯誤處理都被隱藏在模塊中。jquery
Interface Design : 因爲和結對隊友所用語言不一樣，咱們之間的對接相當重要，咱們定義了一套公共的接口，極大程度的方便了各個模塊之間的通信。git
Loose Coupling : 鬆耦合，經過模塊的封裝減小了經過接口鏈接的各個模塊的影響。web
ajax
算法
在性能改進這一塊我花費了大約2小時，除了將本來的命令行程序擴展命令格式之外，我還優化了字符串存儲方式，詳細內容以下：
當輸入參數爲時 效能分析圖爲
經分析String內存佔用較大，緣由是由於我用一個String存儲了所有的算式而且沒有釋放內存，優化代碼後性能明顯改善了許多。
另外我還發現了一個有趣的現象，當代碼執行完成後，內存並無釋放而是疊加了起來，如圖所示：
當題目爲50時內存變化，以後內存不斷攀升達到必定數值後穩定下來。
當我再次輸入50時，內存變化
經研究發現這是由於java特殊的內存釋放機制所致使的。
個人測試思路是測試全部的正常和異常狀況，確保程序可以正常運行。
@Test
public void testMain(){//本函數爲正確輸入形式，並打亂了命令輸入順序
String[] args = {"-o","2","-n","20","-c","-b","-m","1","100"};
command.main(args);
}
@Test
public void testMain1(){//本函數只正確輸入了-n命令，但沒有輸入另外一個必須輸入的命令-m
String[] args = {"-n","20"};
command.main(args);
}
@Test
public void testMain2(){//本函數測試不輸入任何命令的狀況
String[] args = {};
command.main(args);
}
@Test
public void testMain3(){//本函數測試輸入了必須輸入的-n、-m命令，但-m命令少輸入了一個參數
String[] args = {"-n","20","-m","1"};
command.main(args);
}
@Test
public void testMain4(){//本函數測試輸入錯誤命令
String[] args = {"aaaa"};
command.main(args);
}
@Test
public void testMain5(){//本函數測試輸入了-n命令，但缺乏了參數
String[] args = {"-n"};
command.main(args);
}
@Test
public void testMain6(){//本函數測試輸入了-0命令，但缺乏了參數
String[] args = {"-o"};
command.main(args);
}
@Test
public void testMain7(){//本函數測試輸入了必須輸入的-n、-m命令，但-n參數範圍錯誤
String[] args = {"-n","1000000","-m","1","100"};
command.main(args);
}
@Test
public void testMain8(){//本函數測試輸入了必須輸入的-n、-m命令，但-n參數類型錯誤
String[] args = {"-n","aaa","-m","1","100"};
command.main(args);
}
@Test
public void testMain9(){//本函數測試輸入了必須輸入的-n、-m命令，但-m參數範圍錯誤
String[] args = {"-n","10","-m","100","50"};
command.main(args);
}
@Test
public void testMain10(){//本函數本函數測試輸入了必須輸入的-n、-m命令，但-o參數範圍錯誤
String[] args = {"-n","10","-m","1","100","-o","-100"};
command.main(args);
}
11個測試函數均運行正確
覆蓋率達到了90%以上
我負責的主要有：
1.js提示：main界面定製題目時，不可有非正常輸入，
核心jquery代碼
2.js：index界面登陸時，對未註冊用戶攔截，組織頁面跳轉
這裏只貼出核心的代碼：
// 判斷用戶名密碼的js
//數據庫通常存儲的密碼是md5格式，判斷密碼是否正確時，先將密碼轉爲md5格式，再判斷；（轉md5格式，先引用md5js，再寫hex_md5("2121212") 便可）
$(function() {
//根據localStorage中是否有值，判斷用戶是否登陸過
if(window.localStorage){ //用戶登陸過
var name1 = localStorage.getItem("usename"); //獲取存儲的用戶名
var pwd1 = localStorage.getItem("pwd"); //獲取存儲的密碼
$("input[name=usename]").val(name1); //用戶名賦值
$("input[name=pwd]").val(pwd1); //密碼賦值
}else{
$("input[name=usename]").val("");
$("input[name=pwd]").val("");
}
})
//點擊登陸按鈕
$('#btnYes').click(function (event) {
if($("input[name=usename]").val()=="") { //用戶名爲空時
$(".mixfirm").show();
mixfirm("用戶名不能爲空");
setTimeout(function() {
$(".mixfirm").hide();
},1000);
return false;
}
if($("input[name=pwd]").val()=="") { //密碼爲空
$(".mixfirm").show();
mixfirm("密碼不能爲空");
setTimeout(function() {
$(".mixfirm").hide();
},1000);
return false;
}
var list1 = $("input[name=usename]").val(); //獲取當前輸入的用戶名，根據用戶名查SQL
sql("select * from Users where usename='"+list1+"'",function(data) {
if(data!=null) { //若是用戶名存在
var ps1 = data.pwd; //獲取數據庫密碼
var ps2 = hex_md5($("input[name=pwd]").val()); //獲取輸入的密碼，並轉成md5格式
if(ps1 == ps2) { //若是輸入的密碼正確，執行loginAfter方法
//用ttyu平臺獲取全部用戶的信息的方法，能夠在此寫SQL直接查數據庫
$("#form1").send({ table: "Users", action: "login", backAfter: "loginAfter" });
}else { //密碼錯誤，彈框提示
$(".mixfirm").show();
mixfirm("密碼錯誤");
setTimeout(function() {
$(".mixfirm").hide();
},1000);
return false;
}
}else{ //用戶名不存在
$(".mixfirm").show();
mixfirm("該用戶不存在");
setTimeout(function() {
$(".mixfirm").hide();
},1000);
return false;
}
})
});
//登陸回調函數
function loginAfter(result) { //result -- 全部用戶信息
try {
ttyu.user.saveUser(result); //當前用戶信息
var names = $("input[name=usename]").val(); //獲取輸入的用戶名
var pwds = $("input[name=pwd]").val(); //獲取輸入的密碼
localStorage.setItem("usename",names); //本地存儲
localStorage.setItem("pwd",pwds);
// location = "index.html"; //跳轉到首頁面
} catch (e) {
firm(result);
}
}
實現過程：
1. index.jsp 登錄界面
註冊頁面與之相像
2. main.jsp
html代碼相對簡單，用了css+jquery進行美化
界面圖見 12）附加功能版塊
3. replyonline.jsp
利用數據庫+servlt 實現了逐個答題功能，並加上了異常處理。比較喜歡在這個界面作的button按鈕，在下面給出了button按鈕的css樣式，喜歡的能夠採納
button{
margin: 20px;
}
button a{
color: black;
}
.button{
margin:60px 220px;
margin-top: 60px;
}
.bt{
-webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transform: translateX(47px);
will-change: transform;
z-index: 3;
overflow: hidden;
border-radius: 40px;
padding: 12px 15px;
background: #43CB9D;
color: white;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
line-height: 1;
text-transform: uppercase;
}
.bt:before {
-webkit-transition: opacity 300ms ease-out, -webkit-transform 0ms 300ms;
transition: opacity 300ms ease-out, -webkit-transform 0ms 300ms;
transition: opacity 300ms ease-out, transform 0ms 300ms;
transition: opacity 300ms ease-out, transform 0ms 300ms, -webkit-transform 0ms 300ms;
opacity: 0;
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: scale(0);
transform: scale(0);
will-change: transform, opacity;
content: "";
display: block;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #3FE2D9;
border-radius: 40px;
}
.bt{
float: left;
}
提交結果頁面與之類似，在上面的gif圖裏能夠看見效果。
(1)UI設計
咱們如今紙上完成了基本的UI 界面設計，而後由我負責實現和美化，詳細內容在8.中都已說明。
(2)先後端對接
我採用servlet+JavaBean+form表單的方法將先後端聯繫起來。
例如在產生算式時，用form表單將用戶輸入的參數獲取至servlet，將命令行程序import進servlet中，使用接口調用命令行程序產生算式。而後將生成的算式保存至數據庫中，再在前端使用JavaBean連接數據庫，把算式輸出到前端。用戶註冊、答題等同理。
(3)功能展現
①登陸和註冊功能：
②附加功能1 多語言功能：
③題庫生成功能，若參數錯誤先後端均提供了異常處理，前端顯示提示並使得表單沒法提交，後端throw catch處理異常。
④作題功能，計時功能，本次正確率統計功能，錯題展現功能
⑤附加功能2 分用戶歷史作題記錄展現，並顯示最佳記錄
咱們小隊分工比較明確，隊友主要負責後端，我主要負責前端。隊友爲咱們小組的領航員~
咱們的第一步：選擇了隊友的第一次做業代碼，隊友在本來的基礎上面進行更改，我開始作基本的前端頁面。咱們先本身作本身的，在各自擅長的領域奮鬥前行~
咱們的第二步：隊友開始寫單元測試，我繼續美化咱們的web界面，咱們對web界面有比較高的要求，一致認爲好的界面是吸引用戶的最好手段！
咱們的第三步：初步先後端合體，實現一些基本功能，如：題目定製，在線答題，輸出結果……由於咱們是舍友，進行交流也比較方便，雖然出過一些bug，可是也很快就解決了。開心
咱們的第四步：一塊兒爲模塊增長異常處理，主要爲「生成算式數量」異常和登陸異常，在覈心模塊寫入後，咱們又考慮到用戶體驗，使用jQuery撰寫了相應的及時提醒以及防止跳轉，雙重保障更貼心呢！
咱們的第五步：檢查整個項目，並進行優化。
← 隊友：顧思宇（大佬） ： 我（小弟）→
http://www.cnblogs.com/xinz/archive/2011/08/07/2130332.html
在編程中，相互討論，能夠更快更有效地解決問題。好比在此次項目中，咱們在作jQuery表單驗證時，防止頁面跳轉的點怎麼也作不出來，嘗試過百度給的全部解決方法，大晚上把全部宿舍串了一遍也沒
解決，而後有天閒聊，聊着聊着就聊出了一個新的方法。也驗證了那句，語言是思惟碰撞的開始。
3. 最深有感觸的一點：bug解決的更快了！
- 對於有不一樣習慣的同窗，在一塊兒編程可能會有比較多的麻煩，致使效率底下。
- 部分人可能更適合我的編程，而不習慣在編碼的時候還要應對他人的感覺，甚至致使1+1<1
我可愛的隊友：優勢1. 能力強，有責任心
優勢2. 人真的真的好，在編程的過程當中對我關照有加，
優勢3. 有耐心，在我調bug調到崩潰的適合，她會繼續調。。（簡直全世界最好的老顧顧）
缺點：太好了。太棒了，棒到我快開心死！會以爲本身拖了她的後腿...
實現原理：經過jquery+ajax實現。核心思想是經過i18n屬性設置多語言的key，而後插件對全部帶i18n屬性的dom進行掃描處理。可是前端多語言並不只僅是這一個需求，進而延伸的還有事件函數中須要使用的消息，好比
新增一條數據後的提示消息「新增成功」。這時，就須要對普通字符串對象，即String對象進行處理，使其支持多語言。
這裏貼出部分代碼：
1. 瀏覽器語言的獲取
/**
* 獲取瀏覽器語言
* @returns language
*/
function getLang(){
if(typeof(cacheLang) != "undefined"){
return cacheLang;
}
if (navigator.language) {
cacheLang = navigator.language.toLowerCase();
return cacheLang;
}else {
cacheLang = navigator.browserLanguage.toLowerCase();
return cacheLang;
}
}
2.多語言配置的加載
var url = $.type(p) == "string" ? p : "i18n/" + getLang() + ".json";//p爲參數，可經過p手動指定配置路徑，此時不根據默認路徑加載多語言消息配置
$.ajax({
url : url,
dataType : 'json',
type : "GET",
success : function(data, textStatus, jqXHR) {
messages = data;//緩存消息
run(data);//執行dom處理
callback(self);//回調處理，self爲插件自己對象
},
error : function(a, b, c) {
throw "Load i18n message error [" + p + "], cause by : " + b;
}
});
3.DOM處理
/**
* 替換國際化消息
* @param ms 消息對象
*/
function run(ms){
$("*[i18n]").each(function(){
var o = $(this);
var key = o.attr("i18n");//獲取key
var val = o.attr("i18n-set");//獲取消息設置目標
var message = _getMessage(ms, key);//取得消息
switch(val){//根據不一樣目標設置到不一樣的地方
case undefined:
o.html(message);
break;
case "append":
o.html(o.html() + message);
break;
case "html":
o.html(message);
break;
case "value":
o.val(message);
break;
default:
o.attr(val, message);
break;
}
o.removeAttr("i18n");//移除屬性，避免二次處理
o.removeAttr("i18n-set");
});
}
4. 獲取多語言的方法
/**
* 獲取多語言消息
* @param msgs 消息對象
* @param key 消息名稱
* @returns value 消息
*/
function _getMessage(msgs, key){
var message;
try{
message = msgs[key];
}catch(e){
message = key;
}
return message;
}
5.實現對String對象的改造
/**
* 爲String提供local方法獲取多語言消息
* @return value 消息
*/
String.prototype.local = function(){
return _getMessage(messages, this);
}
主要經過數據庫來實現。
主要經過javaBean+JSP鏈接數據庫來實現，創建Users表和Score表，分別記錄用戶信息和得分信息。
13）團隊項目總結
總的來講，此次合做對我而言是一次很愉快又不愉快的經歷。愉快在於和舍友有着和氣的交流方式，作項目比起其餘小組要輕鬆許多，也作出了一個自我感受還不錯的做品；不愉快則在於個人後端編碼能力較弱，無心中就加大了舍友的重擔。其次，作項目的過程自己也讓我以爲有一點痛苦，項目時間短任務重，清明三天假期都是在高壓中度過，天天都處於早上朝八點到凌晨兩點不間歇的緊繃狀態，天天晚上躺在牀上都會由於想到項目的某個bug而睡不着。一度覺得本身可能完成不了這個項目。
所幸，咱們的結果是好的。再此次合做中，我以爲本身的java編碼能力也有了一些提高，但願以後作的團隊項目能夠更好！
- 1. 軟件工程結對項目-四則運算題目生成
- 2. 軟件工程結對做業01（四則運算web版）
- 3. 結對編程項目——四則運算
- 4. 結對編程項目-四則運算
- 5. 結對編程項目---四則運算
- 6. 結對編程項目四則運算
- 7. 軟件工程基礎結隊項目——四則運算
- 8. 結對項目做業報告——四則運算web項目
- 9. （軟件工程作業）結對項目-------小學四則運算網頁版
- 10. 結對項目-四則運算 「軟件」之升級版
- 更多相關文章...
- • XSL-FO 軟件 - XSL-FO 教程
- • Mozilla 項目 - 瀏覽器信息
- • IDEA下SpringBoot工程配置文件沒有提示
- • 算法總結-廣度優先算法
-
每一个你不满意的现在，都有一个你没有努力的曾经。