SPA前端后端框架簡述

最近開發(fā)一個單頁面應用(Single Page Application), 前端用Vue+Webpack, 后端用Express+Mongodb. 體驗了不少新東西, 感受了熱更新的高效, 記錄一下.

前端框架

這次開發(fā)打算上手一下火了很久的Vue, 搜索了一下, 以vuejs-templates/webpack作為基礎進行開發(fā). 這是一套已經(jīng)幫你搭好的腳手架, 包含Webpack, vue-loader和熱更新, eslint, 測試.

把這個項目clone下來, 然后按照README進行安裝即可.

項目是用Single File Vue Component (單文件Vue組件), 即HTML, JS, CSS集中在一個文件中, 如下形式:

Single File Vue Component

我非常贊同這種形式. 根據(jù)長期的開發(fā)經(jīng)驗, HTML, JS和CSS本來就應該整體組成一個部件. 之前的項目中使用RequireJS, HTML和JS在同一個目錄結構中, 而CSS在另一個近乎一樣的平行目錄結構中, 添了不少麻煩.

運行npm run dev可以進行本地開發(fā). 由于有熱更新, 你在.vue文件中的任何修改, 一旦保存, 會立即更新到瀏覽器中, 無需刷新, 而且更重要的是, 保持當前頁面的狀態(tài). 傳統(tǒng)開發(fā)中, 你修改了代碼要刷新才能讓新代碼生效, 同時頁面的狀態(tài)也丟失了(比方說需要點擊10次才能達到的狀態(tài)). 但是熱更新讓你可以延續(xù)當前頁面狀態(tài), 無疑大大提高了開發(fā)效率.

Webpack的一個小坑

我引入了一個庫后一旦npm run dev就提示我Can't resolve 'fs'或者Can't resolve 'child_process', 讓我一度喪失對那個庫的信心想棄用.

還好后來找到了解決方案, 參考這里, 應該是因為這些庫已經(jīng)是內建在node中的了, 但是webpack還在嘗試從node_modules找這些庫.

解決方法是在webpack.config.js里面加上

node: {
    fs: 'empty',
    child_process: 'empty'
}

后端框架

Node + ExpressJS

這個是很常見的后端框架了. 按照Express的文檔就可以搭建起一個建議的后臺, 暴露一些Restful API, 沒什么特別的.

MongoDB + Mongoose

之前一直想嘗試MongoDB, 這次終于上手了. 這是一個非關系式數(shù)據(jù)庫, 非常靈活. 按照Install MongoDB Community Edition on Windows安裝到本地即可.

另外有個配套的GUI, 叫做MongoDB Compass, 裝了它可以節(jié)約一些查看數(shù)據(jù)庫的時間.

然后少不了的就是Mongoose了, 想在Node中操作MongoDB就需要用到這個中間件.

nodemon

前端有了熱更新不能更爽, 后端也應該有. 于是引入了nodemon, 有了它再也不用老ctrl + c了. 它會幫你自動檢測后端代碼的修改然后自動重啟服務器. 開啟方式無非就是把node index.js改成nodemon index.js, 非常方便.

殺掉nodemon后重啟, 端口總是被占用.

這個問題被討論挺久的了. 有PR解決這個問題, 希望能夠盡快merge.

斷點調試

這點還使用得不多. 先是看到網(wǎng)上推薦node-inspector, 然后發(fā)現(xiàn)它自己都說已經(jīng)有更好的解決方案了, 就是Chrome Dev Tool.

Debugging Node.js with Chrome DevTools一文中, Paul Irish大神介紹了使用Chrome DevTools斷電調試的方法. 基本就是:

  1. node --inspect index.js
  2. Chrome中訪問about:inspect, 它會把你重定向到chrome://inspect
  3. 你看到的應該如下圖, 點擊那個Target下面的inspect即可.


    chrome://inspect screenshot
  4. 彈出的Chrome DevTools里面可以設置斷點.


    image.png

nodemon + Chrome Devtool

運行nodemon --inspect index.js即可. 但是發(fā)現(xiàn)nodemon自動重啟后, 需要重新在chrome://inspect里面點擊一下Inspect才行.

