一次全棧實踐心得

話很少說，先放項目體驗地址 (適配移動端) ：掌上饑荒

前端技術棧

• vue
• vue-router
• vuex
• webpack
• axios
• better-scroll
• lavas
• vuetify

後端技術棧

• egg
• express
• mysql
• mongo

運維

• nginx
• pm2
• https
• oss對象存儲
• cdn
• dns雲解析

起始

在開始作以前，個人技術棧中只有vue相關的前端知識。後端只瞭解一點mysql，運維零基礎。一路支撐我走過來的動力，除了項目自己的價值以外，很大一部分在於探索未知技術領域的新奇感。

前端

自17年三月chrome提出漸進式web應用後我就一直很關注，就想着實踐一下。從lavas開始說吧，lavas的初衷是快速地接入pwa的相關特性，包括骨架屏，離線緩存，AppShell等等。

• 骨架屏簡單來講就是替代loader，在用戶等待頁面加載時，更加耐心。骨架屏對於用戶體驗的提高很大，淘寶，餓了嗎的頁面大量地用到了骨架屏。
• AppShell是指把公共的組件像header，slider，底部導航等抽象出來放到根組件。其它擁有路由的頁面只須要配置參數，以及根據eventBus傳遞的事件作處理就能夠了，比起以前往子組件導入公共組件的方式優雅很多。
• 離線緩存，是指即便在無網的狀況下，頁面仍是會顯示基礎的app結構，而不是未鏈接互聯網。service worker的使用是一個難點，各位有興趣能夠去lavas官方站點看看，那裏有不錯的文檔。

後端

最開始我只是想提供一些數據服務，後端用express寫了一些簡單的接口，用mongo存儲非結構化的物品資料的數據。部署的時候會用到pm2，pm2的做用是代碼出錯node會自動重啓，而不是整個服務崩潰。剛上線的時候發現被植入了廣告，是一種被稱之爲dns劫持的東西。就是第三方網絡運營商在dns服務器上作了手腳，開個dns雲解析就行了。

隨着用戶增長，我開始想實踐一些更復雜的功能，因而就接入了用戶系統。就是登陸，註冊，發文，評論，回覆這些功能。express很難支撐社區相關的業務邏輯，我須要一種更嚴謹的後端架構，因而開始使用egg。egg時基於的koa的，開發體驗跟java後端那種mvc的開發模式很像：

• router負責調度請求給controller處理
• controller處理具體業務邏輯
• service負責跟數據打交道，一些增刪改查的邏輯 不只如此，egg還有本身的插件接入mysql和mongo，而且制定了嚴格的規範。值得一提的是，使用egg接入阿里雲的一些服務會很方便。好比接入oss作文件上傳。順帶一提，oss的功能很強大，好比你想使用不一樣尺寸或者不一樣壓縮比的圖片，只須要在圖片路徑後添加在oss控制檯添加好的樣式名就能夠了，而不用去改源文件。oss接入cdn也很是方便，網絡鏈路層的優化對於靜態資源加載速度的提高很大。

服務端

同源策略中有一項是同協議，也就是說http訪問不了https的接口，因此爲了實踐pwa相關的特性作了全站https。

阿里雲和騰訊雲其實都提供了免費的https證書，不過不是通配符型的，也就是說你的二級域名用不了。因爲開了express和egg兩個服務，因此我分別申請了阿里雲和騰訊雲的證書，用nginx作代理。爲了使以前老用戶能夠正常訪問，還須要把http的80端口重定向到https的443端口。https部署的過程如今看來其實很簡單，就是把證書放到站點指定目錄下，而後更改nginx的配置就能夠了，不過因爲以前沒接觸過運維相關的知識，折騰了很多時間。

如何堅持下去

我的項目很容易爛尾，究其緣由是得不到即時反饋。我有一些建議，幫助你持續堅持下去：

• 項目的出發點能極大地調動你的積極性，要麼有給你帶來財富自由的可能，要麼能促進社區成長，成就我的榮譽
• 擁抱社區，弄清楚你的直系用戶，並在他們常常彙集的論壇分享你的想法和進度，獲取反饋（百度貼吧）
• 接入統計，觀察站點天天瀏覽量和新增用戶的起伏就是一個很好的反饋（Growingio是個不錯的選擇）
• 嘗試盈利，有了必定的流量後能夠開始接入廣告，例如淘寶聯盟。從初級淘寶客到擁有鑽石展位，一路升級打怪，頗有意思。

結語

對我而言，完成這個項目最大的收穫應該是視野的提高。看問題的角度不只僅侷限於前端，也使得我在實際的工做中能承擔更多的任務和責任。