Vue 全家桶 + Express 實(shí)現(xiàn)的博客(后端API全部自己手寫)

為什么學(xué)習(xí)并使用Vue

1.發(fā)展趨勢

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

2.Vue能干嗎

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

陸續(xù)續(xù)看vue已經(jīng)二個多月了,3月份使用vue2.0開發(fā)了一個簡單的博客,在用vue人性化優(yōu)勢的同時,的也遇到過很多坑,很多問題,分享一下我遇到的問題和解決辦法

Vue2_blog

vue2,vuex,vue-cli,axios,webpack,express,mysql

Build Setup

# install dependencies

npm install

# serve with hot reload at localhost:8080 (本地啟動)

npm run dev

# build for production with minification (生成靜態(tài)文件,用于打包上傳服務(wù)器)

npm run build

主要實(shí)現(xiàn)的功能

1.用戶登錄

2.用戶注冊

3.用戶發(fā)帖

4.用戶評論帖

5.用戶留言

?構(gòu)建

使用vue-cli來構(gòu)建初始化項目,非常方便,相當(dāng)于生成項目模板這樣子。

?vuex

vue就我個人理解,是數(shù)據(jù)驅(qū)動,實(shí)現(xiàn)頁面組件化開發(fā),更好管理和維護(hù),vuex是用作組件間的通信,當(dāng)然了如果頁面夠簡單,也可以使用其他方法進(jìn)行通信(傳值),比如props等。

axios

說實(shí)話,項目前期我還用的是vue-resource,后面才統(tǒng)一改用axios(尤大大本人都力推的),二者都是用于客戶端和服務(wù)端通信的,也就是用作ajax請求的。

?webpack

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

express & mysql

所謂一個"系統(tǒng)",怎么只能是簡單的靜態(tài)頁面?在這里用了express(express 是一個基于 Node.js 平臺的開發(fā)框架)和mysql來進(jìn)行編寫數(shù)據(jù)存儲的后端api,用于用戶信息在數(shù)據(jù)庫里存儲和讀取。

pm2

pm2 是一個帶有負(fù)載均衡功能的Node應(yīng)用的進(jìn)程管理器,并保證進(jìn)程永遠(yuǎn)都活著,0秒的重載。按照我的理解,通俗的將,它的作用就是,本地開發(fā)環(huán)境,你要開啟node服務(wù),實(shí)現(xiàn)某些功能(比如監(jiān)聽某個端口),就會在控制臺執(zhí)行"node app.js"(比如這個文件叫app吧!),對應(yīng)的node服務(wù)就會開啟了,但是你只要一關(guān)閉這個控制臺窗口,他就沒有對應(yīng)的服務(wù)進(jìn)程了,每次起服務(wù)都得"控制臺 -> node app.js"。在生產(chǎn)環(huán)境來說,很麻煩,這會就用到了pm2,只需要執(zhí)行一次"pm2 start app.js"。ok,一勞永逸,控制臺窗口隨你怎么自由開啟關(guān)閉,對應(yīng)的服務(wù)進(jìn)程永遠(yuǎn)在后面運(yùn)行著。

Github地址

Github源碼

項目預(yù)覽

Vue_blog(只適配了移動端)

總結(jié)

剛用vue開發(fā)的時候,遇到了很多問題,也犯了很多錯誤,不過,現(xiàn)在而言,自己收獲蠻多。自己的vue博客(留言板)已經(jīng)開發(fā)完成。我想說的是,麻雀雖小,五臟俱全,雖然只是一個小應(yīng)用,但它涵蓋了許多知識點(diǎn),包括前端,后端,數(shù)據(jù)庫等一個網(wǎng)站的所必須的一些組成要素,對我來說,學(xué)習(xí)意義很大,愿共勉!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 如果可以, 我願把天上最亮的那顆星摘給你。 如果可以, 我願化做囚鳥,但願能生生世世與你相伴。 如果可以, 你只要...
    Zero零晨閱讀 170評論 0 0
  • 有好些天,沒有跑步了,本以為月初的扭傷只是一個小傷,誰知道,原來扭傷的并不是腳踝,而是膝蓋??蓱z的膝蓋君呀。 前段...
    黑熊愛折騰閱讀 137評論 0 0
  • 01 倪小小真的不小。 這讓這個女孩自卑了十幾年。 如果看到高中時代的小小,你也許難以想象她曾經(jīng)是怎樣一個行似弱柳...
    項小北閱讀 837評論 10 14
  • 同事W大清早剛上班就開始抱怨,兒子快氣死她了。 憤憤的講述道:昨天晚上七點(diǎn)下班回家,看到兒子還在看電視,沒有寫作業(yè)...
    梅子618閱讀 376評論 0 1
  • 平常的人際溝通中,不要被別人的話左右,我們都可以有自己的觀點(diǎn)看法,但是也不要急著去否定別人,不要帶著情緒...
    濰坊谷德DDM徐芳閱讀 247評論 0 0

友情鏈接更多精彩內(nèi)容