工具庫

bluebird

bluebird是一個promise庫. 類似的庫有jQuery中的Promise和Deferred, Q.

之前一直在用jquery, 現(xiàn)在項目中會用到Q, 再加上網(wǎng)上說bluebird的速度是最快的以及其他若干優(yōu)點, 于是選擇了bluebird.

目前只覺得文檔對于新手不大友好(Getting Started約等于沒有, 剩下的就是API文檔了), 剛一上來會有一些沒有頭緒.

bluebird在前后端都要用到. 特別指出的是后端Mongoose本身有一個叫做mpromise
的promise庫, 但也指出可以使用bluebird作為promise庫, 詳見這里, 使用方法也很簡單.

mongoose.Promise = require('bluebird');
assert.equal(query.exec().constructor, require('bluebird'));

axios

axios是基于Promise的HTTP client, 瀏覽器和node上都可以運行.

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末举瑰,一起剝皮案震驚了整個濱河市姐仅,隨后出現(xiàn)的幾起案子嘶伟,更是在濱河造成了極大的恐慌,老刑警劉巖坊谁,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異挥等,居然都是意外死亡翰蠢,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門服赎,熙熙樓的掌柜王于貴愁眉苦臉地迎上來葵蒂,“玉大人,你說我怎么就攤上這事重虑〖叮” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵缺厉,是天一觀的道長永高。 經(jīng)常有香客問我,道長提针,這世上最難降的妖魔是什么命爬? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮辐脖,結果婚禮上饲宛,老公的妹妹穿的比我還像新娘。我一直安慰自己嗜价,他們只是感情好艇抠,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著炭剪,像睡著了一般。 火紅的嫁衣襯著肌膚如雪翔脱。 梳的紋絲不亂的頭發(fā)上奴拦,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天,我揣著相機與錄音届吁,去河邊找鬼错妖。 笑死绿鸣,一個胖子當著我的面吹牛,可吹牛的內容都是我干的暂氯。 我是一名探鬼主播潮模,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼痴施!你這毒婦竟也來了擎厢?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤辣吃,失蹤者是張志新(化名)和其女友劉穎动遭,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體神得,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡厘惦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了哩簿。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片宵蕉。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖节榜,靈堂內的尸體忽然破棺而出羡玛,到底是詐尸還是另有隱情,我是刑警寧澤全跨,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布缝左,位于F島的核電站,受9級特大地震影響浓若,放射性物質發(fā)生泄漏渺杉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一挪钓、第九天 我趴在偏房一處隱蔽的房頂上張望是越。 院中可真熱鬧,春花似錦碌上、人聲如沸倚评。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽天梧。三九已至,卻和暖如春霞丧,著一層夾襖步出監(jiān)牢的瞬間呢岗,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留后豫,地道東北人悉尾。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像挫酿,于是被迫代替她去往敵國和親构眯。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內容

  • 轉載 :OpenDiggawesome-github-vue 是由OpenDigg整理并維護的Vue相關開源項目庫...
    果汁密碼閱讀 23,137評論 8 124
  • 2016還剩下不到最后的9個小時了早龟,我在陽光燦爛的上海惫霸,你在哪里辭舊迎新? 你是否對2017也充滿著希望與期待拄衰?它褪!...
    心途行者噶瑪梅朵閱讀 380評論 2 5
  • 從11月6日把《人生規(guī)劃》寫完發(fā)到自由人老師qq郵箱后,我不感在做以前的我:好動翘悉,勤奮茫打,啥都想做,但從來沒用過漂流...
    財富健康1閱讀 238評論 0 1
  • 未來總是充滿變數(shù)妖混,愿你始終心懷夢想老赤,終有歸處。 生命總是充滿未知制市,愿你始終堅定努力抬旺,無愧于心。 ...
    稻城禾歡閱讀 123評論 0 0
  • 又錯過了一趟公交祥楣,心裡是不開心的开财。昨晚想訂鬧鐘確忘記了。很多時候误褪,應該自己去好好把握责鳍,不給自己留後路的。以後兽间,不能...
    哭泣的雨傘閱讀 231評論 0 0