SPA前端后端框架簡述

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

前端框架

這次開發(fā)打算上手一下火了很久的Vue, 搜索了一下, 以vuejs-templates/webpack作為基礎(chǔ)進行開發(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本來就應(yīng)該整體組成一個部件. 之前的項目中使用RequireJS, HTML和JS在同一個目錄結(jié)構(gòu)中, 而CSS在另一個近乎一樣的平行目錄結(jié)構(gòu)中, 添了不少麻煩.

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

Webpack的一個小坑

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

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

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

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

后端框架

Node + ExpressJS

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

MongoDB + Mongoose

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

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

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

nodemon

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

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

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

斷點調(diào)試

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

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

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


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


    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上都可以運行.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

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