Vue 全家桶 + Express 實現的部落格(後端API全部自己手寫)

AlloyTeamZy發表於2019-02-16

說在前面,為什麼學習並使用Vue

1.發展趨勢

最近這幾年的前端圈子,由於戲臺一般精彩紛呈,從 MVC 到 MVVM,你剛唱罷我登場。 backbone,AngularJS 已成昨日黃花,reactjs 如日中天,同時另一更輕量的 vue 發展勢頭更猛,號稱兼具了 angularjs 和 reactjs 的兩者優點。

2.Vue能幹嗎

移動端的上網需求已經遠高於pc端,特別是 hybrid 方式的H5應用中,但是效能問題一直是痛點。 如果使用 SPA(就是俗稱的單頁應用(Single Page Web Application)),SPA它將所有的活動侷限於一個Web頁面中,僅在該Web頁面初始化時載入相應的HTML、JavaScript 和 CSS。一旦頁面載入完成了,SPA不會因為使用者的操作而進行頁面的重新載入或跳轉。沒有頁面切換,就沒有白屏阻塞,可以大大提高 H5 的效能,達到接近原生的流暢體驗。

陸陸續續看vue已經二個多月了,3月份使用vue2.0開發了一個簡單的部落格,在用vue人性化優勢的同時,的也遇到過很多坑,很多問題,分享一下我遇到的問題和解決辦法。


主要實現的功能

1.使用者登入

2.使用者註冊

3.使用者發帖

4.使用者評論帖

5.使用者留言


用到的技術

vue2.0 + vue-cli + vuex + axios + mysql + express + pm2 + webpack


構建

使用vue-cli來構建初始化專案,非常方便,相當於生成專案模板這樣子。


vuex

vue就我個人理解,是資料驅動,實現頁面元件化開發,更好管理和維護,vuex是用作元件間的通訊,當然瞭如果頁面夠簡單,也可以使用其他方法進行通訊(傳值),比如props等。


axios

說實話,專案前期我還用的是vue-resource,後面才統一改用axios(尤大大本人都力推的),二者都是用於客戶端和服務端通訊的,也就是用作ajax請求的。


webpack

webpack是一款模組載入器兼打包工具,它能把各種資源,例如JS(含JSX)、coffee、樣式(含less/sass)、圖片等都作為模組來使用和處理。比如,我們vue元件化開發,會用 “.vue” 檔案,這種檔案不會被瀏覽器所解析,所以需要用webpack來 “格式化” 他們,讓他們變為瀏覽器可以解析的檔案格式。還有,還有,用webpack,你就可以愉快的使用es6的語法啦!


express & mysql

所謂一個”系統”,怎麼只能是簡單的靜態頁面?在這裡用了express(express 是一個基於 Node.js 平臺的開發框架)和mysql來進行編寫資料儲存的後端api,用於使用者資訊在資料庫裡儲存和讀取。


pm2

pm2 是一個帶有負載均衡功能的Node應用的程式管理器,並保證程式永遠都活著,0秒的過載。按照我的理解,通俗的將,它的作用就是,本地開發環境,你要開啟node服務,實現某些功能(比如監聽某個埠),就會在控制檯執行”node app.js”(比如這個檔案叫app吧!),對應的node服務就會開啟了,但是你只要一關閉這個控制檯視窗,他就沒有對應的服務程式了,每次起服務都得”控制檯 -> node app.js”。在生產環境來說,很麻煩,這會就用到了pm2,只需要執行一次”pm2 start app.js”。ok,一勞永逸,控制檯視窗隨你怎麼自由開啟關閉,對應的服務程式永遠在後面執行著。


專案預覽

專案預覽(只適配了移動端)


Github原始碼

Github原始碼


總結

剛用vue開發的時候,遇到了很多問題,也犯了很多錯誤,不過,現在而言,自己收穫蠻多。自己的vue部落格(留言板)已經開發完成。我想說的是,麻雀雖小,五臟俱全,雖然只是一個小應用,但它涵蓋了許多知識點,包括前端,後端,資料庫等一個網站的所必須的一些組成要素,對我來說,學習意義很大,願共勉!


相關文章