① 如何設計一個基於Node.js和Express的網站架構
推薦使用Webstorm打開項目。打開項目後，代碼結構如下圖所示：
在主體結構中從上到下介紹。 app 文件夾包含了所有後端代碼； build 文件夾中包含了最新資料庫備份； config 包含有網站整體的配置； logs 文件夾包含網站後端記錄的日誌文件； node_moles 是包含所有的 node.js 依賴包（源代碼中初始沒有此文件夾，運行 npm install 命令後所有載入的依賴包放置在此文件夾中）； public文件夾包含了所有的前端弊螞肆代碼，包括JavaScript、less、圖片、Webfont等； .bowerrc中定義了 bower 管理前端庫的下載地址； bower.json 則配置了項目需要的前端庫；.jshintre-client 和 .jshintrc-server 分別為前後端JavaScript代碼規范檢查規則；.travis.yml 為[travis]（travis-ci.org/）自動編譯配置； app.js 為node.js啟動腳本文件； build.sh 為單獨編寫的自動發布bash命令；gruntfile.js為 grunt 配置文件；newrelic.js為 newrelic 的配置文件，用於監控網站性能； package.json 包含了所有node.js依賴包配置。
項目後端結構
項目後端代碼架構如下圖所示：
主要分為兩大部分： app 和 config 。 app 裡面按照職責不同來分類，每個腳本文件對應於不同的模塊； api 文件夾包含了所有api對應的業務邏輯代碼， helper 放置一些公用租轎方法，如郵件發送、日誌記錄、資料庫連接等等； templates 放置的是靜態郵件模板； views 是後端頁面模板，使用了 handlebar 模板引擎，其中 http 中放置系統錯誤顯示頁面， layouts 放置模板頁； routes 是 express 對應的路由配置，所有的頁面和API的路由配置都在這個文件中。 config 文件夾中為系統配置，按照不同環境分為開發和現場兩個環境配置， all.js 放置共通配置， development.js 放置開發環境對應配置而 proction.js 放置線上環境配置。配置內容包括郵件發送、資料庫連接及一些第三方API所需的key等等。
項目前端結構
項目前端代碼結構如下所示：
前端代碼全部放置於 public 文件夾下。 data 目錄包含一些靜態json格式數據，後期可能會考慮放到資料庫中。 helper 中是瀏覽器下載引導頁面； images 包含了所有項目中用到的圖片，我們盡量使用第三方的圖片伺服器保存圖片，一些小圖標也盡量使用webfont。 JavaScripts 文件夾包含所有JavaScript文件，其中 app 子目錄放置業務代碼，業務物行代碼都是按照業務不同封裝成了不同的 angularjs controller； debug 子目錄放置調試用代碼，而 libs 方式前端JavaScript庫，項目中使用得JavaScript庫有angularjs 、 jQuery 及一些插件； clients.js 是所有ajax請求函數； erealm.js 是angularjs的主模塊； language.js 包含了所有多語言配置，目前支持中英文。stylesheets 包含了所有的css樣式及webfont，除了第三方庫之外，自定義的樣式全部使用了 less 。作為一種慣例，項目中添加了 humans.txt 文件，表明項目的作者信息。有關humans.txt，可以參考官方網站 humans.txt 。
自動化構建工具
項目自動化構建使用 grunt 。grunt的使用涉及開發、調試、發布階段。開發階段使用了圖片壓縮和前端代碼格式美化，使用的工具是 imagemin 和 jsbeautifier ，運行grunt prepare 命令。調試階段使用了代碼規范檢查、less編譯、自動添加瀏覽器前綴、自動載入運行nodejs並打開瀏覽器、實時監控代碼變化並刷新頁面等。開發中，使用 grunt 命令即可，為默認grunt命令。發布階段包含了JavaScript及css合並壓縮，並在文件路徑上添加哈希值來避免瀏覽器緩存問題，同時刪除開發環境中使用的代碼，使用 grunt build 命令即可把代碼切換為發布環境。
具體的使用grunt方法及相關工具的介紹，後期會有專門的技術文章講解，這里不會詳細設計技術細節。
後期持續的改進點
項目完成的比較倉促，但是我們盡量保持代碼的整潔和可維護性，一些編碼方式也借鑒當前流行的最佳實踐。但理想是美好的，現實總是不會做到那麼完美，需要不斷的完善。目前存在的問題是後端代碼結構不夠清晰、整體代碼中無用代碼還沒有來得及移除。框架上期望把 jQuery 去掉，只使用 Angularjs ，目前只做到了盡量不用jQuery 中的方法。小圖標的使用上 Bootstrap 和 Font Awesome 重復，後期會逐步刪除 Font Awesome 而只使用 Bootstrap 中帶的小圖標。目前，最大的問題是項目沒有完整的自動化測試，這個後期會逐步添加。
總結
以上是這個開源項目的整體技術結構介紹。在這個項目中，我們會持續使用最流行的Web技術，希望得到大家的持續關注，如果有開發者能一塊貢獻一些代碼，我們將會非常高興。我們已經在github.io上構建了一個技術平台來發布Web技術文章，網址是blog.erealm.cn。博客網址也同樣開源，使用了 Jekyll 構建。 Jekyll 非常強大，最大的特點是使用markdown格式來發布文章。博客的代碼在這里： github 。
我們做這個開源的項目的目的有兩個，其一是通過這個項目來展示我們做Web項目的實力，及培養團隊技術水平。其二是藉助這個項目，能和同行們有個技術上的互動和交流。如果我們的項目能讓一些新手們學到一些做Web項目的經驗，我們就很知足了。技術是不斷革新的，而國內Web技術向來是落後於國外好幾年，這個是不爭的事實。我們erealm團隊樂意為國內Web貢獻自己的力量，也歡迎國內同行們和我們交流Web開發經驗。
② 手把手教你使用nodejs編寫cli(命令行)
前端日常開發中，會遇見各種各樣的cli，比如一行命令幫你打包的webpack，一行命令幫你生成vue項目模板的vue-cli，還有創建react項目的create-react-app等等等等。這些工具極大地方便了我們的日常工作，讓計算機自己去干繁瑣的工作，而我們，就可以節省出大量的時間用於學習、交流、開發、 逛steam 。
但是有時候一些十分特別的需求，我們是找不到適合的cli工具去做的。比如說，你的項目十分龐大，你給項目添加一個新的路由，要經過 創建目錄 -> 創建.vue文件 -> 更新vue-router的路由列表 這一趟流程，就算快捷鍵創建目錄文件用得再熟悉，也比不過你一行命令來得快，特別是路由目錄嵌套深，.vue文件初始化模板復雜的時候。
所以呢，何不為自己項目寫一個cli？就專門做這些繁瑣的活？
nodejs的cli，本質就是跑node腳本嘛，基本上每位前端er都會：
然後命令行調用
可以做得更逼真一點，我們在package.json裡面的scripts欄位上添加一下腳本名：
然後命令行調用：
但是，看到這里你肯定會說，人家webpack還有vue-cli都是「有名字」的！什麼 vue-cli init app 、 webpack -p 的，多漂亮，看看這個命令行， node index.js ，還 npm run hello ，誰不會啊，丑不拉幾的，怕又不是來水文章的哦？差評！！
別急啊各位大人，接下來就說說，如何給這個node腳本起個名字。
姑且，先把這個cli的名字命名為 hello-cli ，就是我們能夠在命令行裡面，輸入 hello-cli ，然後它就列印一句 hello world ，沒有 node 也沒有 npm ，就是：
這樣，你的第一個cli腳本就成功安裝了，可以在命令行裡面，直接敲你的cli名字，看看結果輸出吧。
另外，如果你僅希望你的cli腳本僅在項目里執行，則需要在你項目裡面新建一個目錄，重復上述的操作，只是在第三步的時候，不要llink到全局裡面去，而是使用 npm i -D file:<你的腳本cli目錄路徑> ，把它當成項目的依賴安裝到node_moles裡面去，如果安裝成功，那麼在項目的package.json你會看到多了一條依賴，這條依賴的值不是版本號，而是你腳本的路徑。然後在node_moles裡面會有一個.bin目錄，裡面就存放著你的可執行文件。
當然，這樣安裝的cli腳本，必須在項目的package.json的scripts欄位上聲明腳本命令，然後通過 npm run 的方式執行。
哦？這樣子使用的話不就回到最最最開始的時候那種原始的 npm run hello 一樣么。
是的，但是有質的區別。使用 node index.js 這種方式調用的話固然簡單靈活，但是嚴重依賴腳本路徑，一旦目錄結構發生變動，寫在scripts的命令就要更改一次；但是使用npm安裝之後，本地的cli腳本就被拉到node_moles裡面，目錄結構變動對其影響不大。其次是不利於分享與發布，如果你想把你的cli腳本發布出去，那麼有一個好聽響亮的名字，比起在說明文檔裡面告訴使用者如何找到你的腳本路徑再用node執行它，簡直好上那麼一萬倍不是么？
這里也給我們提供了一個cli開發流程思路：
名字有了，輸出也有了，看看我們跟那些大名鼎鼎的cli工具，在形式上還差點啥？對了，人家可以支持不同參數選項的，還可以根據輸入的不同，產生不同的結果。
這樣吧，我們給這個cli加一個功能，既然叫 hello-cli ，那不能只會 hello world 吧，必須要見誰就說 hello 才行：
雖然這個功能很簡單，但是至少也是實現了「根據輸入的不同，產生不同結果」的效果。
命令行上的參數，可以通過 process 這個變數獲取， process 是一個全局對象而不是一個包，不需要通過 require 引入。通過 process 這個對象我們可以拿到當前腳本執行環境等一系列信息，其中就包括命令行的輸入情況，這個信息，保存在 process.argv 這個屬性里。我們可以列印一下：
列印結果：
可以看出，argv是個數組，前兩位是固定的，分別是node程序的路徑和腳本存放的位置，從第三位開始才是額外輸入的內容。那麼實現上面的功能就很簡單了，只要讀取argv數組的第三位，然後輸出出來就可以了。
npm社區中也有一些優秀的命令行參數解析包，比如 yargs ,tj的 commander.js 等等
如果你想使用比較復雜的參數或者命令，建議還是用第三方包比較好，手寫解析太耗精力了。
現在，你可以自由自在的寫你自己的cli腳本了。
如果你希望寫一個項目打完包自動推上git的cli，或者自動從git倉庫裡面拉取項目啟動模板，那麼，你需要通過node的 child_process 模塊開啟子進程，在子進程內調用git命令：
不僅是git命令，包括系統命令、其他cli命令都可以在這里執行。特別是系統命令，使用系統命令對文件目錄進行操作，效率比fs高到不知道哪裡去了。
社區上也有一些不錯的包，比如阮一峰老師推薦的 shelljs
如果你不那麼希望你的cli用起來那麼「硬核」，希望更人性化一點，比如提供一些友好的輸入、提示啊，給你的輸出加點顏色區分重點啊，寫個簡單的進度條啊等等，那麼你就需要美化一下你的輸出了。
除了顏色這部分，不使用第三方包實現起來非常繁瑣復雜，其他的功能，都可以試試自己寫。
顏色部分使用了第三方包 colors ，這里就不演示了。
其他都是由nodejs自帶的 readline 模塊實現的。
繪制的思路跟canvas繪制動畫一樣，只不過canvas是清除畫布，而命令行這里是通過 readline.clearScreenDown 清除輸出。
這樣，一個簡易的，人性化的，帶點點進度條動畫的命令行cli工具就寫好了，你也可以發揮你的想像力，去寫一些更有趣的效果出來。
畢竟我們前端，有瀏覽器我們可以寫動畫，沒了瀏覽器我們一樣可以寫動畫。
③ 重慶前端html5分享大型WEB項目不可缺少的幾個模塊
隨著「互聯網+」概念的普及，和移動互聯網技術的成熟，越來越多的公司，需要更加智能、高效、合理、人性化的交互，對web前端的需求也會越來越大，同時由於web前端的技術框架種類繁多，更新也非常快，這樣也需要大量的前端人員進行自己的技能提升。我們在做一個大型項目的時候，需要很多模塊與元素去構建，接下來，重慶前端html5開發培訓為大家分享在一個WEB項目中必不可少的幾個模塊。
一：webpack
什麼是webpack?
為什麼要用webpack?
傳統web開發——在傳統的web開發中，對於各種各樣的資源，我們會通過html中的各種標簽引入，那css資源文件來說，傳統總，通常我們在定義好的css文件夾中創建一個css文件格式的的文件，在裡面定義好的樣式，在html中，通過標簽將css資源引入進來，小型的項目這樣做並沒有什麼大的問題，而且還比較快速。但隨著公司的業務發展擴大，項目的也變得越來越大，這種方式的弊端就慢慢顯現，項目臃腫，維護變得困難。webpack開發——在webpac開發中，通過我們定義好的資源載入規則，面對上面的大型項目時，在我們要新增資源文件，我們不需要再苦苦到幾千行html文件中導入你新增的資源文件，只需要在你定義好的文件夾中新增文件，便可以正式投入到開發中了。這樣的話大大簡化了開發和維護的成本。
二：npm
什麼是npm?
npm(nodejs packages manager)翻譯過來就是node安裝包管理工具，通俗來說，在開發過程總，一些常用的功能和實現，開發人員可以將他們封裝起來，上傳到npm，交給npm管理，其他開發人員變可以npm的命令，見這些封裝好的代碼塊下載到自己的項目中供自己使用，這樣避免了大家重復造輪子的尷尬現象，大大減少了開發難度和時間。
三：vue.js
什麼是vue.js?
在講vue.js之前，先一起來看看jquery，因為很多人都是從jquery轉到vue.js，在轉變的過程中，發現有些人開始學vue.j時候很難寫出一個應用出來，在使用原生的js無論是對節點的獲取，事件的監聽和ajax的處理，都存在兼容的問題，開發過程中必須寫大量的兼容性代碼。而jquery出現正好的解決了這個問題。vue.js是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue採用自底向上增量開發的設計。Vue的核心庫只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。
vue.js——獨特的一面
讓從jquery轉vue.js的開發人員很詫異的是，vue.js的視圖層和model層是響應，我們只要修改了model層的數據，視圖層會時時顯示最新的數據結果。數據驅動，在DOM思想中，每當我們想操控一樣東西，我們總想去獲取節點，在對這個節點進行操作。而在vue.js中，這種想法是多餘的，我們可以通過控制實例的的數據，來達到我們需要的結果。
vue.js可以做什麼
vue.js只有30多k，相對動不動就300多k的庫來說，這是非常適合來開發H5應用的，結合hbuider的runtime和native.js，開發出來的應用不僅跨平台，而且性能也相當不錯，功能也和native app沒有什麼差異。
重慶中天學校JAVA培訓老師建議畢業生，畢業了不要盲目挑戰，做什麼項目無所謂，關鍵是要有成長機會。大項目小項目沒關系，主要是要能學到東西，不要好高騖遠，不要隨便下結論，不要對重復的工作厭倦，出了問題及時反饋領導，不要怕。
④ nodejs 項目如何發布
Eclipse開發環境搭建前提條件：1）Node.js已安裝ok，環叢亮境變數已配置，可以使用node -v來校驗是否安裝和配置成功（打開cmd命令窗口，輸入node -v，如果正確安裝正確，則會輸出安裝的Node.js版本號）；成功了以後，在命令窗口下執行命令： npm -v ，若Node.js安裝成功的話，npm也是安裝成功的，因為Node.js已經自帶npm。
2）Eclipse已安裝ok。
搭建步驟：
1. Eclipse插件：
NodeJS的插件：http://www.nodeclipse.org/updates/
VJET編輯提示插件：http://download.eclipse.org/vjet/updates-0.10
Google開發插件：http://chromedevtools.googlecode.com/svn/update/dev/
採用Eclipse插件的通用安裝方式即可（Eclipse》Help》install new software）
2. 安裝supervisor
因為 Node.js 只有在第一次引用到某搭睜部份時才會去解析腳本文件，以後都會直接訪問內存，避免重復載入，這種設計雖然有利於提高性能，卻不利於開發調試，因為我們在開發過程中總是希望修改後立即看到效果，而不是每次都要終止進程並重啟。 supervisor 可以幫助你實現這個功能，它會監視你對代碼的改動，並自動重啟 Node.js 。
安裝方式：打開cmd命令窗口，輸入npm install -g supervisor即可。
運行方式：supervisor XX.js。如下：
E:\tech\nodejs\microblog>supervisorapp.js
DEBUG: Runningnode-supervisor with
DEBUG: program 'app.js'
DEBUG: --watch '.'
DEBUG: --ignore 'undefined'
DEBUG: --extensions 'node|js'
DEBUG: --exec '滲枝寬node'
DEBUG: Starting child process with 'node app.js'
DEBUG: Watching directory 'E:\tech\nodejs\microblog' for changes.
HTTP server islistening at port 3000.
3. 安裝Express
Express是目前最穩定、使用最廣泛，而且是Node.js官 方推薦的唯一一個 Web 開發框架。
安裝方式：打開cmd命令窗口，輸入npm install -g express 即可。
校驗是否安裝成功命令：express –V，會輸出版本號。
4. 新建Node工程。
1) New》Node Project，命名為helloworld。
2) 打開 cmd 切換到helloworld 目錄的上級目錄，輸入 express -e ejs helloworld（注意 express 3.* 中安裝 ejs 不再是 -t 而是 -e）。
3) 切換到helloworld目錄下，輸入npm install 安裝所需模塊，
……
4) 刷新Eclipse中的工程，看到效果如下圖所示：
5. 配置Eclipse的Nodeeclipse屬性。
選擇Windows》Preferences》Nodeeclipse，
NodePath：選擇supervisor的路徑，默認在npm下，注意，此處一定要選擇supervisor的路徑，如果選擇Node.exe的路徑，則修改代碼後不會自動生效。
ExpressPath:選擇Express的路徑，默認在npm下。
6. 運行
選擇啟動的js，Run as》Node Application即可
7. 驗證自動生效
在瀏覽器中輸入http://localhost:3000，顯示如下圖。
⑤ web前端主要包含了哪些技術
前端前景是很不錯的，像前端這樣的專業還是一線城市比較好，師資力量跟得上、就業的薪資也是可觀的，學習前端可以按照路線圖的順序，
0基礎學習前端是沒有問題的，關鍵是找到靠譜的前端培訓機構，你可以深度了解機構的口碑情況，問問周圍知道這家機構的人，除了口碑再了解機構的以下幾方面：
1. 師資力量雄厚
要想有1+1>2的實際效果，很關鍵的一點是師資隊伍，你接下來無論是找個工作還是工作中出任哪些的人物角色，都越來越愛你本身的技術專業前端技術性，也許的技術專業前端技術性則絕大多數來自你的技術專業前端教師，一個好的前端培訓機構必須具備雄厚的師資力量。
2. 就業保障完善
實現1+1>2效果的關鍵在於能夠為你提供良好的發展平台，即能夠為你提供良好的就業保障，讓學員能夠學到實在實在的知識，並向前端學員提供一對一的就業指導，確保學員找到自己的心理工作。
3. 學費性價比高
一個好的前端培訓機構肯定能給你帶來1+1>2的效果，如果你在一個由專業的前端教師領導並由前端培訓機構自己提供的平台上工作，你將獲得比以往更多的投資。
希望你早日學有所成。