一直想將一些常規活動抽象化，制作成可配置的。原先的計劃是做成拖拽的，那種可視化搭建，運營也能自己搭建頁面。   這是一個美好的愿景，但是現實不允許我花太多精力去制作這樣一個系統。經過權衡后，先設計成一個可配置化的系統。   先對一類常用的打榜活動做定制化的設計，解決當前問題，立竿見影的提升工作效率。   先說說此系統的價值，當它完成后，受益方將包括設計組、Web組、產品組、QA組和數據分析組。 1. 設計組不用再考慮界面模塊，只需將精力集中到配色和插圖上。 2. 產品組不用再跟進此類活動，她們可以置身事外，設計做好的圖可以直接給配置人員。 3. QA組不用再過一遍測試，她們只要查看頁面表現是否正常即可。 4. 數據分析組不用再為每個活動手動制訂報表，根據存儲的信息，可自動生成。 5. Web組不用再投入人力去研發界面和接口了，只要頁面穩定運行，都不用修線上BUG了。   原先這么一個活動，人力時間包括2天開發，3天測試，1天產品，6天時間，而現在可以濃縮到幾十分鐘，大大提升了生產力。   設計組雖然不會減少頁面設計的時間，但是切圖的時間絕對能少很多。   數據分析組本來創建報表也不會費時間，但是會打斷他們的工作，自動生成后，運營就完全不用找他們了。   當然，第一版在人性化使用方面還是欠缺的，后期還有很大的優化空間。 ## 一、規范   為了完成這個系統，首先是要和各方通氣，我直接拉了個會議，叫上相關人員，開了40分鐘左右。   會議中，最重要的是和設計組制定規范，包括圖片尺寸、頁面元素、字體顏色、間距等。 :-:    其實之前與設計組制訂過一次規范，這次是在之前的規范之上，再做進一步的完善和補充。   與產品也要確定界面呈現，例如活動前樣式、活動規則等都有多套顯示方案，這些是統一還是作為配置的一部分，都要在動手前確認好。   根據會上確認的規范，就可以開始設計界面了。 ## 二、界面   界面設計比較樸素，就是根據規范中需要的內容，設計輸入框、下拉框等控件。 :-:    其中圖片管理是整個頁面的核心，通過它，可以添加頁面各個位置的圖片，完成頁面的搭建。   本來是想設置成上傳按鈕的，但這樣彈框會比較長，并且實現復雜度上會比較高，經過權衡后，還是使用了簡單的文本框，將地址填入即可。   列表頁面設計的也很精簡，為了方便查看活動，特地加上了預覽按鈕，鼠標移到預覽按鈕中，還可生成二維碼，方便手機掃碼查看。 :-:  ## 三、存儲   原先計劃是將數據存儲于MongoDB中，因為存儲的好幾個字段都是JSON格式。   若存儲在MySQL中，那么在寫入和讀取時需要分別對其進行JSON序列化和反序列化。   但是后面和數據組溝通，才了解到若要自動生成報表，那么他們就得讀表，而MongoDB他們無法讀取，之前沒有連接，需要開發成本。   為了眾樂樂，最終決定存儲于MySQL中，這樣的話，數據組也不用額外開發了。   這樣的話，配置就完成了，但是活動頁面的數據源是從另外的位置讀取的。   我們組會維護一個[定時任務](https://www.cnblogs.com/strick/p/14964048.html)，5分鐘讀取一次服務端的接口，然后存儲到指定緩存中，活動的數據源就是這個緩存數據。   要完成這個活動系統，需要我們組三個人共同完成，由我負責管理后臺的配置界面，另外一人完成活動的接口，還有一人編寫H5頁面。 ***** > 原文出處： [博客園-Node.js躬行記](https://www.cnblogs.com/strick/category/1688575.html) [知乎專欄-Node.js躬行記](https://zhuanlan.zhihu.com/pwnode) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎閱讀。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。