nodeJS學習（4）--- webstorm/...開發 NodeJS 項目-節1

前提：

　　已安裝好 IDE ，eg：webstorm/IDEA 2016.3 & 2017.1 

                nodeJS（含 npm 及 相應的模板等）

     要用 webstorm 開發 NodeJS項目（web/JS）項目，首先須要：

1. IDE 說明

     webstorm 中自帶了 nodeJS 開發環境的插件，能夠跳過該步驟，直接下一步

　　若在 IDEA中，需下載 NodeJS 插件，參考http://blog.csdn.net/wang19891106/article/details/51127133，主要步驟以下：

• 默認安裝好了IDEA，在IDEA的file -> setting ->Plugins,右邊默認是沒有這個組件的須要你手動點擊Browe repositories..，在插件列表中搜索nodejs,將看到NodeJS插件，點擊下載，重啓，（其實它會關聯到你安裝的NodeJS）以下圖； 
  
• 在new project中就多出一項NodeJS 
  
• 構建第一個NodeJS項目 
  

  出現以下問題：緣由 4.X 版本 express.js 文件名稱改變

Error creating Node.js Express App. Cannot find C:\Users\admin\AppData\Local\Temp\intellij-express-generator\node_modules\express-generator\bin\express

解決方法：方法1： 使用命令行 方式建立項目，再使用以上 IDE 打開便可（已親測試成功）

                   方法2：如上圖 構建項目時， Version 選擇 4.14.1 版本或如下（必須下載大於等於該版本的 express-generator）（已親測試成功）

2. 建立項目：本文使用 Node.js web 框架 express 框架

（1）首先須要下載保存支持 express 的模塊，以下:

npm install express  -save   # 本地安裝(不必全局安裝 將安裝包放在 ./node_modules 下（運行 npm 命令時所在的目錄），若是沒有 node_modules 目錄，會在當前執行 npm 命令的目錄下生成 node_modules 目錄。)

$ npm install body-parser --save # body-parser - node.js 中間件，用於處理 JSON, Raw, Text 和 URL 編碼的數據。
$ npm install cookie-parser --save # cookie-parser - 這就是一個解析Cookie的工具。經過req.cookies能夠取到傳過來的cookie，並把它們轉成對象。
$ npm install multer --save # multer - node.js 中間件，用於處理 enctype="multipart/form-data"（設置表單的MIME編碼）的表單數據。

　　安裝好以後，express 包就放在了工程目錄下的 node_modules 目錄中，所以在代碼中只須要經過 require('express') 的方式就好，無需指定第三方包路徑。

var express = require('express'); 

 

（2）建立一個模板引擎爲 ejs，應用名叫 testNode 的工程

• 先進入你想建立項目的目錄，eg：F:\workspace
• 建立項目，建立一個模板引擎爲 ejs，應用名叫 testNode 的工程，命令以下：

$ express --view=ejs testNode

      回車，輸出以下：

create : testNode
create : testNode/package.json
create : testNode/app.js
create : testNode/public
create : testNode/views
create : testNode/routes
create : testNode/routes/index.js
create : testNode/routes/users.js
create : testNode/bin
create : testNode/bin/www
create : testNode/public/images
create : testNode/public/javascripts
create : testNode/public/stylesheets
create : testNode/public/stylesheets/style.css

install dependencies:
  $ cd testNode && npm install 
run the app: 
  $ DEBUG=testNode:* npm start

• 按照提示，進入新建 testNode 目錄，並下載模板包，命令以下：

  cd testNode && npm install

  回車，生成的項目目錄結構以下（該文件已經生成一個能夠運行的Demo）。 

        

 bin： 是真實的執行程序

 node_modules：存放全部的項目依賴庫

 public：靜態文件(css,js,img) 

 routes：路由文件

 views：頁面文件

 app.js，程序啓動文件

 package.json：項目依賴配置及開發者信息

此時，完整的應用架構已建設完畢，以後就能夠編寫本身的代碼。

• 啓動服務。

       （1）法1： 使用 IDE 環境的設置（已嘗試成功）：

　　 以下 點擊下圖 紅圈處

      

     接着點擊 Edit Confignations.... ---> 綠色加+ --->  Name: www (默認)， 設置以下：

      其中 Name： 能夠根據本身愛好，想怎麼寫都行，結果以下：

　　　

 

　　完成後點擊 apply ---> ok 便可，出現相似如下結果：

       

　　出現以下提示」Listening on port 3000」，說明服務啓動成功 
       

• 在瀏覽器中輸入」http://localhost:3000/「，出現下圖說明成功 

     

 （2）法2： 使用 IDE 環境的終端輸入命令啓動（已嘗試成功）：

     打開 Terminal ---> npm start ，回車便可，在瀏覽器打開  localhost：3000，出現以下界面：

　　

 （3）法3： 使用 電腦命令行輸入命令啓動（已嘗試成功）：

     打開 cmd 回車---> npm start ，回車便可，在瀏覽器中打開  localhost：3000，出現以下界面：

　　 

 

3. node.js 使用ejs模板引擎時後綴換成.html （重要!!!，已親實踐）

    此部分特別感謝網址：http://www.jb51.net/article/64579.htm

    這是一個小技巧，看着.ejs的後綴總以爲不爽，使用以下方法，能夠將模板文件的後綴換成咱們習慣的.html。

 (1) 修改 app.js 文件，及修改引擎設置文件：

• 在app.js的頭上 添加定義ejs，代碼以下:

  var ejs = require('ejs');

• 添加註冊 html 模板引擎，代碼以下（兩種方式選其一便可）：

• app.engine('html',ejs.__express);    或者   app.engine('html', ejs.renderFile); 
  
  # 也能夠去掉第一步，直接 app.engine('html', require('ejs').renderFile);

• 將模板引擎換成html，代碼以下:

  app.set('view engine', 'html');

   獲得的 app.js 文件以下（整個只更改了紅框的三句）：

        

 

（2）設置具體的 運行文件 .ejs 後綴所有更改成 .html 後綴。

• 修改全部模板文件（views 文件夾裏的 .ejs 後綴文件）的後綴改成 .html。結果以下紅框部分：

           

 

好了，任務完成，能夠自行實踐啦~\(≧▽≦)/~！