前端開發(fā)工作匯報

前端開發(fā)工作匯報frontenddevelopmentreport.匯報人：羅劍濤部門：研發(fā)中心一、工作總結了解產(chǎn)品investigationproduct1選定技術架構selectedtechnicalframework2開發(fā)約定developmentagreement3成果展示resultsdisplay4123大量的數(shù)據(jù)操作與渲染檔案數(shù)據(jù)管理面向互聯(lián)網(wǎng)云管理數(shù)據(jù)檢索檔案查詢系統(tǒng)了解產(chǎn)品investigationproduct0102010102HTML5/CSS3編碼UI框架javascript(ES5/6/7)Element-UIVue、Vue-Cli、Vuex、Vue-RouterMockAxios選定技術架構selectedtechnicalframework基礎架構前后端完全分離，跨域調(diào)用接口調(diào)試，分別部署與上線開發(fā)模式經(jīng)過溝通確定了API文檔交互方案，以方便前后端調(diào)用、調(diào)試接口時查看API文檔的生產(chǎn)規(guī)范了接口返回數(shù)據(jù)的格式，方便前端構建展示的數(shù)據(jù)接口返回規(guī)范數(shù)據(jù)模型決定了組件的封裝與代碼風格編寫，直接影響代碼的維護成本，以及組件的通用性各個實體/數(shù)據(jù)模型的數(shù)據(jù)結構開發(fā)約定developmentagreement項目的基礎權限渲染決定了模塊化的走向項目的權限結構渲染產(chǎn)品展示-PC端resultsdisplay產(chǎn)品展示-PC端resultsdisplay產(chǎn)品展示-PC端resultsdisplay產(chǎn)品展示-PC端resultsdisplay產(chǎn)品展示-移動端resultsdisplay產(chǎn)品展示-WebPDF閱讀器resultsdisplay產(chǎn)品展示-關系圖譜resultsdisplay產(chǎn)品展示-項目結構resultsdisplaycommon：公用工具類庫modules：

模塊庫

docAnalysis：統(tǒng)計分析模塊docSearch：搜索模塊

error：錯誤處理模塊

login：登錄模塊

sysManager：系統(tǒng)管理模塊theme：主題樣式庫vuex：全局狀態(tài)庫language：全球語義化文字庫config：全局配置文件二、意見反饋開發(fā)過程developmentprocess2需求確認demandconfirmation1清晰、完整的產(chǎn)品原型，可以減少開發(fā)過程中會犯的不必要的錯誤原型產(chǎn)出需求確認projectinvestigation如果能確認需求會變更，需要及早通知，能將即將變更的方向也一并告知那是最好需求變更以數(shù)據(jù)驅動頁面的開發(fā)模式，就要求后臺開發(fā)人員盡早確定數(shù)據(jù)模型，好讓彼此知道要用多少接口，要拿多少次數(shù)據(jù)，從而能評估功能開發(fā)難度建立數(shù)據(jù)模型術業(yè)有專攻，前端開發(fā)和UI設計不可混為一談，即使項目對美觀程度要求不高，但是一旦面對著挑剔的客戶，就會導致項目頻繁返工，最終導致結項延長UI設計開發(fā)過程-傳統(tǒng)開發(fā)流程developmentprocess需求確認數(shù)據(jù)設計編寫前端邏輯編寫前端頁面自測聯(lián)調(diào)對接接口編寫后端邏輯整體調(diào)試提測前端返工后端返工上線開發(fā)過程-理想的開發(fā)流程developmentprocess需求確認開發(fā)頁面實現(xiàn)原型數(shù)據(jù)設計構建接口定義接口、規(guī)范編寫邏輯模擬請求自測編寫邏輯Postman自測聯(lián)調(diào)返工提測前端開發(fā)后端開發(fā)詳盡清晰的文檔，可以減少很多沒必要的溝通時間，并且在聯(lián)調(diào)時能盡量達到彼此想要的效果接口文檔前端的每一行代碼都運行在客戶的電腦上，從性能上考慮，前端通過接口獲得的數(shù)據(jù)應該盡量避免重新構建可用數(shù)據(jù)，以免浪費性能接口數(shù)據(jù)簡化聯(lián)調(diào)過程中可能后端會修改了接口數(shù)據(jù)，進度如果沒有同步，那么很有可能會造成前端腳本報錯，返測無法發(fā)現(xiàn)聯(lián)調(diào)進度同步聯(lián)調(diào)中應該有個開發(fā)用的服務器，可以讓前端更穩(wěn)定的調(diào)試接口，也不會因為后端改BUG而暫停調(diào)試開發(fā)用服務器由于前后端分離，雙端建立聯(lián)系只能通過大量接口，如果接口返回無意義的數(shù)據(jù)，那么就會造成數(shù)據(jù)包太大，用戶要承擔時間成本，服務器也要承受數(shù)據(jù)壓力接口數(shù)據(jù)最小化測試提問題的時候，應該附帶瀏覽器型號、版本、模式，以及產(chǎn)生BUG的步驟和預期的反應BUG復現(xiàn)開發(fā)過程developmentprocess三、目標高度獨立，高度定制，可隨意切換版本、復用靈活的模塊化統(tǒng)一編碼風格，詳盡的版本說明，低耦合的代碼結構無痛的代碼維護與迭代前后端各司其職，以最理想的模式