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便可調試。