ivqBlog 開源博客 (angularjs + express + mongodb)

轉向做全職前端差不多一年的時間了，其中學習了構建工具grunt，gulp，angularjs，coffeescript，less，sass，自己想要做全棧開發，所以自學了mongodb，nodejs，express后端開發。

這個博客是對前段時間的學習做一個總結，整理需求，架構，開發，測試，部署大概花了一個半月的時間，代碼水平是入門級別。

線上地址：http://www.ivqblog.com/

項目源碼：https://github.com/TerryChenUI/ivqBlog

 

系統環境和部署

環境版本：

1. NodeJS：v0.12.2

2. Express：4.0

3. MongoDB：3.04

4. bower：1.72

5. gulp：3.9

 

安裝：

1. MongoDB官網下載后，修改ivqBlog\scripts\mongodb目錄下的配置項，安裝MongoDB服務並啟動。

2. 創建ivqBlog數據庫，創建users數據表，並且導入ivqBlog\db\users.json數據，賬號和密碼都為admin。

3. webui和www目錄下執行npm run prebuild安裝相關包。(若相關的包安裝失敗，請將它刪掉再重新安裝。gulp-sass總是安裝失敗，有解決辦法請指教)

 

啟動：

在webui目錄下執行gulp命令即可啟動項目。

 

項目架構

本項目采用前后端開發分離的方式。根據gulp任務配置，會將webui編譯到www目錄下，分為開發版本和產品版本。

 

組件開發，模塊包含模板html，sass樣式，js腳本，單元測試spec，自動化測試等。

 

任務配置

具體可查看build相關配置。

dev:

1. copy

2. 編譯sass文件為css

3. 編譯模板文件html為angularjs模塊

4. 動態為index.html，admin/index.html，admin/login.html 注入css文件，js文件

 

prod：

1. copy

2. 編譯sass文件為css

3. 合並並壓縮css和js

4. 編譯模板文件html為angularjs模塊

5. 動態為index.html，admin/index.html，admin/login.html 注入css文件，js文件

 

default：

1. dev

2. nodemon啟動express

3. watch sass，html，js文件

4. browser-sync，設置proxy端口與express的保持一致，自動打開瀏覽器

 

debug：

1. dev

2. watch sass，html，js文件

3. browser-sync，設置proxy端口與express的保持一致，自動打開瀏覽器

 

身份驗證

nodejs使用jwt-simple生成token輸出到客戶端，根據這個token作身份驗證，相關使用請查看以下鏈接。

http://www.sitepoint.com/using-json-web-tokens-node-js/

https://www.npmjs.com/package/jwt-simple

https://cnodejs.org/topic/53c652bfc9507b404446ee40

 

 

調試

使用webstrom調試nodejs，如下圖配置，執行gulp debug即可調試。