先後端不分離

今天找文件的時候忽然發現了一枚總結文檔，以爲有必要留存，以防下次找不着就一不當心發了這篇，哈哈哈

一直作後臺管理系統，採用react先後端分離，以接口的形式相互交流，猝不及防得來了三個頁面開發，而後：

項目概況：二月開始接手A項目，該項目由前端寫靜態頁面，php開發嵌套數據的形式展示，爲期一個月，給前端時間爲兩週，而後交付到數據嵌套的人員；三月中旬開始接手B項目，該項目有兩個端，支付寶端C端以及後臺管理平臺，這兩個項目通通由前端寫靜態頁面，java來嵌套數據。

項目詳情：

1.A項目：因爲一直沒有好好的啃過bootstrap，對於這個有點熟悉又陌生，使用過可是都是別人已經搭好總體框架，本身在那個框架的基礎之上進行修改調整迭代需求，也就是粘過來刪刪改改。因而最開始沒想要運用這個，試圖本身從0開始寫頁面，固然也是以爲這個框架不夠輕便，有不少的強大的功能，本身又用不上那麼多，好比優雅的響應式，以爲蠻累贅的。技術選型的時候有同事推薦bootstrap：有小組件能夠拿過來直接使用好比彈框。表單等，還有就是兼容性會不須要咱們本身來考慮，針對我以爲這個比較大型累贅的想法，提議一張圖片就比這個框架大得許多了。

對於網站類項目經驗缺少，而後又是第一次本身一我的擔任一個完整的前端，沒有一點兒懈怠，就開始了bootstrap的摸索之路。開始寫demo實驗，差很少試驗了兩天把頭部尾部等公共部分完成，寫好了一個頁面。在試驗響應式的時候，沒有手機端頁面設計，而後作起來也花費大量時間經歷，結合產品方面的需求，最後決定將頁面寬度定位1200px，大於時左右留白顯示，小於時將容許出現滾動條。因爲是官網的項目，測試了各瀏覽器的兼容性都沒問題，最後測試結果代表基本沒有兼容性問題。

對於文件的結構糾結了一段時間，一開始給每一個頁面都寫了一個樣式文件，可是請求這麼多樣式文件也是很消耗資源的，有的頁面樣式添加的仍是蠻少的，到後來就把本身寫的所有樣式文件都寫入到了一個文件裏面index.css有大概50k的樣子。

2.支付寶C端：根據以前支付寶生活號的開發，便於後期統一管理維護，因而借鑑了他們採用的技術，採用antUI組件，全部新增樣式差很少22k的樣子，對於手機端仍是蠻好用的，手機端的經常使用組件基本上都有，在支付寶裏面也不會存在兼容性。

3.後臺B端：原本特別想爭取這個項目用react那一套來作的，antDesign功能全面，系統可維護性高。可是如今這個項目時間緊急，前端這邊抽不出更多人手，我一我的負責兩個端頁面開發已經夠嗆，因而java組抽出人手來作嵌套的工做。最後這個項目根據metronic.bootstrap框架來作，一個基於bootsrtap的成熟框架。

存在的問題：

1.經常使用的控件應該積累起來，到時候要用了直接取過來用。控件好比：時間選擇，分頁，輸入匹配，輪播，彈框，弱提示，等等

2.對於框架裏面的樣式咱們是直接重寫，仍是本身再取class來覆蓋掉

3.UI設計跟框架出入較大，調整內容較多。

4.交付以前老是很想盡善盡美，可是一交付出去就出現問題，此次一連三個項目都這樣，同類型的技術形式沒有放一塊兒總結。嵌套形式的完整交付必須包括：頁面沒有遺漏，錯誤頁面，表單驗證機制，通用的報錯提醒，弱提示，彈框的用法。

解決問題：

1.針對控件的積累問題，在查找控件的時候發現一個好辦法，那就是把日常的好用的控件都放到一個地方集中管理，推薦放到GIthub找的時候比較方便不用電腦裏死找文件。借鑑一些好的作法，而後本身寫寫，本身寫的用起來確定更加順手，有些控件基本上每一個系統會出現，更加得本身動手去寫，理解其中的原理。

2.在項目中採用的方法是，在本身的class下覆蓋框架內部。

3.儘可能避免UI在前端以前介入產品，儘可能在技術框架選定以後再去進行鍼對性的UI設計，否則會有不少調整，重寫。

4.***important***頁面通常不會落下，下次嵌套項目進行以前，首先把基礎設施建好，可行性demo，錯誤頁面，表單驗證機制，通用的報錯提醒，弱提示，彈框的用法，在這些所有完成的狀況下再去動手寫頁面，預防最後匆匆交付而後遺漏了。

總結：三種框架以前都沒有用過，能在項目開始以前寫可行性demo，在技術選型的時候聽取同事提出的的建議，在A項目前臺開發的時候，推薦的bootstrap得到良好的兼容性，antUI是借鑑以前支付寶生活號的開發方式，B端選型的時候在項目經理肯定只能出靜態頁面時，採用原來php開發人員用的metronic.bootstrap。

以前一直很恐懼的用插件框架，感受沒法駕馭，擔憂用着不徹底符合需求，後期本身不會改，此次以後，能本身動手找到問題所在，而後進行調整（A項目輪播，帶戶型說明等），一步一步摸索，變得不那麼懼怕新的東西，也不那麼懼怕本身一我的去整理規劃整個項目了。