校園博覽會一次血的教訓（第一次專案）

校園博覽會

這個專案經歷了整整乙個多月，也是我當碼農來所接觸所做的第乙個專案，過程總是痛苦的，不過結果，一點點滿意，卻也不那麼滿意。做這次專案之前，可能技術跟經驗都不夠，導致自己也犯了很多錯誤。怎麼說呢，通過這次教訓跟學習，也讓我有了對專案的乙個很大的認識。之後也會更加去適應。加油！

【專案流程】

對於這次的專案流程，我們一開始沒有了解的很清楚，所以後面也出現了很多問題。以下是我對專案流程的一點點總結。

【前期準備】

對於乙個專案，前期準備是必不可少，也是很重要的一步。這是乙個團隊是否能夠很好的合作和合作效率的乙個很關鍵的一步。

（1）了解產品給出的資料文件、原型圖的乙個完整邏輯。了解顧客要的到底是怎樣的乙個效果。

（2）開發根據資料文件來定所有的介面，不管是介面名字還是引數，最好都訂好，介面名跟引數名最好都採用駝峰寫法，避免之後對介面的時候，大小寫不對造成的不必要的麻煩跟工作量，這也是我們這次專案犯下的很大的乙個錯誤。

（3）前端要根據產品給出的資料文件跟原型圖進行幾個人的分工，最好分工模組化，這樣方便各個頁面的鏈結，也讓專案做起來更加方便。

（4）託管工具的使用，github或者coding之類的都可以。

（5）後期會使用伺服器，這次我們是使用的tomcat伺服器進行測試互動。所以最好每個人的電腦裡都具備這個功能，有助於提高效率。

（6）前端一定要考慮首尾共用！！這兩塊也是後期改變比較多的兩塊，使用首尾共用會比較方便。

【進行中】

【主要技術使用】

（1）cookie的使用：主要是用來進行快取使用者登入資訊，好獲取並返回給後台。不過這一塊不是我負責，了解的也不是很多。之後會補上用法

（2）ajax的互動：這次的互動，我們使用的是jquery中的ajax互動。主要用法如下：

$.ajax(,  
success : 
function
(data),
error : 
function
(data)
})

（3）查詢字串：有乙個學長所給的乙個函式，其實並不是很懂怎麼寫，但是懂每個所得的結果，一般所運用的場景，就是當前跳轉頁面需要從上乙個頁面中的後台資料或者本地資料中獲取東西。如bookid

'' //

其中第乙個bookid的名字可以自設，只要下乙個頁面與之對應即可

//
查詢字串的函式
function
getsearchstring(key) 
return
obj[key];
}//互動**
$.ajax(,
success : 
function
(data),
error : 
function
(data)
})

（4）分頁效果的實現，即ajax非同步所遇問題

ajax的非同步：在執行ajax的同時，還可以繼續操作介面，無須等待ajax響應後才能繼續操作。

問題所在，我需要在外面使用前面乙個ajax中所有的東西，但是因為非同步問題，導致ajax還沒執行完，我外面就要使用，導致毫無效果。例：

//
獲取按鈕數
$.ajax(,
success: 
function
(data)
else}}
});//按鈕點選事件
$('.page_li').click(function
()) 
//因為ajax的非同步問題，導致點選按鈕並沒有任何效果

這就是ajax的非同步問題，解決方法我目前了解的有兩種，一種是es6中的promise方法，另一種就是把點選事件寫成乙個函式，直接在ajax裡面呼叫。因為現在**少，就可以直接移入ajax中。例：

//
獲取按鈕數
$.ajax(,
success: 
function
(data)
else
$('.page_li').click(function
()) }}
});//這樣點選按鈕，就會彈出1

【相容性處理】

【瀏覽器除錯】

快捷鍵：f12/ctrl+shift+i

console/network（這兩處檢視錯誤）

報錯：404：找不到檔案

500：內部錯誤—因為意外情況，伺服器不能完全請求成功

400：錯誤請求—請求中有語法問題，或不能滿足要求，無法理解此請求

2xx：成功

後台資料大小寫問題

方法：用拼接字串的方法，請求後台資料，檢視完整後台資料

【與後台整合**，結尾】

後期主要是改自己的bug和產品的需求還有跟後台協調一些資料問題，這個時候其實已經到了乙個疲勞期，最好的方法就是適當安靜、放鬆，愉快地結束乙個專案。

期待下乙個，也會再用心完成這乙個。雖然是一次血的教訓，不過獲得的東西卻是很珍貴的，加油加油！

校園博覽會 一次血的教訓（第一次專案）