學習專案與真實專案的差異及技術點探討
在完成一個專案時，為何需要學習如此多的知識點？或者說，為什麼我們的學習專案與真實專案有這麼大的不同？其實，完成一個專案並不需要知道所有的技術點，但最好理解為什麼需要它們。今天，我們將以一個簡單的留言版本為例，一起討論這些技術點。無論你是前端還是後端人員，都可以完全理解。
專案初始需求與簡單實現
老闆表示需要一個簡單的留言應用，當時只需要作為裝飾，不需要真正的留言功能，通過一個簡單的文本標籤就能實現。但這顯得太簡單了，為了使其更漂亮且有更好的交互，我們會編寫一些簡單的CSS樣式和JavaScript代碼進行裝飾。
提高開發效率的措施
如果要製作更多這樣的頁面，為了節省時間，我們會在專案中引入Vortex Trap的UI樣本以及加速開發的工具。老闆還說，為了讓頁面更漂亮和友好，考慮請專業設計師通過Mordor和PX Cook等工具進行設計和標註，然後由前端人員進行代碼實現。此時，我們需要在專案中使用Vortex Trap、SVG、Canvas和WebGL技術來實現複雜的動畫效果。由於有很多樣式，我們使用了LESS這樣的CSS預處理器。
考慮專案的兼容性與協作
老闆提到我們的瀏覽器專案很受歡迎，所以需要考慮不同瀏覽器的兼容性。又因為開發人員增加，為了共同開發和管理代碼，我們使用GET來管理代碼，並使用GET Labo建立私人代碼倉庫。為了提高用戶在線業務的速度，我們使用CDN加速一些資源。
前後端交互與頁面渲染
老闆說需要在留言板上顯示其他人的留言，這時就需要與後端交互。當時我們還是原來的服務器渲染，即前後端不分離，可以使用Java的JSP Timelift或PHP的Smarty等技術完成頁面渲染。後來老闆聽說單頁應用，也就是前後端分離的體驗更友好。
前後端分離的實現
為了實現前後端分離，前端我們選擇了Vue.js框架來實現留言版本。Vue.js的Mvvm結構通過數據綁定很容易實現這個功能。為了頁面的美觀，我們使用ElementUI或Wnt來構建頁面。後端告訴我們他們提供的接口是REST4風格，我們可以使用後端提供的Swagger接口文件查看具體的請求方法，使用Postman等工具調整接口，使用Access或YomiGangRequest完成網絡請求。
前端開發中的問題與解決方案
當前端接口寫得不好時，我們可以使用Mock創造假數據進行測試開發。在這個過程中，前端專案中的JavaScript和CSS代碼越來越多，為了更好地管理它們並實現工程化開發，前端專案使用Webpack進行打包和構建。我們發現Webpack還有代碼優化、自動向瀏覽器添加交互代碼以及代碼轉換的功能。為了更好地學習和使用Webpack，我們需要學習更多的Node.js知識，了解如何處理文件和網絡請求。當然，如果想理解這些設計，還需要一些設計模式的知識。
專案的測試與部署
老闆說專案足夠大，無論是前端還是後端，都需要先進行單元測試，然後提交代碼審查。測試人員會編寫特殊的Python腳本完成自動化測試。突然老闆問我們，為什麼前後端分離後，有些用戶在百度上找不到我們的應用。原來前後端分離對網絡SEO不太友好，我們考慮使用lex.js完成浮動渲染。
專案的數據展示與導出
為了了解我們的應用情況，就像電影中那種很酷的數據顯示屏，我們決定使用chat.js完成報告。老闆又說能否讓用戶打印出自己的留言數據，後端決定使用Easy Excel導出Excel數據，使用PDF Box導出PDF數據。
專案的持續集成與部署
此時，我們的變更越來越頻繁，部署環境也越來越複雜，我們在專案中引入了CI/CD（持續集成和持續部署）。我們決定使用Docker進行部署，使用Solr檢查代碼，使用Jackson繼續集成，使用K8s完成服務編程。
將網站轉換為小程序
老闆問能否將網站變成小程序，方便大家使用。我們考慮到小程序平台太多且人手不夠，決定使用跨平台框架。因為我們是Vue.js技術站，所以選擇了UliApp。幸運的是，我們的前後端分離接口可以直接使用。
後端技術的變更與優化
現在我們的留言板是動態的，後端服務原本是用PHP構建的，前後端分離後，我們發現Java更有優勢。聽前輩說SSH過時了，SSM也不方便，最好使用Sperm Boat。我們使用Maven構建和打包後端專案，原本使用MyCircle在專案中持續存儲留言數據，使用MyBatis和SuperDataJPIA操作數據庫。
應對數據量增加的策略
隨著訪問者數量的增加，數據庫無法承受，我們使用Redis存儲數據，並且數據庫需要分佈式分離。在網頁中，為了體驗友好並減輕負擔，我們可以使用VueX和LocalStorage在瀏覽器中存儲數據。為了防止一些用戶的混亂操作和錯誤，前端開發人員需要進行攔截和解密來控制用戶操作，後端可以使用Redis限制用戶的操作頻率，當然也可以使用Nginx限制用戶的IP訪問和操作。
專案的監控與安全
在頁面中，我們使用Sentry構建前端監控系統，後端使用Log4Jet或LogBank收集日志。現在我們的留言板需要註冊和登錄，前後端不分離時，我們使用Cookie和Session驗證用戶的真實性。當專案足夠大時，可以使用Share或Sprint Sensory的安全框架來確定用戶的操作。前後端分離後，我們可以使用Token和JWT驗證用戶的真實性。
多平台登錄與安全訪問
老闆說這個留言板專案的帳號也可以登錄公司的聊天專案，像微信一樣，可以授權很多平台登錄，此時我們可以考慮使用什麼或SSO單點登錄。為了安全訪問，我們將HTTP更改為HTTPS。
應對高負載的策略
用戶越多，留言越多，單機根本無法支持這個服務。老闆說分佈式也不能解決這個問題，所以我們開始考慮是否使用Sprint Code或Double Zuccapper，當然也會使用NGX的負載均衡。
專案的優化與新功能添加
老闆邀請了一位非常厲害的人加入專案團隊，他負責專案的優化、結構的設計和JVM的調整，還通過用戶畫像推薦相關的熱門留言。老闆說留言太多了，有些問題已經被問過，在頁面上添加一個搜索功能。此時專案規模已經很大，用數據庫的like進行搜索肯定不行，我們決定在系統中添加文本搜索和中文分詞。分詞的優勢在於，你搜索的句子可能不完全一樣，但可以通過問題中的一些詞找到相似的結果。我們使用Elasticsearch和Kabbalah完成搜索專案。當用戶留言時，我們需要將留言保存到搜索文檔中，如果同時進行，有可能會被阻塞，我們使用消息隊列實現異步操作，使用Kafka和MQ發送消息，使用LogoStash收集數據並發送到Elasticsearch，同時後台日志也由ELQ收集和處理。
統一設計風格與開源
我們的留言版本應用越來越大，周邊應用也很多，老闆問能否創建一個系統來統一設計風格，就像阿里和京東一樣。我們決定基於Vue.js開發自己的UI庫，閱讀了Element UI的原始版本，參考他們的設計，設計了留言版本UI。為了提高在業內的影響力，我們開源了UI，並使用Vue.price寫了詳細的說明。好了，本集就到這裡。
{# 
{#